Popular Post Slider

Ingin tampilan Popular Post anda seperti ini. Lihat Demo.

Popular Post sangat dibutuhkan bagi para Blogger untuk memamerkan artikel - artikel terdahulu yang menurutnya bagus bagi para pengunjung blognya, artikel dengan informasi yang baru, bahkan artikel dengan informasi yang sedang hangat - hangatnya dibicarakan oleh seluruh masyarakat dunia maya.

Oke deh, langsung aja cekidot, lihat langkah berikut ini ;

Cara menambahkan Popular Post Slider adalah sebagai berikut :

1]. Login ke Blogger

2]. Klik Dasbor >> Template >> Edit HTML

3]. Tekan "crtl+F" pada keyboard untuk mencari kode "<div id='content-wrapper'>" lalu letakkan HTML berikut (berwarna merah + hijau) tepat di atas kode yang telah dicari barusan

<Accordion Featured Post Slider>       
<b:if cond='data:blog.url == data:blog.homepageUrl'>        
<div id='tbi_slider'>        
<ul>        
<li>        
<div id='tbi_title' locked:'true'>        
  <a href='http://16-february.blogspot.com'>February<br/>Blogger</a>        
</div>        
<a href='http://16-february.blogspot.com'>        
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHFZVZQFYwSSxzvnk1udhyBSklU4Jy2Y2ndnS-QeOOopUbkR1GKZLbt4vX1NNUG36WHC7jT8tORosTi2oN5wj-FhagGAsN-hUnojl2poe_CZGG5wptUuGty4Ne4DDTYuXl_ave1G-nQoWH/s640/%E2%99%ABFebruary+Blogger%E2%99%AB+TV+ONE+Online+-+Mozilla+Firefox_2013-05-22_00-09-58.jpg'/>        
</a>        
</li>        
<li>        
<div id='tbi_title'>        
<a href='HTML Post No. 1'>Tittle Post No.1</a>        
</div>        
<a href='HTML Post No. 1'>        
<img src='HTML Image Post No. 1'/>        
</a>        
</li>        
<li>        
<div id='tbi_title'>        
<a href='HTML Post No. 2'>Tittle Post No.2</a>  
</div>        
<a href='HTML Post No. 2'>        
<img src='HTML Image Post No. 2'/>        
</a>        
</li>        
<li>        
<div id='tbi_title'>        
<a href='HTML Post No. 3'>Tittle Post No.3</a>        
</div>        
<a href='HTML Post No. 3'>        
<img src='HTML Image Post No. 3'/>        
</a>        
</li>        
<li>        
<div id='tbi_title'>        
  <a href='HTML Post No. 4'>Tittle Post No.4</a>        
</div>        
<a href='HTML Post No. 4'>        
<img src='HTML Image Post No. 4'/>        
</a>        
</li>                
</ul>        
</div>        
</b:if>        
<Accordion Featured Post Slider>

* keterangan :

ubah HTML Post No. dengan URL halaman artikel yang akan dituju.

ubah Title Post No. dengan Judul artikel secara singkat dan menarik.

ubah HTML Image Post No. dengan URL gambar artikel yang dimaksut.

4]. Tekan "crtl+F" pada keyboard untuk mencari kode "]]></b:skin>" lalu letakkan HTML berikut (berwarna merah + hijau) tepat di atas kode yang telah dicari barusan

/Accordion Featured Post Slider/      
#tbi_slider {       
    overflow: hidden;
    margin: 20px;
    padding: 0;       
    width: 620px;       
    height: 300px;       
-webkit-box-shadow: 5px 3.5px 10px 10px rgba(0, 0, 0, 0.35);       
    box-shadow: 5px 3.5px 10px 10px rgba(0, 0, 0, 0.35);       
}       
#tbi_slider ul {       
    margin: 0;       
    padding: 0;       
    width: 2000px;       
}       
#tbi_slider li {       
    position: relative;       
    display: block;       
    float: left;       
    width: 100px;       
    border-left: 1px solid #888;       
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);       
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);       
-webkit-transition: all 0.5s;       
-moz-transition: all 0.5s;       
-ms-transition: all 0.5s;       
-o-transition: all 0.5s;       
    transition: all 0.5s;       
}       
#tbi_slider ul:hover li {       
    width: 30px;       
}       
#tbi_slider ul li:hover {       
    width: 640px;       
}       
#tbi_slider li img {       
    display: block;       
    width: 550px;       
}       
#tbi_title {       
    position: absolute;       
    top: 0;       
    left: 0;       
    padding: 20px;       
    width: 640px;       
    background: rgba(0, 0, 0, 0.5);       
    color: #fff;       
    font: bold 16px 'trebuchet MS', sans-serif;       
}       
#tbi_title a {       
    display: block;       
    color: #fff;       
    text-decoration: none;       
}       
/Accordion Featured Post Slider/

*keterangan :

ganti yang berwarna hijau dengan angka yang lain untuk menyesuaikan lebar dan panjang dari template blogger anda.

5]. Cara terakhir adalah jangan lupa untuk menyimpannya sebelum Tab Broswer / Mozila anda di Close.

Terima Kasih telah berkunjung ke

♫February Blogger♫

Pengunjung yang baik adalah pengunjung yang meninggalkan jejak pada komentar artikel. Apabila anda merasa kesulitan, silakan tinggalkan komentar juga atau klik disini.