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
- Seperti biasa login ke akun blogger >> Template >> Edit HTML >> Proceed
- Cari kode <div id='main-wrapper'>
- 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 -->
<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.
/* 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 */
#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
0 Response to "Cara membuat Slide Accordion Dengan CSS3"
Post a Comment