April 5, 2025 02:54:04 AM Menu
» » How To Install Sevida - Responsive Blogger Template

A+ A-
Social

Download This Theme


Getting started

Installation


  1. Unzip the file you downloaded
  2. On Blogger Dashboard Click Template.
  3. Click Backup/Restore button (Top Right)
  4. Click Choose File button. Find where the “Sevida-theme.xml” file location.
  5. Then Click Upload.
NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customise Work.



Default Setting

After installing the theme, this it the minimum setting to make all widget works fine in this themes.

Embedded Comment

This to make comment area like the Demo and make Emoticon show
  1. On Blogger Dashboard Click Settings.
  2. Click Posts and Comments
  3. In Comment Location Choose Embedded
  4. Then Click Save settings.

Blog Feed

This to make recent comment, Search Result, Featured Post, Related Post, and News Ticker work fine
  1. On Blogger Dashboard Click  Settings.
  2. Click Other
  3. In Site Feed  Allow Blog Feed Choose Full Or Short
  4. Then Click Save settings.


Layout Explain

  1. Right Header Widget Area(Ads 468x60)
  2. Auto Featured Post Area
  3. Top Sidebar Area
  4. Middle Sidebar Area
    a. Popular Post
    b. Recent Comment
    c. Archive Widget
  5. Bottom Sidebar Area
  6. Label Post Widget Area
  7. Footer Widget Area
  8. Manual Featured Post Area (work with Image Widget)






Setting up the menu




To Edit Menu in this theme you can follow this step:
  1. On Blogger Dashboard Click Template
  2. Click Edit HTML
  3. Top Menu Scroll down and Find this Code.


    <ul class='sf-menu' id='topmenunav'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>More</a>
    <ul>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a></li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu</a></li>
</ul>
* Change # with yours URL link

 Middle Menu 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


To Edit Social Icon in this theme you can follow this step:
  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code 

<ul>
  <li><a target='_blank' class='fbx' href='#' title='Facebook'>facebook</a></li>
  <li><a target='_blank' class='twix' href='#' title='Twitter'>twitter</a></li>
  <li><a target='_blank' class='goex' href='#' title='Google+'>Google+</a></li>
  <li><a target='_blank' class='linx' href='#' title='Linkedin'>Linkedin</a></li>
  <li><a target='_blank' class='pinx' href='#' title='Pinterest'>Pinterest</a></li>
  <li><a target='_blank' class='drix' href='#' title='Dribble'>Dribble</a></li>
  <li><a target='_blank' class='vmex' href='#' title='Vimeo'>Vimeo</a></li>
  <li><a target='_blank' class='rssx' href='#' title='RSS'>RSS</a></li>
</ul>


* Change # with yours Social URL link
Date (Month Name)


To Edit Date Date (Month Name) in this theme you can follow this step:

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code 
datetime();
Change with this script (Default Javacript):

 
datetime({
months:["January","February","March","April","May","June","July","August","September","October","November","December"]
});
change Month name with yours language.

 Creating Content Featured Post, Vertical Label Post, Horizontal Label Post, Slider Label Post and Error Page
Post Width Image

To make post with image look good you should make the HTML like this example.

Default Image Blogger HTML (without caption)

 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a></div>
Image HTML Recommended

For Image Float to Left

<a class="left" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>


For Image Float to Right

 
<a class="right" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>
For Center Image

 
<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>
Default Image Blogger HTML (with caption)

For Image Float to Left

 
<div class="left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>


For Image Float to Right

 
<div class="right">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>


For Center Image

<div class="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pwExylFaoFo3ohO1Kxoldh_HMLgIvRRnGphSgeKzuGtH_bYTCgdsYmWW2lHOjLLc1wz4pe-BVM0YEkeO9cnx-f28XX90yqgeOHgUQsuapku4bA8LylHkKSXwxZozwTl8Sa_GN2D4Wfg/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>


 Auto Featured Post ( Random, Recent, Random by Label or Recent by Label )


To  Create Featured Post Widget follow this step
  1. on Dashboard Blogger Click   Layout
  2. On Manual Slideshow Widget Area Click Add a Gadget
  3. Choose HTML/Javascript widget
  4. 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: 500,
Summarylength: 150,
slideSpeed:5000,
ShowDate: true,
ShowComment: true,
animation:"slide",
NoCommentText: "No Comment",
OneCommentText: "Comment",
CommentText: "Comments",
RandompostActive: true,
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
tagName: false
});
Default javascript mean if you just insert code like this:

jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost();

Featured post result will same with default script.


if you want to change it. ex: Show featured with maximal 8 from label Movies, don't show date and comment, and post not Random (Recent). Yours script will look like this:



jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
MaxPost: 8,
ShowDate: false,
ShowComment: false,
RandompostActive: false,
tagName: "Movies"
});

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.
slideSpeed
Set the speed of the slideshow cycling, in milliseconds
ImageSize
Post Image size (in pixel)
ShowDate
If you want to show post date (true or false)
ShowComment
If you want to show Comment number (true or false)
animation
Select your animation type, "fade" or "slide"
NoCommentText
Text if your post don't have comment
OneCommentText
Text if your post have one comment
CommentText
Text if your post have more than one comment
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
MonthNames
Format months name
tagName
If you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like thistagName:"Sports"

Manual Slide Show (Using Image Widget)


To Create Manual Slide show follow this step
  1. on Dashboard Blogger Click   Layout
  2. On Manual Slideshow Widget Area Click Add a Gadget
  3. Choose HTML/Javascript widget
  4. Copy this Code
  1. Fill With Image Title
  2. Image Description
  3. Link When Image or Title Click
  4. Search Yours Image
  5. Un check shrink to fit



  1. NB : Recommended Image Size 670px x 280px
  2. Click Save
  3. If You Want to Show 5 image, do this step 5 times 


  1. If You Want to change Slideshow speed or animation type go to template
  2. Click Edit HTML and Scroll down and find this code:


manualfeaturedPost();
and change with (Default Javascript):

manualfeaturedPost({
slideSpeed:5000,
animation:"slide"
});

PropertyDescription
slideSpeedSet the speed of the slideshow cycling, in millisecond
MaxPostSelect your animation type, "fade" or "slide"
Then Click Save Template


Post by Label (Slider, and Vertical Post)


Slider Post
To add Post by Label (Slider Post) widget follow this step
  1. on Dashboard Blogger Click   Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
MaxPost:9,
ImageSize:"s180-p",
postType:"s",
tagName:"Sports"
});
</script>


  5. Click Save
  6. Note: In tag Name is name of the Post Label that will show. on this sample is "Web Design" mean will display article from Web Design label.

Vertical Post



To add Post by Label (Vertical Post) widget follow this step
  1. on Dashboard Blogger Click   Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
MaxPost:6,
FirstImageSize:"s220-p",
ImageSize:"s80-p",
tagName:"Music",
postType: "v",
MoreText: "View All About",
AjaxLoad: true,
MoreNumPost: 6
});
</script>


  5. Click Save
  6. Note: In tag Name is name of the Post Label that will show. on this sample is "Music" mean will display article from Music label.

Horizontal Post



To add Post by Label (Horizontal Post) widget follow this step
  1. on Dashboard Blogger Click   Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code:

    <div id="webpost"></div>
<script type='text/javascript'>
jQuery("#webpost").RecentPostbyTag({
MaxPost:6,
FirstImageSize:"s220-p",
ImageSize:"s80-p",
tagName:"Web Design",
postType: "h",
MoreText: "View All About",
AjaxLoad: true,
MoreNumPost: 6
});
</script>


  5. Click Save
  6. Note: In tag Name is name of the Post Label that will show. on this sample is "Motion Design" mean will display article from Web Design label.

(Default) Complete Javascript to call Post by Label (Slider, Horizontal and Vertical Post) like this code:



jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({
blogURL: "",
MaxPost: 5,
FirstImageSize: "s220-p",
ImageSize: "s80-p",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
Summarylength: 100,	
MoreText: "View All About",
LoadMoreText: "Load More Post",
MoreNumPost: 6,
AjaxLoad: true,
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 where this script load.
MaxPost
Maximum number of article will be show
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)
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)
ShowDesc
If you want to show or hide post description (work in vertical and horizontal) (true or false)
ShowDate
If you want to show or hide date true to show or false to hide
ShowComment
If you want to show or hide comment number true to show or false to hide
Random
If you want to generate random post true to random or false to recent. if you set true AjaxLoad will not work (same like AjaxLoad set false).
Summarylength
Number of summary characters to show.
MoreText
More Button Text (If post generate from label/tag)
LoadMoreText
More Button Text (if post generate from recent post or tagName still false and AjaxLoad true)
MoreNumPost
Number post will show if page redirect (AjaxLoad set false) if you'r use pageNavi script this number must same with postperpage number
AjaxLoad
If you'r want More Button will load more from next page and add after last post. If you set false page will redirect if More Button clicked
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 store on blogspot or picasa web
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 tag Name:"Sports"




Error Page





To change text on Error Page follow this step

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code

    <div class='error-custom'>

<h2>404 Not Found</h2>
<p class='error-body'>We&#39;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&#39;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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>

</div>

  4. Change which your's Language

Archive Pages




To make archive page just copy this HTML code to New Page.
<div id="table-outer"><table border="0"><tr><td><label>Sort List by:</label></td><td><select id="orderFeedBy"><option value="published" selected>Latest Published</option><option value="updated">Latest Update</option></select></td></tr><tr><td><label>Sort List by Category:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Search with Keyword:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js" type="text/javascript"></script>


If don't know how to make New Page Follow this step.
  1. On blogger Dashboard Click   Page
  2. Click New Page and Choose Blank Page
  3. Add Title
  4. Click HTML and Copy this Code


<div id="table-outer"><table border="0"><tr><td><label>Sort List by:</label></td><td><select id="orderFeedBy"><option value="published" selected>Latest Published</option><option value="updated">Latest Update</option></select></td></tr><tr><td><label>Sort List by Category:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Search with Keyword:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js" type="text/javascript"></script>
Click Publish
Widgets Configuration

 NB: summary and Load more image use Official Blogspot Thumbnail. It mean the image must upload to blogspot for make it show on home page.

Summary, Load More and View Mode



Summary

To change image size and Summary length follow this step.
  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
Scroll down and Find this Code

var configSummary = {
thumbnailSize: "s180-c", // Define the post thumbnail size
summaryLength: 200, // Define the summary length 
slideffect: true, // Define to make image slide
maxImage:5, // Define Maximal Image to image slide
slideSpeed: 3000, // Define Slideshow Speed in milisecond
BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image   
};
PropertyDescription
thumbnailSizeImage Format use Picasa/Blogspot image format:
To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.
Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
summaryLengthDefine the summary length
slideffectIf your post have image more than you set thistrue image will become slideshow. note: this setting must be same with Load More Post or Page Navigation
maxImageMaximum image add to the sildeshow
slideSpeedSet the speed of the slideshow cycling, in milliseconds
BackupImageURL Backup image if post don't have image
(Default) Complete Javascript to setup view mode like this code:
viewMode({
viewmodedefault:"grid",
cookielist:"list",
cookiegrid:"grid"
});
PropertyDescription
viewmodedefaultThis 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
cookielistList mode Cookies name. This will store on browser to make if user click list mode button.
cookiegridGrid mode Cookies name. This will store on browser to make if user click Grid mode button.

 Load More Post (Home Page)


To edit Load More Text, change image size and Summary length follow this step.
  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code 

    loadMorePost ({
thumbnailSize:"s180-c",
summaryLength:200,
MoreText:"Load more posts"
});
    PropertyDescription
    thumbnailSizeImage Format use Picasa/Blogspot image format:
    To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.
    Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
    summaryLengthDefine the summary length
    MoreTextLoad more text to display: default: "Load more posts"


    image size and summary length on summary script and Load more script must have same value
(Default) Complete Javascript to setup Load More Post like this code:

loadMorePost({
thumbnailSize:"s180-c",
summaryLength:200,
MoreText:"Load more posts",
viewmodedefault:"grid",
cookielist:"list",
cookiegrid:"grid",
monthName:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
slideffect:true,
maxImage:5,
slideSpeed:5000,
BackupImage:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif"
});
PropertyDescription
thumbnailSizeImage Format use Picasa/Blogspot image format:
To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.
Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
summaryLengthDefine the summary length
MoreTextLoad more text to display: default: "Load more posts"
viewmodedefaultThis 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)
cookielistList mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript)
cookiegridGrid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript)
monthNameMonth Name language. This month name must be same with datenya(); month name
slideffectIf your post have image more than you set this trueimage will become slideshow. note: this setting must be same with Summary Script
maxImageMaximum image add to the sildeshow
slideSpeedSet the speed of the slideshow cycling, in milliseconds
BackupImageBackup image if post don't have image store on blogspot or picasa web.

 View Mode (Home Page)

To edit View Mode from Grid mode to List Mode follow this step.
  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

    viewMode();
    (Default) Complete Javascript to setup view mode like this code:

    viewMode({
viewmodedefault:"grid",
cookielist:"list",
cookiegrid:"grid"
});
(Default) Complete Javascript to setup view mode like this code:
viewMode({
viewmodedefault:"list",
cookielist:"list",
cookiegrid:"grid"
});

PropertyDescription
viewmodedefaultThis 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
cookielistList mode Cookies name. This will store on browser to make if user click list mode button.
cookiegridGrid mode Cookies name. This will store on browser to make if user click Grid mode button.

Date (Month Name)

To edit change the Date Month name follow this step.
  1. On Blogger Dashbord Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

datenya();
(Default) Complete Javascript to setup view mode like this code:
datenya({
monthName:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});
If you change this month name you must change Load More Post or Page Navigation month name too. 

Page Navigation


To edit Page Navigation, change Number Post Per Page and Number Show Page Number follow this step.

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :


    viewMode({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1'
});
loadMorePost({
  viewmodedefault:'list',
  cookielist:'list1',
  cookiegrid:'grid1',
  thumbnailSize:"s180-c",
  summaryLength:200,
  MoreText:"Load more posts"
});
    and this code

    viewMode();
loadMorePost({
  thumbnailSize:"s180-c",
  summaryLength:200,
  MoreText:"Load more posts"
});
    change all with:

    viewMode();
pageNavi({
postperpage:6,
numshowpage:3,	
thumbnailSize:"s180-c",
summaryLength:200,
});
    (Default) Complete Javascript to setup page Navigation like this code:

    pageNavi({
postperpage:6,
numshowpage:3,
previous:"&#171;",
next:"&#187;",
loadAjax:true,		
thumbnailSize:"s180-c",
summaryLength:200,
viewmodedefault:"grid",
cookielist:"list",
cookiegrid:"grid",
monthName:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
slideffect:true,
maxImage:5,
slideSpeed:5000,
BackupImage:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif"
});

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
previous
previous text/word.
next
next text/word.
loadAjax
option true or false. if set true will be same like Load more Post. If false page will be redirect
thumbnailSize
Image Format use Picasa/Blogspot image format: 
To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.
Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
summaryLength
Define the summary length
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.
monthName
Month Name language. This month name must be same with datenya(); month name
slideffect
If your post have image more than you set this true image will become slideshow. note: this setting must be same with Summary Script
maxImage
Maximum image add to the sildeshow
slideSpeed
Set the speed of the slideshow cycling, in milliseconds


Recent Comments


To add recent comments widget follow this step
  1. on Dashboard Blogger Click   Layout
  2. Click Add a Gadget
  3. Choose HTML/Javascript
  4. Copy this Code

    <div id="rcentcomnets"></div>
<script type='text/javascript'>
jQuery("#rcentcomnets").RecentComments();
</script>
  5. Click Save
(Default) Complete Javascript to call Recent Comments like this code:


RecentComments({
blogURL:"",
numComments:4,
characters:100,
id_containrc:"#rcentcomnets",
avatarSize:50,
loadingClass:"loadingxx",
Showimage:true,
defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3YjlzU4wD57nKF_TTsH_cEysVAndmAgRM0pM8NkMUlPi35yguAngbZiBi5BQZsfDmGA5gIatLmTVLq4hO87OkH8eRdGRM9uCOxJelW0mXUu5rnedWcr4pkkvkAphxDlRVaUeV9ZzsBIo/s70/user-anonymous-icon.png",
MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
maxfeeds:50,
adminBlog:""
});

PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
numCommentsmaximum number of recent comment
charactersNumber of summary characters to show. if set 0, will not show summary
id_containrcID of div where the recent comment will be display must add this #, Example: if want to show in <div id="rcentcomnets"></div> write like this "#rcentcomnets"
avatarSizeImage thumbnail size/avatar size
loadingClassClass went the recent comment loading.
ShowimageShow or hide the avatar. Value : true or false
defaultAvatarBackup image if comment author don't have avatar image
MonthNamesFormat month name
maxfeedsMaximum feed to load
adminBlogControl 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:"Your Blog URL"

JSON Search Result




To edit JSON Search Result Text you can follow this step

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code

    searchxx({summaryLength:100, scrthumbSize:50});
  4. 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
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
srcBlankBackup image if post don't have image
findTextSentence if founded post by the keyword
NotfindTextText if no post founded
ShowthumbShow or hide the post thumbnail. Value : true or false
LoadingTextText to show went searching
summaryLengthLength of summary characters
scrthumbSizeSize of thumbnail image, size in pixel

Emoticon


