Widget Accordion Featured Post Slider Keren Dengan CSS3
Menampilkan Featured posts slider pada blog
adalah salah satu cara yang bagus untuk mempromosikan artikel terbaik
anda. Mungkin anda telah memiliki widget featured posts diblog anda atau
paling tidak pernah menemukan berbagai style dari widget featured posts
slider selama menjelajahi dumay, tetapi banyak dari style widget ini,
bahkan 98% diiantaranya akan menggunakan beberapa JavaScript atau JQuery untuk menghasilkan efek slide atau animasi. Alhamdulillah, syukurnya dengan pengenalan CSS3kita bisa mendapatkan semua efek tersebut tanpa menggunakan JavaScript apapun atau JQuery yang berarti bisa mempercepat loading blog kita. Pada kesempatan kali ini insyaAllah saya akan mempresentasekan gaya accordian featured posts slider yang dibuat murni menggunakan CSS. Slider ini memiliki efek slide yang halus bertenaga CSS3 transisi. Konsep efeknya agak mirip dengan efek hover dari widget follow us sexy social buttons yang baru saja saya share kemarin. Dalam slider ini gambar akan diperluas untuk lebar tertentu. Silahkan lihat demo untuk mendapatkan ide yang jelas dari widget menakjubkan ini.
Tekan Tombol "View Demo"
Nah jika efek yang hanya mungkin dicapai menggunakan Script dapat dibuat murni dengan CSS, tanpa JavaScript, No JQuery maka mengapa menggunakan JS atau JQuery. Widget ini juga 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 widget featured posts slider pure CSS3 ini ke blog anda.Cara Menambahkan Widget Ini Ke Blog
- Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
- Klik Ctrl+F Kemudian 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 -->
Kustomisasi
- Ganti TITLE dengan judul posts (Buat Pendek Saja)
- Ganti POST LINK dengan link postingan anda
- Ganti IMAGE LINK dengan link gambar anda.
- 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.
- Silahkan simpan template dan lihat hasilnya diblog anda.
0 komentar:
Posting Komentar