Xivanki Share !!: Cara membuat Slide Accordion Dengan CSS3

Cara membuat Slide Accordion Dengan CSS3 - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara membuat Slide Accordion Dengan CSS3 !! Semoga tulisan dengan kategori Slide !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara membuat Slide Accordion Dengan CSS3 ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Cara membuat Slide Accordion Dengan CSS3 - Menu slide yang satu ini dijamin super keren sob, selain untuk menampilkan menu blog sobat, slide ini juga bisa untuk menampilkan produk-produk yang sedang sobat promokan.

Slider ini tidak memiliki masalah kompatibilitas jika kita mengesampingkan IE. Widget ini bekerja sempurna dihampir semua browser lainnya.

Berikut daftar browser yang mendukung:
1. Chrome: v4 dan diatasx
2. Firefox: v4 dan diatasx
3. Safari: v3 dan diatasx
4. Opera v10.5 dan diatasx
5. IE: v10 dan diatasx

Baiklah cukup untuk penjelasan, sekarang melangkah pada tutorial menambahkan Slide Accordion Dengan CSS3 ke blog sobat

1. Seperti biasa login ke akun blogger  >> Template >> Edit HTML >> Proceed
2. Cari kode <div id='main-wrapper'>
3. Setelah dapat tambahkan kode HTML berikut diatas kode no 2 tadi

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

Catatan:

• Ganti TITLE dengan judul posts (Buat Pendek Saja)
• Ganti POST LINK dengan link postingan anda
• Ganti IMAGE LINK dengan link gambar anda. 

4. Setelah menambahkan Kode HTML sekarang tambahkan kode CSS berikut diatas kode ]]></b:skin>

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

Tidak ada yang perlu diganti pada bagian ini.

5. Silahkan simpan template dan lihat hasilnya .

Source