Widget CSS3 : Widget Accordion Featured Post Keren Untuk Blog

Sabila Network - Dikutip dari www.tipstrikblogging.com featured ini murni menggunakan CSS3, berbeda dengan menggunakan JavaScript atau JQuery yang membuat loading makin lama, tapi dengan css3 ini membuat kecepatan loading blog menjadi relatif lebih cepat. Slider ini memiliki efek slide yang halus bertenaga CSS3 transisi.

Dalam slider ini gambar akan diperluas untuk lebar tertentu. Silahkan cek di halaman pertama SabilaNetwork atau kunjungi blog ini untuk melihat demo dari widget tersebut.

Nah sudah melihat kan? sekarang mari kita coba pasang di blog anda.

• Pertama login ke akun blogger anda, masuk ke Template>Edit HTML
• Klik CTRL+F untuk mempermudah mencari kode <div id='main-wrapper'>
• Jika sudah menemukan kode tersebut , pastekan kode html dibawah ini di atas kode <div id='main-wrapper'>
• 
  

<!-- Accordion Featured Post Slider @Sabilanetwork.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 @Sabilanetwork.blogspot.com -->

*Keterangan Warna:
Untuk Warna Merah : Link post yang akan di tambilkan di featured post
Untuk Warna Biru : Judul post yang akan di tampilkan di featured post
Untuk Warna Hijau : Link Gambar yang akan di tampilkan di featured post

*Jika kalian tidak menemukan kode <div id='main-wrapper'> , seperti yang saya lakukan pada template blog saya, saya menempatkan widget ini dibawah </header>. Penempatan widget sesuaikan dengan kondisi template blog anda. Atau anda juga bisa mentempatkan di widget HTML/JavaScript.

Setelah anda menempatkan kode HTML di atas, sekarang memasukan kode CSS3 berikut di atas kode ]]></b:skin>

/* Accordion Featured Post Slider @ Sabilanetwork.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 @ Sabilanetwork.blogspot.com */

Setelah Selesai, Simpan template dan lihat hasilnya.

Fitur widget ini tidak otomatis ganti setelah kita membuat post baru, tapi harus menggantinya dengan manual. Semoga kalian menyukai widget yang saya bagikanini.