40 Widget Accordion Featured Post Slider Keren Dengan CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Featured Posts Slider CSS3Menampilkan 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 CSS3
kita 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.
Sekali lagi, widget featured posts slider ini menggunakan CSS3 transisi. Semoga anada menyukai widget ini dan bisa membantu anda untuk mempromosikan artikel atau postingan terbaik anda. Jika ada kesulitan atau perlu bantuan dan pertanyaan seputar widget ini silahkan gunakan komentar dibawah ini. Terimakasih tuk apresiasi anda.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

40 komentar :

  1. Sangat menarik untuk dicoba
    saya simpem saja dulu ya mbak...

    BalasHapus
    Balasan
    1. Silahkan disimpan jangan lupa tuk mencoba ya, dan terimaksh ats apresiasi Angel. Di profil g+1 Angel knpa tdk mncantumkan tautan ke link blognya? Biar anaa bisa kunjunng balik dan memberikan apresiasi serupa.

      Hapus
  2. nice post
    visit @ mumuushop.blogspot.com

    BalasHapus
    Balasan
    1. Thanks tuk kunjungan dan apresiasi anda.

      Hapus
  3. Slidenya bagus. Mau coba yang ini, tapi punya saya tidak ada id='main-wrapper'
    yang ada hanya : class='main-wrapper'
    bagaimana solusinya. Terima kasih

    BalasHapus
    Balasan
    1. Silahkan dicoba, untuk kode diats sama saja, penamaan selector CSS pd template mmg trgantung designrx.
      Terimaksh tuk apresiasinya.

      Hapus
  4. Woooow
    patut Untuk di Coba
    Izin \Coba ya Sob

    #komentar Balik and Follow me ya.........|!!!!
    saya akan follow back

    #http://cheaterzobat.blogspot.com/

    BalasHapus
    Balasan
    1. Silahkan dicoba. Terimaksh apresiasinya.

      Sebenarnya meski tdk blg atau psn kunjung balik, komentar balik hampir smua yg mmberikn apresiasi diblog ini anaa beri apresiasi serupa. Jgn diulang komentar pakai embel2 gtu lg ya! :P

      Hapus
  5. Berkunjung kembali... Wah, pasti jadi bagus nih blog dipasang widget tersebut.
    Oya, program yg saya ikuti sudah saya review, silakan saja disimak.

    #Happy blogging#

    BalasHapus
    Balasan
    1. Terimaksh tuk kunjungan dan apresiasinya.

      Hapus
  6. Dari demonya aja keren banget widgetnya.
    Thanks sharingnya gan

    BalasHapus
    Balasan
    1. Sama-sama. Thanks jg tuk apresiasinya.

      Hapus
  7. Wah mangstap gan, idenya pake overflow, width, ama hover ya gan, ok bisa jadi inpsirasi buat saya lah gan :D

    BalasHapus
    Balasan
    1. Alhamdulillah jika anda suka dgn idex dan bs jd inspirasi. Terimaksh kunjungan dan apresiasinya.

      Hapus
  8. Demonya sangat menarik sekali. Gambar tampak keren sekali.

    BalasHapus
    Balasan
    1. Benar sekali, silahkan dicoba dan terimaksh tuk kunjungan dan apresiasinya.

      Hapus
  9. wah mantep ini sob, slider soalnya, hehehe :D

    BalasHapus
    Balasan
    1. Iya, kami sll suka dgn efek slider apalg jika ckp dgn tenaga CSS3 shingga loading blog ttp cpt. Terimaksh tuk kunjungan dan apresiasi anda.

      Hapus
  10. asiikkk :D dapet tempat tonkrongan baru nih :D

    saya bookmark dulu ya blognya :D

    BalasHapus
    Balasan
    1. Silahkan, dgn senang hati. Terimaksh ats apresiasi terbaik anda.

      Hapus
  11. maksudnya link gambar anda sih gmna mba?
    #maklum msih pemula

    BalasHapus
    Balasan
    1. link gambar maksudnya alamat gambar anda,
      misalnya alamat gambar avatar anda adalah
      http://1.bp.blogspot.com/-hLGJGYZVI7w/TxaU1hY2-qI/AAAAAAAAAFY/0XLxRD6FD10/s45/Foto0755.jpg

      Hapus
  12. Ijin copy dan mencoba di pasang di http://joogjacircles.blogspot.com

    Salam hangat dari sahabat jogja

    BalasHapus
    Balasan
    1. Silahkan. Slm kmbli dr shbt blogger mksr.

      Hapus
  13. Saya sdh lihat demox, keren.

    BalasHapus
  14. wah keren memang pengaruh ngak ma loading blog habis blogku dah berat banyak widgetnya

    BalasHapus
    Balasan
    1. Klu dasar blogx dah brat ya pastix nambah loading lg dgn adax pnambahan widget br. Tapi accordian horizontal ini murni brtenaga CSS3 tnpa JavaScript jd tdk brat mnurutku. Silahkan coba dan cek aja hslx! Trimaksh apresiasix.

      Hapus
  15. Saya Pernah Memakai Widget ini, Tapi dasarnya terlalu berat. Thankx

    BalasHapus
  16. udah saya coba...tpi kenapa ya widget sebelah kanan gak ikut turun ototmatis dibawah Widget Accordion Featured Post Slider Keren Dengan CSS3 seperti widget yang sebelah kiri....gimana ya caranya supaya widget sebelah kanan juga ikut turun seperti widget sebelah kiri...

    BalasHapus
  17. Syukran kak ya untuk tutor slider ininya. Alhamdulillah success

    BalasHapus
  18. wow keren :D kapan2 pake deh :D

    http://nandarious.blogspot.com

    BalasHapus
  19. nambahin widgetnya bisa ga kalo di add widget>>html/javascript..??

    BalasHapus
  20. Waah makasih banget broo, berhasil (f)
    http://nafhann.blogspot.com

    BalasHapus
  21. weh udah ku coba,,,, keren ,,, makasi ya,, :>) :>) :>) :>) :>) :>)

    BalasHapus
  22. Salam admin, terimakasih banyak infonya! mapir ya.
    http://bit.ly/suksesemuda

    BalasHapus
  23. ane nyari kode div id='main-wrapper' di edit html blog ane kok gak ada ya? :-? ane pakai template standar blogger yang putih
    tapi pas ane nyoba pasang kode html di widget add html / javascript, eh malah bisa :)
    trus pasang css nya.... lancar
    :d kalau misal fungsi slider ini dibuat untuk postingan-postingan terbaru secara otomatis kyknya mantap tuh :)

    makasih sebelumnya untuk widget yang bermanfaat ini.

    sukses selalu untuk blog ini.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!