Dengan meletakkan slider atau slideshow foto di halaman awal tentu saja ini akan menarik perhatian dari pengunjung dari web maupun blog tersebut, oleh karena itu sudah banyak dapat ditemukan bahwa dewasa ini banyak sekali baik itu blog maupun website yang menggunakan slideshow foto sebagai pelengkap dari konten website maupun blog mereka.
Dalam ulasan kali ini saya secara singkat akan memberikan sebuah tips sederhana tentang bagaimana memasang sebuah slideshow atau foto slider pada platform Blogger. Secara garis besar cara ini pun sebenarnya bisa kawan-kawan sekalian terapkan pada platform website self hosted, tinggal mekanismenya saja yang perlu di rubah sedikit. Namun untuk kali ini sayan akan mencontohkan bagaimana cara untuk memasang slideshow di blogspot.
1. Silahkan langsung saja menuju laman Edit/HTML
2. Silahkan kamu cari kode ]]></b:skin>
3. Paste kode di bawah ini di atas kode nomor 2 tadi
/* Start Slider Code From http://www.thesigit.net/ */
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 From http://www.thesigit.net/ */
4. Silahkan kamu cari kode </head> dan paste kode dibawah ini tepat di atasnya
<!-- Start Slider Code From http://www.thesigit.net/ -->
<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 From http://www.thesigit.net/ -->
5. Save template6. Silahkan pergi ke menu Tata letak dan tambahkan satu widget HTML/Javascript dan letakkan kode dibawah ini didalam kotak widget tersebut.
<div id="my-slideshow"> <ul class="bjqs"> <li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQn3ShuvOLD0UK5Axn3xbK_6NMcARlvFCfoYUhDVpuhwpxTS8PnHflG4qmNhBBcrNKKfg0r_Ry_wLiij-04UNUPV5b2NB5gcaNhteiZzk3UEdbAqXnSkO78vYUnDp3jTHKQy2Kzd1HHmu/s1600/slider-image1.jpg"/></li> <li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NKitBAFzu2NHFBopN699QZVg_8b36vv-GeKVMBnj7xVMn6fx35Ih969Ile2HeQ2MstfatQ4kMHn4hcGQvEhrjP3_sVS-Z7LGZHlmyw2X9s_8VnHntBk55BOxSbcFxrPzQ3zdO7Be-2g1/s1600/slider-image2.jpg"/></li> <li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7GcBsyyq1LIYDZGqkbUlHtLcD0JHcDMAt2BkjoL9VXKV7WZuptRwvqzqKWTw9zjuGuqUNjlSsoIriUHa2L8IAagH7VWY0tjNx92G_Fy-nZlBR3u8wz0QnChi7z3mqZMESCmUfdgAT3wZc/s1600/slider-image-3.jpg"/></li> <li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6o_aHgDzAqAhH0yFH1_FwHcASeM50sz9OsFdgkyeF7HTaUldCRvM8hMPCou59CSbnl70eYnYnwuGcckLCfV-Xv-3wMGBtoWBJzKMpyQoBcEAHGH96_zy8DgDOC7DCzAf4GuOpChojoLc/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/AVvXsEjXyJXmo4miMqmgKIIiC0B_vsV3-bn2Uyzp4SNvomT4rtHZRkY19fETm3xvK2FwLhXJsbsv0tYUeZp8lYaDLQ2rs_XbCkWewm6C2dOZ-Oyiftkwjid6BZY98M-Wwf25Ux90GrcHhfz3w9kX/s1600/slider-image5.jpg"/></li> </ul> </div>Setelah semua step di atas kamu lakukan, silahkan kamu lihat hasilnya. Untuk merubah ukuran serta mengatur tombol next dan lainnya, opsi tersebut dapat dengan mudah kamu rubah pada kode berikut yang sebelumnya kamu letakkan di atas </head> tadi.
'width' : 940,
'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
P.S : sebagai contoh, diatas kita masih menggunakan basic-jquery-slider.min.js yang di hosted di tempat lain, sebagai antisipasi dibawah ini saya sertakan source dari basic-jquery-slider.min.js tersebut apabila sewaktu-waktu source diatas sudah down atau tidak dapat diakses lagi kalian masih bisa tetap menggunakannya dengan menghosted file Javascript tersebut sendiri.
(function(a){a.fn.bjqs=function(b){var c={},d={width:700,height:300,animation:"fade",animationDuration:450,automatic:true,rotationSpeed:4e3,hoverPause:true,showControls:true,centerControls:true,nextText:"Next",prevText:"Prev",showMarkers:true,centerMarkers:true,keyboardNav:true,useCaptions:true},e=this,f=e.find(".bjqs"),g=f.children("li"),h=g.length,i=false,j=false,k=0,l=1,m=0,n=g.eq(k),o="forward",p="backward";c=a.extend({},d,b);g.css({height:c.height,width:c.width});f.css({height:c.height,width:c.width});e.css({height:c.height,width:c.width});g.addClass("bjqs-slide");if(c.showControls&&h>1){var q=a('<ul class="bjqs-controls"></ul>'),r=a('<li><a href="#" class="bjqs-next" class="controls">'+c.nextText+"</a></li>"),s=a('<li><a href="#" class="bjqs-prev" class="controls">'+c.prevText+"</a></li>");r.click(function(a){a.preventDefault();if(!i){A(o,false)}});s.click(function(a){a.preventDefault();if(!i){A(p,false)}});r.appendTo(q);s.appendTo(q);q.appendTo(e);if(c.centerControls){var t=r.children("a"),u=(e.height()-t.height())/2;r.children("a").css("top",u).show();s.children("a").css("top",u).show()}}if(c.showMarkers&&h>1){var v=a('<ol class="bjqs-markers"></ol>'),w,x,u;a.each(g,function(b,d){if(c.animType==="slide"){if(b!==0&&b!==h-1){w=a('<li><a href="#">'+b+"</a></li>")}}else{b++;w=a('<li><a href="#">'+b+"</a></li>")}w.click(function(c){c.preventDefault();if(!a(this).hasClass("active-marker")&&!i){A(false,b)}});w.appendTo(v)});x=v.children("li");x.eq(k).addClass("active-marker");v.appendTo(e);if(c.centerMarkers){u=(c.width-v.width())/2;v.css("left",u)}}if(c.keyboardNav&&h>1){a(document).keyup(function(a){if(!j){clearInterval(z);j=true}if(!i){if(a.keyCode===39){a.preventDefault();A(o,false)}else if(a.keyCode===37){a.preventDefault();A(p,false)}}if(j&c.automatic){z=setInterval(function(){A(o)},c.rotationSpeed);j=false}})}if(c.useCaptions){a.each(g,function(b,c){var d=a(c);var e=d.children("img:first-child");var f=e.attr("title");if(f){var g=a('<p class="bjqs-caption">'+f+"</p>");g.appendTo(d)}})}if(c.hoverPause&&c.automatic){e.hover(function(){if(!j){clearInterval(z);j=true}},function(){if(j){z=setInterval(function(){A(o)},c.rotationSpeed);j=false}})}if(c.animation==="slide"&&h>1){$first=g.eq(0);$last=g.eq(h-1);$first.clone().addClass("clone").removeClass("slide").appendTo(f);$last.clone().addClass("clone").removeClass("slide").prependTo(f);g=f.children("li");h=g.length;$wrapper=a('<div class="bjqs-wrapper"></div>').css({width:c.width,height:c.height,overflow:"hidden",position:"relative"});f.css({width:c.width*h,left:-c.width});g.css({"float":"left",position:"relative",display:"list-item"});$wrapper.prependTo(e);f.appendTo($wrapper)}var y=function(a){if(c.animation==="fade"){if(a===o){!n.next().length?m=0:m++}else if(a===p){!n.prev().length?m=h-1:m--}}if(c.animation==="slide"){if(a===o){m=l+1}if(a===p){m=l-1}}return m};if(c.automatic&&h>1){var z=setInterval(function(){A(o,false)},c.rotationSpeed)}g.eq(k).show();f.show();var A=function(a,b){if(!i){if(a){m=y(a)}else if(b&&c.animation==="fade"){m=b-1}else{m=b}i=true;if(c.animation==="fade"){if(c.showMarkers){x.eq(k).removeClass("active-marker");x.eq(m).addClass("active-marker")}r=g.eq(m);n.fadeOut(c.animationDuration);r.fadeIn(c.animationDuration,function(){n.hide();k=m;n=r;i=false})}else if(c.animation==="slide"){if(c.showMarkers){x.eq(l-1).removeClass("active-marker");if(m===h-1){x.eq(0).addClass("active-marker")}else if(m===0){x.eq(h-3).addClass("active-marker")}else{x.eq(m-1).addClass("active-marker")}}f.animate({left:-m*c.width},c.animationDuration,function(){if(m===0){l=h-2;f.css({left:-l*c.width})}else if(m===h-1){l=1;f.css({left:-c.width})}else{l=m}i=false})}}};return this}})(jQuery)
Semoga ulasan saya kali ini dapat berguna dan bermanfaat bagi teman-teman sekalian yang membutuhkannya. Bagi teman-teman yang masih bingung dan menemui kesulitan dalam memahami artikel ini silahkan diskusikan dengan saya melalui kotak komentar yang ada dibawah ini.
→ Komentar yang menyertakan link aktif, iklan atau titip link akan dimasukan ke folder SPAM
→ Gunakan kode ini utk Emoticon (tanpa ♦)
:) ♦ :( ♦ ;) ♦ :p ♦ =( ♦ ^_^ ♦ :D ♦ =D ♦ |o| ♦ @@ ♦ :-bd ♦ :-d ♦ :ngakak: ♦ :lol: ♦ :love: