Tutorial Membuat Slide Show berdasarkan Kategori

      Tutorial Membuat Slide Show berdasarkan Kategori/Label - Cara Membuat Slideshow otomatis - Slideshow memang akan menjadi widget yang bisa memperindah layout template Anda. Pada posting sebelumnya, saya pernah membahas tengan cara membuat slideshow. Namun, slideshow yang dibuat menggunakan cara manual. Yaitu, kita memasukkan gambar dan deskripsi satu persatu.

Kali ini, kita akan membuat slideshow content yang dibuat berdasarkan kategori/label secara otomatis. Jadi nanti, Anda tinggal mengubah kategori untuk mengubah tampilan slide-nya. Untuk melihat DEMO nya klik di sini.

• Login ke blogger.
• Klik Design/Tata Letak --> Edit HTML --> centang "Expand Widget Templates"
• Backup dulu template anda dengan mengklik "Download Template Lengkap". Untuk berjaga-jaga bila terjadi error.
• Cari kode : ]]>

Letakkan kode berikut di atas kode ]]>

 #featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

• Masih dalam dalam posisi Edit HTML. Cari kode

Sekarang letakkan kode berikut ini di atas kode

1. Perhatikan kode yang di beri huruf tebal label1 = "berita". Itu adalah label atau kategori yang akan ditampilkan di slider, di sini dipilih label berita. Anda nanti tinggal mengganti dengan label yang diinginkan.
2. Perhatikan juga kode img width="370" height="240"  itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan  template Anda.

• Kemudian, cari kode

Letakkan kode di bawah ini sebelum kode

• Kemudian, cari kode
  , jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya  :

• Save/simpan template.

Yang perlu diperhatikan di sini adalah kode label1 = "berita". berita adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. 

Selamat mencoba. Semoga Manfaat ...




Sumber : Klik Disini