Cara Memasang Gambar Slider Otomatis di Blogger Cara Memasang Gambar Slider Otomatis di Blogger
Cara Memasang Featured Post Content Easy Slider (Image) Otomatis di Blogger.

GAMBAR Slider dan sejenisnya --Carousel, Animasi (Gambar Bergerak)-- tidak dianjurkan dipasang di website atau blog. "Slider's suck!" kata sebagian desainer web.

Pasalnya, slider bukan hanya memberatkan loading blog, tapi juga menciptakan pengunjung tidak nyaman, alasannya slider menyilaukan mata atau menciptakan pusing pengunjung.

Studi NN Group bahkan menyebutkan hanya 1% pengunjung yang nge-klik slider atau posting plus gambar bergerak di halaman depan website/blog.

Namun demikian, tetap saja ada (banyak) blogger yang ingin memasang slider ini di blognya dengan alasan "keindahan". Demonya menyerupai ilustrasi gambar di posting ini.

Berikut ini referensi pemasangan instruksi untuk menciptakan gambar slider otomatis di blogger. Saran CB sih, kalau Anda memasangnya, matikan autoplay-nya semoga slidernya tidak mengganggu atau menyilaukan mata pengunjung blog Anda.

Cara Memasang Gambar Slider Otomatis di Blogger

KODE HTML
Pasang di bawah kode <div id='main-wrapper'>


<div id="slider">
<script style="text/javascript">
var numposts_gal = 10;
var numchars_gal = 150;
var random_posts = false;
</script>
<script src="/feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Catatan:
Kode di atas menampilkan posting dengan label Featured di Slider. Pastikan postingan yang akan ditampilkan ditambah label Featured. Jika ingin menampilkan posting terbaru, ubah kodenya menjadi: /feeds/posts/default?

KODE CSS:
Pasang di atas kode ]]></b:skin>

#slide-container {
width:410px;
height:320px;
position:relative;
}
#slider {
width:410px;
height:320px;
left:1px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(http://lh3.googleusercontent.com/-jDLwXJiGntk/T29pYcTKb9I/AAAAAAAACUQ/gf-AfWqrTzY/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#ff6;
font-size:17px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:410px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:1px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:461px !important;
}
#prevBtn, #nextBtn {
display:block;
left:406px;
position:absolute;
top:370px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://lh5.googleusercontent.com/-KX-r8BDixK4/T6H3kNMb2QI/AAAAAAAACdM/mOwubqm7O8c/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(http://lh6.googleusercontent.com/-tqzRTNYmZk0/T6H4U6ZNmcI/AAAAAAAACdU/MeTCxHfdXqc/s77/flecha-next.png) no-repeat 0 0;left: 336px;
}
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000;
background:#0B243B;
color:#fff;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
Catatan:
Kode width:410px; dan height:320px; ialah ukuran gambar. Sesuaikan dengan lebar template Anda.

KODE JAVASCRIPT
Pasang di atas instruksi </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);
$(document).ready(function(){
$("#slider").easySlider({
auto: false,
continuous: false,
numeric: false
});
});
//]]>
</script>

Save Template!

Sumber

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours