Sunday, August 21, 2011

Cleanside Blogger Template Installations Guide

Posted by Free Blogger Template at 5:26 PM | Labels: Templates Instruction

Template Name: Cleanside Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU
Go to "Edit HTML" page
Search the codes like below

<div id='top-menu'> 

<div class='clearfix' id='top-menu-inner'>

<div class='jqueryslidemenu transparent_class clearfix' id='myslidemenu'>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a>

<ul class='children'>

<li><a href='#' title='SUB MENU 11'>SUB MENU 11</a></li>

<li><a href='#' title='SUB MENU 12'>SUB MENU 12</a></li>

</ul>

</li>

<li><a href='#' title='MENU 2'>MENU 2</a>

<ul class='children'>

<li><a href='#' title='SUB MENU 21'>SUB MENU 21</a></li>

<li><a href='#' title='SUB MENU 22'>SUB MENU 22</a></li>

</ul>

</li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

</ul>

</div> <!-- end div #myslidemenu -->

</div> <!-- end div #top-menu-inner -->

</div> <!-- end div #top-menu -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU
Go to "Edit HTML" page
Search the codes like below

<div class='jqueryslidemenu transparent_class clearfix' id='myslidemenu'>

<ul class='menu' id='menu-menu-top'>

<li><a href='/'>Home</a></li>

<li><a href='#'>MENU 1</a>

<ul class='sub-menu'>

<li><a href='#'>SUB MENU 1</a></li>

<li><a href='#'>SUB MENU 2</a></li>

</ul>

</li>

<li><a href='#'>MENU 2</a>

<ul class='sub-menu'>

<li><a href='#'>SUB MENU 1</a></li>

<li><a href='#'>SUB MENU 2</a></li>

<li><a href='#'>SUB MENU 3</a></li>

</ul>

</li>

<li><a href='#'>MENU 3</a></li>

<li><a href='#'>MENU 4</a></li>

</ul> 

</div> <!-- end div #myslidemenu -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
Go to "Edit HTML" page
Search the codes like below

<!-- BEGIN SLIDER -->

<div class='inner clearfix' id='sliderbox_inner'>

<div class='anythingSlider'>

<div class='wrapper'>

<ul>



<!-- SLIDE 1-->

<li>

<div class='entrysliderimg'>

<div class='postthumb'>

<a href='#'>

<img height='360' src='http://3.bp.blogspot.com/-bnBfu43yDrg/TlGAfSPKSlI/AAAAAAAABhQ/97mLlSG_Se8/s1600/pixars_up-640x360.jpg' title='pixars_up' width='640'/>

</a>

</div>

</div>

<div class='entryslider'>

<h2><a href='#' title='TITLE SLIDER 1'>TITLE SLIDER 1</a></h2>

</div>

</li>



<!-- SLIDE 2-->  

<li>

<div class='entrysliderimg'>

<div class='postthumb'>

<a href='#'>

<img height='360' src='http://1.bp.blogspot.com/-rbrSHmEgkdA/TlGASCV5QYI/AAAAAAAABgY/Aqpb5yKBMss/s1600/alvin-and-the-chipmunks-the-squeakquel-wide-wallpaper-640x360.jpg' title='alvin-and-the-chipmunks-the-squeakquel-wide-wallpaper' width='640'/>

</a>

</div>

</div>

<div class='entryslider'>

<h2><a href='#' title='TITLE SLIDER 2'>TITLE SLIDER 2</a></h2>

</div>

</li>



<!-- SLIDE 3-->

<li>

<div class='entrysliderimg'>

<div class='postthumb'>

<a href='#'>

<img height='360' src='http://3.bp.blogspot.com/-WGv6PD5QhXA/TlGAfR4mCNI/AAAAAAAABhI/1aHGrWEJPFY/s1600/HDRwallpaper-_21_-640x360.jpg' title='HDRwallpaper-_21_' width='640'/></a></div>

</div>

<div class='entryslider'>

<h2><a href='#' title='TITLE SLIDER 3'>TITLE SLIDE 3</a></h2>

</div>

</li>



<!-- SLIDE 4-->

<li>

<div class='entrysliderimg'>

<div class='postthumb'>

<a href='#'>

<img height='360' src='http://3.bp.blogspot.com/-ZGA7_yAePXM/TlGAfsPpr8I/AAAAAAAABhg/t14mx7rYQWw/s1600/the-dock-640x360.jpg' title='The Dock' width='640'/></a></div>

</div>

<div class='entryslider'>

<h2><a href='#' title='TITLE SLIDE 4'>TITLE SLIDE 4</a></h2>

</div>          

</li>



</ul> <!-- end post -->

</div><!-- end div .anythingSlider.wrapper -->

</div><!-- end div .anythingSlider -->

</div> <!-- end div sliderbox_inner -->

<!-- END SLIDER -->

Change "#" with your url
Change "green url" with your images url
Change "red text" with your own

# SETUP COMMENTS REPLY FEATURE
Go to "Edit HTML" page, check "Expand Widget Templates"
Search using this keyword "", then you will see the code like below under that keyword.

<span style='font-size: 11px;font-weight: bold;'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=557685659298030308&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>

Change "red numbers" with your own blog-ID.