Widget Accordion Featured Post Slider Keren Dengan CSS3

Widget Accordion Featured Post Slider Keren Dengan CSS3 - Alhamdulillah saya bisa posting kembali, kali ini saya akan share cara membuat "Widget Accordion Featured Post Slider Keren Dengan CSS3" yang saya dapatkan di blog tetangga, karna saya sedikit tertarik degan salah satu postingnya dengan kode CSS ini kita bisa membuat slider keren atau widget accordion.

Widget Accordion Featured Post Slider 

Nah gambar diatas merupakan gambaran dari slider accordian yang sekarang akan kita bahas,

Klik Demo Untuk meliahat slider diatas

DEMO

Berikut Tutorialnya

1. Seperti biasa login terlebih dahulu ke blogger shobat
2. Pilih Rancangan/Template =>> Edit HTML
3. Cari kode <div id='main-wrapper'> atau bisa klik CTRL+F untuk mempercepat pencarian.
4. tambahkan kode HTML berikut diatas <div id='main-wrapper'>

<!-- Accordion Featured Post Slider @riefzkios.blogspot.com -->      
<b:if cond='data:blog.url == data:blog.homepageUrl'>      
<div id="tbi_slider">      
<ul>      
<li>      
<div id="tbi_title">      
<a href="POST LINK">TITLE</a>      
</div>      
<a href="POST LINK">      
<img src="IMAGE LINK "/>      
</a>      
</li>      
<li>      
<div id="tbi_title">      
<a href="POST LINK">TITLE</a>      
</div>      
<a href="POST LINK">      
<img src="IMAGE LINK "/>      
</a>      
</li>      
<li>      
<div id="tbi_title">      
<a href="POST LINK">TITLE</a>      
</div>      
<a href="POST LINK">      
<img src="IMAGE LINK "/>      
</a>      
</li>      
<li>      
<div id="tbi_title">      
<a href="POST LINK">TITLE</a>      
</div>      
<a href="POST LINK">      
<img src="IMAGE LINK "/>      
</a>      
</li>      
<li>      
<div id="tbi_title">      
<a href="POST LINK">TITLE</a>      
</div>      
<a href="POST LINK">      
<img src="IMAGE LINK "/>      
</a>      
</li>      
</ul>      
</div>      
</b:if>      
<!-- Accordion Featured Post Slider @riefzkios.blogspot.com -->

Keterangan :

1. Post Link ganti dengan Post link shobat.
2. Title Ganti dengan judul posting shobat.
3. Image Link Ganti dengan URL gambar postingan shobat.

5. Langkah selanjutnya shobat tambahkan kembali kode CSS berikut tepat di atas ]]></b:skin>

/* Accordion Featured Post Slider @ riefzkios.blogspot.com */      
#tbi_slider {        
    overflow: hidden;        
    margin: 20px auto;        
    padding: 0;        
    width: 805px;        
    height: 320px;        
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);        
    box-shadow: 0 0 10px 1px 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: 160px;        
    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: 40px;        
}        
#tbi_slider ul li:hover {        
    width: 640px;        
}        
#tbi_slider li img {        
    display: block;        
    width: 640px;        
}        
#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 @ riefzkios.blogspot.com */

6. Langkah terakhir Save template shobat dan lihat hasilnya.
Demikian saya share, Widget Accordion Featured Post Slider Keren Dengan CSS3, semoga bermanfaat.