Membuat Slideshow gambar pada halaman blogger anda

Jika anda melihat halaman utama blog saya anda akan melihat gambar slideshow yang cukup atraktif bukan? Sebenarnya itu bukan sekedar pajangan kawan. Sebenarnya saya bermaksud untuk membuatnya sebuah link - link yang penting dan wajib dibaca oleh para pengunjung. Anda sebenarnya bisa memanfaatkannya sebagai space iklan juga.

Membuat slideshow gambar pada blogger bukanlah hal yang sangat sulit di kerjakan, anda bisa membuatnya dengan cukup mudah. Bagi anda yang masih newbie saya akan membuatnya mudah untuk anda mengerti.

Ikuti langkah membuat slideshow gambar

Langkah 1. Masuk ke dashboard blogger -> template -> edit template

Langkah 2. Klik dimana saja dalam form edit html dan cari kode ]]</b:skin>, anda bisa tekan CTRL+F lalu ketikkan kode tersebut

 ]]</b:skin> <br>

Langkah 3. Copy paste kode dibawah ini tepat diatas kode ]]</b:skin>


/* Start Slider Code From http://afrilynote.blogspot.com/ */ ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;} li.bjqs-slide{display:none;position:absolute;} ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;} ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;} ol.bjqs-markers li{float:left;} p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;} } /* End Slider Code */ 

Langkah 4. Cari kode </head> dalam form edit html anda

]]</head> <br />

Langkah 5. copy dan paste kode dibawah ini tepat diatas </head>


<!-- Start Slider Code From http://afrilynote.blogspot.com/ --> <script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $('#my-slideshow').bjqs({ 'width' : 940, 'height' : 340, 'showMarkers' : true, 'showControls' : true, 'centerMarkers' : false }); }); </script> <!-- End Slider Code -->

note : penting! kode diatas adalah script jQuery. Kalau anda telah menambahkan link jquery sebelumnya, hapus kode berikut <script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> dari kode diatas.

Anda bisa merubah seting tinggi dan lebar sesuai dengan template anda dengan mengganti height dan weight kode diatas.

Anda juga dapat menghilangkan nomor halaman gambar dan tombol kontrol dengan merubah "true" menjadi "false"

Langkah 6. Simpan template anda.

Langkah 7. Menambahkan slideshow pada bawah header anda

- Masuk pada tata letak/ layout dan klik add a gadget yang berada dibawah header

- Klik add HTML/ Javascript lalu copy paste kode dibawah ini kedalamnya

<div id="my-slideshow"> <ul class="bjqs"> <li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-XoVa8usm1xm9aoOY3yDvY5vnBRRxxtr09vYYaQ0xILCg1utrpq8sFCYsiinyJwH3BsRneDp7LtsXD_vPO7yP_6Qk8YrGjID89asN3RUEPo3cUGza2Y_4JV0dlLl6u6iB6M0TXTnn2aS/s1600/slider-image1.jpg"/></li> <li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo95We3pOUvUd2pxTJCUdVF4GDihuG42pj50_wcSyXHoBkZAU6z-wDKZyaSln6x0RnwWQpdyqakaODorTwgMWu_y46KSAizN6KsEgnqlDbDB2Nx3GC2CMz5P_RJKOuZ1zKIopP6RfDhv_o/s1600/slider-image2.jpg"/></li> <li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqMv4M2Ri8-KwiEhKNHmwcARWwuTPrFSTRWUgMYRDre8LrHOufCzniPW8DOkVDb799G9meaDDRwsN4uileTEAwqSrWbXo1m7QMguHcVEWXDmrJyDyA9nb-ElWN9tHzd15aKD-Y11zOdVM/s1600/slider-image-3.jpg"/></li> <li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVuCX2LqBirUNOaVkO7BUp0ao0mkzUz9NOwNEVVcrwxpR5NQys8ZA0Soal-jGdBW4kLXgLhqyaHSztaekFNnWRrOcPAaFkdJW0okDpmAqM7j41sA6WSOQKU5V6xGlRwG3EuK_P8gySLEcD/s1600/slider-image4.jpg"/></li> <li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0wEkT9PHMmY7j3gbL80VQK6LWMeFMYhBJzKdhIpi3yDWg0DhmKRuA8rgt30VtriD1uXSxqUKMXphbwfCB2_cc3ePcT1L8JFZroIf-Rt0dz2Gxpz4cZZUhhNshcJi1jn2Pvq9JBwykZEM-/s1600/slider-image5.jpg"/></li> </ul> </div>


Ganti link gambar dengan gambar yang anda ingin tampilkan, berikan link halaman yang ingin anda rujuk pada setiap gambar.

selamat berexperimen!.. cheers.