Sunday, August 21, 2011

Cleanside Blogger Template Installations Guide

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 "<!-- comments reply -->", 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.



9 comments:

  1. Is there a way to change the way the posts show up? I like the "read more" aspect, but would like them to be lengthwise rather than in boxes side by side. There's also no read more link on the summary. Can you help?

    ReplyDelete
  2. How do i edit the Title of the Blog? I want to change the font and the size. Can you please help.

    ReplyDelete
  3. @Mumsy: I only help you to add "Read more" under summary. To be lengthwise need to change javascript and not easy to do.

    Go to "Edit HTML" -> "Expand Widget Templates"
    Search this code

    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>

    Paste this code under that code

    <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a>

    @Karla: Go to "Edit HTML" then search Search this css code

    #header h1 {
    color:#000;
    font-size:30px;
    padding: 0;
    margin: 0px 0 10px;
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', arial, serif;
    }

    It's a css code for Title of the Blog, you can change color, font-size, or font-family as you wish.

    ReplyDelete
  4. How to add banner on the top of page ?

    ReplyDelete
  5. by selecting the image of post showing in frame can i enter in its post?

    ReplyDelete
  6. A framework and personal growth cannot be built on hublot replica uk inspirational quote, or based on a few pages of a book, research is critical for change and development. Positive Influences Bring about Good Feelings: Surrounding yourself with positive things, this does not imply inspirational quotes and books, cartier replica uk can be almost everything that brings a person joy, is said to achieve the most unique and positive affect on a model's well being and emotional health. Along with setting up a confident environment it is crucial that the inner, and emotional growth continues through positive and inspirational tellings, this ensure that a continued positive outlook is maintained. Keep in mind that feeling tag heuer replica sale and being forced to feel better, turn to positive inspiration. A person surprised at how reading a few uplifting words provides about good feelings and a sense of happiness. You will learn How to deal with The Negative: Everyone deals with fake rolex watches and unpleasant situations, it's just a part of life, however it is what you do with that situation and/or how you grow from the experience that stands between positive and negative people, and it can be said, happy from unhappy persons. If we aren't careful, negativity can find their way into our inner being and bring out a lot of negativity that is detrimental both internally and omega replica sale, this gradually and unfortunately can become a habit, so one looses control over the negativity and negative outlooks.

    ReplyDelete