✔ Menciptakan Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya perihal membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial menciptakan image slider yang sudah beredar di internet, dari beberapa perkara yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya menunjukkan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider ibarat gambar dibawah, kalau anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda sanggup modifikasi sendiri sesuai selera.

DEMO

Di blog demo ada slider image Carousel otomatis, kalau Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
2. Pilih blog yang ingin anda tambahkan slider image ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga semoga tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Langkah berikutnya, letakkan arahan berikut ini diatas arahan ]]></b:skin> :
   Tulisan warna biru diatas yaitu panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
   
6. Masih pada posisi Edit HTML, masukkan arahan berikut ini diatas arahan </head> :
   Keterangan :
   
   Kode script warna merah (paling atas) yaitu arahan script jQuery.min.js seri terbaru yang saya gunakan untuk menciptakan slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, arahan warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau sanggup versi yang terbaru.
   Warna biru : Jumlah post yang ditampilkan dalam slider
   Warna hijau : Panjang dan lebar image besar
   Warna merah tua : Panjang dan lebar image kecil
7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan arahan ini pada kotak HTML/Javascript :
   Keterangan :
   
   Perhatikan goresan pena warna biru diatas, itu yaitu label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah yaitu keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti arahan (ada dua ganti semua) :
   

   script src=\"/feeds/posts/default/-/sport?max-results

   dengan arahan berikut :
   

   script src=\"/feeds/posts/default?max-results

8. Jika anda ingin meletakkannya pribadi pada template, anda sanggup letakkan arahan nomer 7 dibawah arahan <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibentuk dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan arahan berikut diatas ]]></b:skin>
   view plainprint?

   1. /* Slide Content 
   2. ----------------------------------------------- */  
   3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  
   4. word-wrap: break-word; overflow: hidden;}   
   5. .slide {color: #666666;line-height: 1.3em;}  
   6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
   7. .slide li {margin:0;padding-top:0;  
   8. padding-right:0;padding-bottom:.25em;  
   9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
   10. .slide .widget {margin:0px 0px 6px 0px;}  
9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari arahan <div id='main-wrapper'> kemudian letakkan arahan berikut dibawahnya :
   view plainprint?

   1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
   2.       <div id='slide-wrapper'>  
   3. <b:section class='slide' id='slide' preferred='yes'/>  
   4.       </div>  
   5. </b:if>   
   

Jika diperhatikan arahan script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda sanggup menyimpan kode-kode yang terlalu panjang tersebut di kawasan penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua sanggup menciptakan sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Membuat Content Slider Image Otomatis

Sumber http://x-wahz.blogspot.com/

Share this post

Berlangganan update artikel terbaru via email: