Getting started
I assume you have a blogger account, so let's get started!
I assume you have a blogger account, so let's get started!
Installation
You can do it by follow this step:
- Unzip the “Syahira-theme.zip” file.
- On Blogger Dashboard Click Template.
- Click Backup/Restore button (Top Right).
- Click Choose File button. Find where the “Syahira-theme.xml” file location.
- Then Click Upload.
NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work
You can do it by follow this step:
- Unzip the “Syahira-theme.zip” file.
- On Blogger Dashboard Click Template.
- Click Backup/Restore button (Top Right).
- Click Choose File button. Find where the “Syahira-theme.xml” file location.
- Then Click Upload.
NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work
Default Setting
fter installing the theme, this it the minimun setting to make all widget works fine in this themes.
Embedded Comment
This to make comment area like the Demo and make Emoticon show
- On Blogger Dashboard Click Setting.
- Click Posts and Comments
- in Comment Location Choose Embedded
- Then Click Save settings.
Blog Feed
This to make Recent comment, Search Result, Auto Featured Post, and Post by Label work fine- On Blogger Dashboard Click Setting.
- Click Other
- in Site Feed Allow Blog Feed Choose Full Or Short
- Then Click Save settings.
1. If yours post have image uploaded on blogspot you can choose SHORT. but if yours post just have image from third party image hosting you must choose Full
2. Blogger feed must be not redirect to other feed site like Feedburner
3. Your's blog or website not Private
Layout Explain
- Manual Featured Post Area (work with Image Widget)
- Featured Post Area
- Top Sidebar Area
- Middle Sidebar Area
a. Popular Post
b. Recent Comment
c. Archive Widget - Bottom Sidebar Area
- Label Post Widget Area
- Footer Widget Area
Setting up the menu
To Edit Menu in this theme you can follow this step:
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
<ul class='sf-menu' id='menunav'> <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Archive</a></li> <li><a href='#'>Comments</a></li> <li><a href='#'>With Sub Menu</a> <ul> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Sub Menu</a> <ul> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> </ul> </li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> </ul> </li> <li><a href='#'>Error 404</a></li> </ul>
- Change # with yours URL link
Setting Social Icon
Manual Slide Show (Using Image Widget) OR Auto Featured Post (Slide Show From JSON Feed)
Manual Slide Show
To Create Manual Slide Show follow this step- on Dashbord Blogger Click Layout
- On Manual Slideshow Widget Area Click Add a Gadget
- Choose Image Widget
- Fill With Image Title
- Image Description
- Link When Image or Title Click
- Search Yours Image
- Uncheck shrink to fit
NB : Recommended Image Size 650px x 320px- Click Save
- If You Whan Show 5 image, do this step 5 times
Auto Featured Post (Slide Show From JSON Feed)
To add Featured Post widget follow this step- on Dashbord Blogger Click Layout
- Click Add a Gadget
- Choose HTML/Javascript
- Copy this Code:
<div id="featpost"></div> <script type='text/javascript'> jQuery("#featpost").AutofeaturedPost({ MaxPost:5 }); </script>
- Click Save
(Default) Complete Javascript to call Auto Featured Post like this code:
jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({ blogURL: "", MaxPost: 4, ImageSize: 650, Summarylength: 150, RandompostActive: true, pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif", tagName: false });
| Property | Description |
|---|---|
| blogURL | Yours blog URL or you can leave it blank to load where this script load. |
| MaxPost | Maximum number artikel will show on Featured Post |
| Summarylength | Number of summary characters to show. |
| ImageSize | Post Image size (in pixel) |
| RandompostActive | default true. It's will show article ramdomly. If want to show Recent Post just change to false |
| pBlank | Backup image if post don't have image store on blogspot or picasa web |
| tagName | If you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like this tagName:"Sports" |
Post by Label (Slider and Vertical Post)
Slider Post
To add Post by Label (Slider Post) widget follow this step- on Dashbord Blogger Click Layout
- Click Add a Gadget
- Choose HTML/Javascript
- Copy this Code:
<div id="webdespost"></div> <script type='text/javascript'> jQuery("#webdespost").RecentPostbyTag({ postType:"s", MaxPost:5, ImageSize:"s200-p", tagName:"Web Design" }); </script>
- Click Save
- Note: In tagName is name of the Post Label that will show. on this sample is "Sports" mean will display artikel from Sports label.
Vertical Post
To add Post by Label (Vertical Post) widget follow this step- on Dashbord Blogger Click Layout
- Click Add a Gadget
- Choose HTML/Javascript
- Copy this Code:
<div id="musicpost"></div> <script type='text/javascript'> jQuery("#musicpost").RecentPostbyTag({ postType:"v", MaxPost:4, tagName:"Music" }); </script>
- Click Save
- Note: In tagName is name of the Post Label that will show. on this sample is "Music" mean will display artikel from Music label.
Horizontal Post
To add Post by Label (Horizontal Post) widget follow this step- on Dashbord Blogger Click Layout
- Click Add a Gadget
- Choose HTML/Javascript
- Copy this Code:
<div id="sportpost"></div> <script type='text/javascript'> jQuery("#sportpost").RecentPostbyTag({ postType:"h", MaxPost:4, tagName:"Sports" }); </script>
- Click Save
- Note: In tagName is name of the Post Label that will show. on this sample is "Sports" mean will display artikel from Sports label.
Slider, Horizontal Post and Vertical Post use by one Javascript Script and You can see Default Code to Call this Plugin look like below::
jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({ blogURL: "", MaxPost: 4, FirstImageSize:"s220-p", ImageSize: "s80-p", Summarylength: 100, ShowDesc: false, ShowDate: true, ShowComment: true, Random: false, postType: "v", pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif", MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], tagName: false });
| Property | Description |
|---|---|
| blogURL | Yours blog URL or you can leave it blank to load JSON where this script load. |
| MaxPost | Maximum number of article will be show |
| Summarylength | Number of summary characters to show. |
| ImageSize | Image Format use Picasa/Blogspot image format: To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square. Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px) |
| FirstImageSize | Image Format use Picasa/Blogspot image format: To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square. Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px) |
| ShowDesc | To Show All Description (Just Work on Horizontal and Vertical PostType). Default is false |
| ShowDate | To Show Date: Default is true |
| ShowComment | To show Comment: Default is true (Just Work on Horizontal and Vertical PostType). |
| Random | To make post ramdom: Default is false |
| postType | There are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) and "s" (Slider Post) |
| pBlank | Backup image if post don't have image |
| MonthNames | Format months name |
| tagName | If you want to show Post by the Label. Example: to show post from Sports Label just write like this tagName:"Sports" |
Error Page
To change text on Error Page follow this step
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
<div class='error-custom'> <h2>404 Not Found</h2> <p class='error-body'>We're sorry but we could not find the page you are looking for.<br/> This may happen if you have entered site url incorrectly or this page doesn't exist anymore.</p> <p>You can try searching page again or go back to home</p> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/> <input id='searchsubmit' type='submit' value='Go'/> </form> </div>
- Change which your's Language
Widgets Configuration
Summary, Load More and View Mode
Summary and Load More
(Default) Complete Javascript to setup view mode like this code:
viewMode({ viewmodedefault:"grid", cookielist:"list", cookiegrid:"grid" });
| Property | Description |
|---|---|
| viewmodedefault | This will setup view mode: you can choose "grid" to show your's post on grid mode or "list" to show your's post on list mode |
| cookielist | List mode Cookies name. This will store on browser to make if user click list mode button. |
| cookiegrid | Grid mode Cookies name. This will store on browser to make if user click Grid mode button. |
(Default) Complete Javascript to setup Load More Post like this code:
loadMorePost({ thumbnailSize:"s200-p", summaryLength:300, MoreText:"Load more posts", viewmodedefault:"grid", cookielist:"list", cookiegrid:"grid", BackupImage:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif" });
| Property | Description |
|---|---|
| thumbnailSize | Image Format use Picasa/Blogspot image format: To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square. Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px) |
| summaryLength | Define the summary length |
| MoreText | Load more text to display: default: "Load more posts" |
| viewmodedefault | This will setup view mode: you can choose "grid" to show your's post on grid mode or "list" to show your's post on list mode (make it same setting with view mode javascript) |
| cookielist | List mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript) |
| cookiegrid | Grid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript) |
| BackupImage | Backup image if post don't have image. |
Summary
To change image size and Summary length follow this step.- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
var configSummary = { thumbnailSize: "s200-p", // Define the post thumbnail size summaryLength: 300, // Define the summary length BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image };
Property Description thumbnailSize Image Format use Picasa/Blogspot image format:
To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square.
Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)summaryLength Define the summary length BackupImage URL Backup image if post don't have image
Load More Post (Home Page)
To edit Load More Text, change image size and Summary length follow this step.- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
loadMorePost ({ thumbnailSize:"s200-p", summaryLength:300, MoreText:"Load more posts" });
Property Description thumbnailSize Define the post thumbnail size summaryLength Define the summary length MoreText Load more text to display: default: "Load more posts" image size and summary length on summary script and Load more script must have same value
View Mode (Home Page)
To edit View Mode from Grid mode to List Mode follow this step.- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
viewMode();
(Default) Complete Javascript to setup view mode like this code:viewMode({ viewmodedefault:"grid", cookielist:"list", cookiegrid:"grid" });
Property Description viewmodedefault This will setup view mode: you can choose "grid" to show your's post on grid mode or "list"to show your's post on list mode cookielist List mode Cookies name. This will store on browser to make if user click list mode button. cookiegrid Grid mode Cookies name. This will store on browser to make if user click Grid mode button.
Page Navigation
If you want to change Load more Post with page Navigation follow this step.- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
viewMode(); loadMorePost({ thumbnailSize:"s200-p", summaryLength:300 });
and this code:viewMode({ viewmodedefault:'list', cookielist:'list1', cookiegrid:'grid1' }); loadMorePost({ viewmodedefault:'list', cookielist:'list1', cookiegrid:'grid1', thumbnailSize:"s200-p", summaryLength:300 });
Change All With This Code:viewMode(); pageNavi({ postperpage:6, numshowpage:3, LatestText:"Latest Post" });
Property Description postperpage Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting numshowpage Number Page Number will Show LatestText Latest Text. This will work if Page Number not 1
Recent Comments
To add recent comments widget follow this step
- on Dashbord Blogger Click Layout
- Click Add a Gadget
- Choose HTML/Javascript
- Copy this Code:
<div id="rcentcomnets"></div> <script type='text/javascript'> jQuery("#rcentcomnets").RecentComments(); </script>
- Click Save
(Default) Complete Javascript to call Recent Comments like this code:
jQuery("#ID_Place_To_Load_Plugin").RecentComments({ blogURL:"", numComments:4, characters:100, avatarSize:50, Showimage:true, defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbYMkREB5PYqPZs15beav2tmOmkPkq5FkIIX8IJqZxymUwVfgdV-De-BwTpas5zSReRHfRMScQoNoMHi-g2YdEF1_gbllx4nadNk-IdpW06wWRK17RP2wo81pD6PfOD5fz5tIjXpLp61Q/s70/user-anonymous-icon.png", MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], maxfeeds:50, adminBlog:"" });
| Property | Description |
|---|---|
| blogURL | Yours blog URL or you can leave it blank to load where this script load. |
| numComments | maximum number of recent comment |
| characters | Number of summary characters to show. if set 0, will not show summary |
| avatarSize | Image thumbnail size/avatar size |
| Showimage | Show or hide the avatar. Value : true or false |
| defaultAvatar | Backup image if comment author don't have avatar image |
| MonthNames | Format month name |
| maxfeeds | Maximum feed to load |
| adminBlog | Control to show or hide author/admin comment. ex: if you don't want to show your comment, simply just write yours blogger name like this adminBlog:"satank MKR" |
JSON Search Result
To edit JSON Search Result Text you can follow this step
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
searchxx({summaryLength:100, scrthumbSize:50});
- If you want to change it. You can see complete default Script below:
(Default) Complete Javascript to call JSON Search Result like this code:
searchxx({ blogURL:"", srcBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", findText:"Search results for keyword", NotfindText:"No result!", Showthumb:true, LoadingText:"Searching...", summaryLength:100, scrthumbSize:50 });
| Property | Description |
|---|---|
| blogURL | Yours blog URL or you can leave it blank to load where this script load. |
| srcBlank | Backup image if post don't have image |
| findText | Sentence if founded post by the keyword |
| NotfindText | Text if no post founded |
| Showthumb | Show or hide the post thumbnail. Value : true or false |
| LoadingText | Text to show went searching |
| summaryLength | Length of summary characters |
| scrthumbSize | Size of thumbnail image, size in pixel |
Emoticon
To edit Emoticon Text you can follow this step
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
emoticonx({ emoRange:"#comments p, div.emoWrap", putEmoAbove:"iframe#comment-editor", topText:"Click to see the code!", emoMessage:"To insert emoticon you must added at least one space before the code." });
- If you want to change it. You can see complete default Script below:
| Property | Description |
|---|---|
| emoRange | Where the emoticon will show/work |
| putEmoAbove | Where the emoticon sample will place |
| topText | Sentence below the emoticon sample |
| emoMessage | Sentence below the emoticon sample and alert box |
Related Post
To edit Emoticon Text you can follow this step
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
relatedPostsWidget();
- If you want to change it. You can see complete default Script below:
(Default) Complete Javascript to call Related Post like this code:
relatedPostsWidget({ blogURL:"", maxPosts:5, maxTags:5, maxPostsPerTag:5, rlt_summary:100, rlt_thumb:200, ShowDate:true, relatedTitle:"Related Posts", recentTitle:"Recent Posts", readMoretext:"[...]", rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif" });
| Property | Description |
|---|---|
| blogURL | Yours blog URL or you can leave it blank to load where this script load. |
| maxPosts | Maximum number of article will be show (if Related Post) |
| maxTags | Maximum Tag/Label will load |
| maxPostsPerTag | Maximum post each tag/label will be show (maximum recent post if article don't have tag/label) |
| rlt_summary | Length of summary characters |
| rlt_thumb | Size of thumbnail image, size in pixel |
| relatedTitle | Title if article have related post |
| recentTitle | Title if article don't have related post (will be load recent post) |
| readMoretext | Read More Text |
| rlpBlank | Backup image if post don't have image |
Theme Customizer
It's Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Advanced
NB : Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme
After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work
NB : Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme
After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work
| Property | Description |
|---|---|
| Main Color | This Will Change Header background color, Content Area Background Color, Footer Background Color and Header and Footer Border Color |
| Header Area | This will change Blog Title Font Type, Blog Description font type, Blog Title Color and Blog Description Color |
| Menu Color | This will change Menu text color, Top boreder Color, Sub Menu Background Color and Sub Sub Menu background color |
| Post And Sidebar Area | This will Change Background Color, Border Color, Header Text Color and Button, Date, Featured Post Detail Background Color |
| Footer Area | This will change Text Color, Border Color, and Heading Text Color |
| Button and Featured | This will change Button and Featured Detail Post (Featured Post Description) text color |
| Text Color | This will change main text color |
| Link Color | This will change link color |
| Link Hover Color | This will change Hover link color (when mouse hover/mouse on a link) |
| Visited Link Color | This will change visited link color (if that link already visited) |
| Sidebar Text Color | This will change Sidebar Text Color |
| Text Font | This will change main area font type |
| Heading Font | This will change all heading font type |
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Tidak ada komentar