To edit Emoticon Text you can follow this step.

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. 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."
});
  4. If you want to change it. You can see complete default Script below:
PropertyDescription
emoRangeWhere the emoticon will show/work
putEmoAboveWhere the emoticon sample will place
topTextSentence below the emoticon sample
emoMessageSentence below the emoticon sample and alert box
News Ticker


To edit News Ticker Text you can follow this step

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :

NewsTicker();

(Default) Complete Javascript to call JSON Search Result like this code:

NewsTicker({
blogURL: "",
MaxPost: 10,
Speed: 0.10,
titleText: "Latest",
tagName: false,			
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});
If you want to change it. You can see complete default Script below

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 News Ticker
Speed
Speed each artikel effect
titleText
News Ticker Title Text
tagName
If you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"
MonthNames
Format months name


Related Post



To edit related post you can follow this step

  1. On Blogger Dashboard Click  Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :
    relatedPostsWidget();
  4. 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,
ShowComment:true,
ShowDate:true,
DateFloat:false,
ShowDesc:true,
rlt_summary:100,			
relatedTitle:"Related Posts",
readMoretext:"Read more »"			
rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"
rlt_thumb:70			
recentTitle:"Recent Posts"
MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});
PropertyDescription
blogURLYours blog URL or you can leave it blank to load where this script load.
maxPostsMaximum number of article will be show (if Related Post)
maxTagsMaximum Tag/Label will load
maxPostsPerTagMaximum post each tag/label will be show (maximum recent post if article don't have tag/label)
ShowCommentShow or Hide Comment Number. option true or false
ShowDateShow or hide Date. option true or false
DateFloatIf you want make the date like Recent Post by Tag Date model.
ShowDescShow or hide post description. option true or false
rlt_summaryLength of summary characters
rlt_thumbSize of thumbnail image, size in pixel
relatedTitleTitle if article have related post
recentTitleTitle if article don't have related post (will be load recent post)
readMoretextRead More Text
rlpBlankBackup image if post don't have image
MonthNamesMonth name format

Theme Customise




It's Easy to customise this themes. 

  1. Just Go to Blogger Dashboard 
  2. On Blogger Dashboard Click  Template
  3. Click Customise 
  4. Click Advanced

NB : Blogger Customise will work if Blogger Mobile Template Enabled before upload this Theme

After customise yours template you can disable Blogger Mobile Template but it will make Blogger Customise not work.


Property
Description
Header Title
This for setting the Header Font, Description Font, Header Color and Description Color
Top Navigation
Top Navigation Text Color, Navigation Background Color, and Selected/current link Color
Middle Navigation 1
Background color, Shadow color and Selected/current link color
Middle Navigation 2
Font type, Sub Menu background color, Link Color
Middle Navigation 3
Responsive Button Color, Responsive Shadow color, Responsive Background Color
Content Area
Font type, Background color, Text Color, Box Shadow Color
News Ticker
Border Color, Latest Background Color, Latest Text Color
Sidebar
Sidebar Border Color, Sidebar Background Color, and Sidebar Text Color
Sidebar Tab
Tab Background Color, Tab Selected color, Tab Text color
Main Area 1
Heading font type, Post font type, Heading font color, Post text color
Main Area 2
Button/Date Background color, Button/Date Hover Color, Button/date Text Color
Back top Button
Back top Background color and Hover Color
Footer Area 1
Footer heading font type, Heading color, Footer Text color
Footer Area 2
Footer Background color and Border top Color
Search Box
Search Box background Color, Text Color, Box Result Background Color, Box Result Text Color
Comment Area
Border Color, Reply Box Background Color, Reply Box Shadow Color
Post Footer
Border top Color, Background color
Slideshow
Slideshow title font type, Text Color, Title Background color, Description Background color
Body Background Color
Main body background color
Link Color
Main link color
Visited Link color
main visited link color
Image Border Color
Border of image color
Heading Font
Heading Font type
Post Title Color
Post Title color or article





If you still feel any problem do not hesitate to contact us.
02 Nov 2013
Tags:

Share to:

at 2:15 pm

Post a Comment Blogger

  1. Anonymous25 February 2014 at 01:38

    Keeping track like this is a great way to stay motivated.
    In summary, this accepted workout course has a few minuses and many pluses.
    Now that you know the muscle groups to work, you need to know the basics of the routine you are going
    to put together.

    free Fitness programs for beginners

    ReplyDelete

Don't Comment irrelevant It will be deleted!

Emoticon
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer (y) best dislike
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
 
Top