Cara Membuat Automatic Featured Posts Slider Dengan JQuery

on

Cara Membuat Automatic Featured Posts Slider Dengan JQuery

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

Automatic Featured Post Slider BloggerAlhamdulillah kembali lagi dengan tutorial membuat featured posts slider dengan JQuery, sebelumnya telah ada 7 tutorial membuat featured posts slider yang sudah saya posting diblog ini, fetured posts slider yang akan kita buat kali ini berbeda dengan pendahulu-pendahulu sebelumnya, kalau versi sebelumnya kita harus menambahkan images, link dan deskripsi posts secara manual maka featured posts slider kali ini akan otomatis mendekteksi recent posts blog ( postingan atau artikel terbaru blog ) bedasarkan label. Tentunya untuk bisa berfungsi seperti yang telah disebutkan tadi maka script yang digunakan selain script JQuery juga menggunakan script modifikasi dari recent posts.
Tampilan dari featured posts slider ini seperti screenshoot diatas. Sebelum mencoba tutorial ini anda bisa melihat live demonya dulu dengan menekan tombol berikut:
View Demo
 
Nah jika anda tertarik untuk membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:
  1. Silahkan login ke akun blogger anda
  2. Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
  3. Cari kode ]]>
dan letakkan kode CSS berikut sebelum kode ]]>
#featured{margin:0;padding:10px 10px 0}
.sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}
.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
.pagination{text-align:right;padding:15px 0 10px}
.pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}
.pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}
.featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{font-size:12px;line-height:1;margin:0}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
Catatan: Kode CSS diatas masih dapat anda modifikasi kembali, seperti merubah lebar featured posts, ukuran font ataupun warna agar sesuai dengan desain blog anda. Untuk referensi kode warna silahkan gunakan tool tabel kode warna disini
4. Kemudian letakkan script JQuery berikut diatas kode

/* Script from:http://www.tipstrikblogging.com/ */
Catatan: Tulisan berwarna biru diatas adalah jumlah posting yang akan ditampilkan dan label yang dipilih anda sesuaikan dengan label pada blog anda!
6. Tambahkan pula script berikut diatas kode

7. Langkah terakhir, tambahkan kode HTML berikut diatas
jika anda ingin meletakkannya diatas kolom posting atau diatas






8. Selesai dan lihat hasilnya diblog anda!
Demikian tutorial cara membuat featured posts slider otomatis pada blog, semoga bermanfaat.
Anda bisa melihat tutorial membuat featured posts slider lainnya pada blog ini dengan label featured posts slider.

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

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

Comments

Post a Comment