After the launching of BloggerMag - A new free premium Blogger template in magazine style template, many readers love the design of the template.Now ,we add some cool features to template.First one ,slider for feature post.Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.It is easy to add slider in thetemplate by 3 steps.

• First login to blogger and goto edit html.then following the steps.Better use Notepad++ for editing the template.

Step1: Add CSS

         Add the following code in my Bloggermag template code.

• Use Ctrl+f to find  this code  “ ]]></b:skin> “.
• Before this code “ ]]></b:skin> “  Add the following code.

/* -------------- SLIDESHOW ----------------- */
#slideshow {
width: 580px;   
height:220px;
overflow:hidden;

border: 1px solid #ddd;}

#slideshow ul {
margin: 0;
padding: 0;    background:transparent;

list-style: none;
height: 1%; /* IE fix */}

#slideshow li  {
margin: 0;
padding: 0;   
background:transparent;

list-style: none;
}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
} 

/* -----------SLIDESHOW > SLIDES ---------------- */

#slideshow .slides {
overflow: hidden;
width: 578px;

}

#slideshow .slides ul {    overflow: hidden;

width: 560px;}

#slideshow .slides li {
     display:none;
     list-style: none;

    left:-99999em;
    width:580px;
    height:180px;
    display:block;
    overflow: hidden;
    position:relative;
    z-index:1;}

.js #slideshow .slides li {
    margin: 0;
    padding: 0;
list-style: none;
    width:580px;
    height:180px;
    display:block;
    overflow: hidden;
    position:relative;
    z-index:1;
    }

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active  {
    font-size:12pt;
    line-height: 1.1em;
    margin:0;
    margin: 0;
    letter-spacing:0;
    list-style: none;

    }
    #slideshow .slides li  .entry  {
    overflow:hidden;   
    margin:-165px 6px 2px  185px;
align:right;
    }

/* -----------SLIDESHOW > NAVIGATION ------------------------ */

#slideshow ul.slides-nav {
background-color: #ddd;
border-top: 1px solid #ccc;}

#slideshow .slides-nav li {
list-style:none;
float: left;}

#slideshow .slides-nav li a {
display: block;
padding: 12px 17px;
outline: none;}

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;
text-decoration:underline;
}

.js #slideshow .slides-nav li.on a {
position: relative; top: -3px;}

Step2: Add Script

         Add the following code in my Bloggermag template code.

• Use Ctrl+f to find  this code  “ </head>“.
• Before this  “ </head> “ Add the following code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js' type='text/javascript'/>
<script src='http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/slideshow.js' type='text/javascript'/>  

    <script type='text/javascript'>
imgr = new Array();

imgr[0] = &quot;http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif&quot;;

showRandomImg = true;

aBold = true;

summaryPost = 160; //
summaryTitle = 35; //

numposts = 6; //
home_page = &quot;http://johanrakyat.blogspot.com/&quot;;

label8 = &quot;Feature&quot;;
tLabel8 = &quot;Feature&quot;;
Title8 = &quot;Feature&quot;;

function removeHtmlTag(strx,chop){
    var s = strx.split(&quot;&lt;&quot;);
    for(var i=0;i&lt;s.length;i++){
        if(s[i].indexOf(&quot;&gt;&quot;)!=-1){
            s[i] = s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length);
        }
    }
    s =  s.join(&quot;&quot;);
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
    document.write(&#39;&lt;ul class=&quot;clearfix&quot; style=&quot;list-style:none; position: relative;&quot;&gt;&#39;);
      for (var i = 0; i &lt; numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k &lt; entry.link.length; k++) {
              if (entry.link[k].rel == &#39;alternate&#39;) {
                posturl = entry.link[k].href;
                break;
              }
        }
        for (var k = 0; k &lt; entry.link.length; k++) {
              if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
                pcm = entry.link[k].title.split(&quot; &quot;)[0];
                break;
              }
        }
        if (&quot;content&quot; in entry) {
              var postcontent = entry.content.$t;}
        else
        if (&quot;summary&quot; in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = &quot;&quot;;
        postdate = entry.published.$t;
    if(j&gt;imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;

    //cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 =[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];

    var day = postdate.split(&quot;-&quot;)[2].substring(0,2);
    var m = postdate.split(&quot;-&quot;)[1];
    var y = postdate.split(&quot;-&quot;)[0];

    for(var u2=0;u2&lt;month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

    //var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; - (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

    var trtd = &#39;&lt;li style=&quot;list-style: none;&quot; id=&quot;main-post-&#39;+i+&#39;&quot;&gt; &lt;img style=&quot;height:165px; width:160px; margin:8px 0px 0px 8px;&quot; class=&quot;post_thumbnail thumbnail thumbnail post_thumbnail&quot;src=&quot;&#39;+img[i]+&#39;&quot;/&gt;  &lt;div class=&quot;entry&quot;&gt;&lt;h2 class=&quot;post-title&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt;    &lt;p&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;&lt;/p&gt;&lt;/div&gt;&lt;/li&gt; &#39;;
    document.write(trtd);
    j++;
}
document.write(&#39;&lt;/ul&gt;&#39;);
}

</script>

Step3: Add Html

         Add the following code in my Bloggermag template code.

• Use Ctrl+f to find  this code  “ <div class='art-content'> “.
• After “ <div class='art-content'> “ Add the following code.

 

<div class="art-Block"><div class="art-Block-tl"/><div class="art-Block-tr"/><div class="art-Block-bl"/><div class="art-Block-br"/><div class="art-Block-tc"/><div class="art-Block-bc"/><div class="art-Block-cl"/><div class="art-Block-cr"/><div class="art-Block-cc"/><div class="art-Block-body"><div class="art-BlockHeader"><div class="l"/><div class="r"/><div class="art-header-tag-icon"><div class="t">
Featured Posts</div></div></div><div class="art-BlockContent"><div class="art-BlockContent-tl"/><div class="art-BlockContent-tr"/><div class="art-BlockContent-bl"/><div class="art-BlockContent-br"/><div class="art-BlockContent-tc"/><div class="art-BlockContent-bc"/><div class="art-BlockContent-cl"/><div class="art-BlockContent-cr"/><div class="art-BlockContent-cc"/><div class="art-BlockContent-body">

        <div id="slideshow" >
            <div class="slides">

    &lt;script language=&quot;JavaScript&quot;&gt;
                document.write(&quot;&lt;script src=\&quot;&quot;+home_page+&quot;feeds/posts/default/-/&quot;+label8+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
                &lt;/script&gt;       

            </div>
    <ul class="slides-nav">
            <li ><a href="#main-post-0" >1</a></li>
            <li ><a href="#main-post-1" >2</a></li>
            <li ><a href="#main-post-2" >3</a></li>
            <li ><a href="#main-post-3" >4</a></li>
            <li ><a href="#main-post-4" >5</a></li>
            <li ><a href="#main-post-5" >6</a></li>

            </ul>
            </div>

<div class="cleared"/></div></div><div class="cleared"/></div></div>

Sorry,
I forgot to mention,You have to create one Label called "Feature" or "feature"(because i added that name in the feature slider).Next,you have to selcet the label feature when you post the feature post.Try this.Thank you
That’s it. Save the template and view the blog.
I will post the Updated template in my next post.The guides and all about Bloggermag template  will be discussed at next post, so do not forget to come back here at our website or you can subscribe via RSS Feed to get direct entry to your email.