Tutorial berikut ini hampir sama dengan turorial sebelumnya mengenai cara memasang slider otomatis di blog bagian 1 dan cara memasang slider otomatis keren di blog bagian 2, hanya saja letak dari slidernya berbeda. Setelah jalan-jalan dari blog ke blog mencari slider yang ringan dan menarik yang memungkinkan untuk dipasang disidebar blog, akhirnya saya menemukan slider otomatis seperti di gambar di samping ini.
Membuat dan Memasang Slider Otomatis di Sidebar 1
Cara pertama adalah dengan memasangnya ke dalam tempate.Masuk ke template >> Edit HTML. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda. Kemudian copy kode dibawah ini dan letakan kode
.slider-rotator{width:270px;height:340px;border:1px solid #ccc;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#333;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{background:none}.slider-rotator .slider-item{position:absolute;padding:10px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}.slider-rotator img{display:block;border:none;outline:none;padding:0 0;margin:0 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;max-width:none;max-height:none}.slider-rotator h4{font:inherit;font-weight:bold;font-size:120%;text-transform:none;color:#3B4B7E;margin:10px 0 0}.slider-rotator h4 a{color:inherit;text-decoration:none}.slider-rotator h4 a:hover{color:#793B7E;text-decoration:underline}.slider-rotator p{margin:10px 0 0}slider-rotator-nav{text-align:center}.slider-rotator-nav a{display:inline;background-color:#333;color:white;padding:4px 8px;line-height:2.6em;margin:0 2px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#111}.slider-rotator-nav a.current{background-color:#3B4B7E}Kode berwarna merah diatas dapat disesuaikan dengan template anda. Langkah selanjutnya masukkan kode berikut ini diatas kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>Kode jquery yang berwarna merah tidak perlu diletakan jika sudah ada kode yang sama atau jquery versi berpapun, atau ganti saja kode jquery yang lama dengan jquery diatas.
//<![CDATA[
(function(a){a.fn.customRotator=function(c){c=a.extend({interval:6000,speed:1000,hoverPause:true,autoHeight:false,crossFade:false,autoSlide:true,hide:function(d){},show:function(d){}},c);var b=true;return this.each(function(){var k=a(this),e=k.children().hide(),d=k.next(),g=null,j=0,f=0;function h(){c.hide(f);d.find(".current").removeClass("current");b=false;if(e.eq(f).next().length){if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){a(this).next().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}f++})}else{e.eq(f).fadeOut(c.speed);e.eq(f).next().fadeIn(c.speed,function(){c.show(f);b=true;f++});if(c.autoHeight){k.stop().animate({height:e.eq(f+1).height()},c.speed/2)}}d.find(".rotator-num a").eq(f+1).addClass("current")}else{if(!c.crossFade){e.eq(f).fadeOut(c.speed,function(){f=0;e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}})}else{e.eq(f).fadeOut(c.speed);e.first().fadeIn(c.speed,function(){c.show(0);b=true;f=0});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}}d.find(".rotator-num a").first().addClass("current")}if(j==0&&c.autoSlide){g=setTimeout(h,c.interval)}}if(e.length>1){c.hide(f);e.first().fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(0).height()},c.speed/2)}if(c.hoverPause&&c.autoSlide){k.mouseenter(function(){clearTimeout(g);j=1}).mouseleave(function(){g=setTimeout(h,c.interval);j=0}).trigger("mouseleave")}else{g=(c.autoSlide)?setTimeout(h,c.interval):null}d.find(".rotator-num a").click(function(){if(b){b=false;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}f=a(this).index();a(this).parent().find(".current").removeClass("current");a(this).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false});d.find(".rotator-advancer a").click(function(){if(b){b=false;var l=this.hash.replace("#",""),i=e.length;if(c.autoSlide){clearTimeout(g);g=setTimeout(h,c.interval)}if(l=="next"){f=(f<i-1)?f+1:0}else{f=(f>0)?f-1:i-1}d.find(".current").removeClass("current");d.find(".rotator-num a").eq(f).addClass("current");c.hide(f);e.fadeOut(c.speed).eq(f).fadeIn(c.speed,function(){c.show(f);b=true});if(c.autoHeight){k.stop().animate({height:e.eq(f).height()},c.speed/2)}}return false})}})}})(jQuery);function makeSlider(a){var c={url:"http://www.dte.web.id",numPost:5,newTabLink:false,labelName:null,showDetail:true,summaryLength:60,titleLength:"auto",showThumb:true,thumbWidth:250,squareThumb:true,noThumb:"http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",showNav:true,navText:{prev:"<",next:">"},containerId:"slider-rotator",interval:6000,speed:1000,hoverPause:true,crossFade:false,autoHeight:false,autoSlide:true,onInit:function(){},onHide:function(d){},onShow:function(d){}};for(var b in c){c[b]=(typeof(a[b])!=="undefined")?a[b]:c[b]}$.get(c.url+"/feeds/posts/summary/"+(c.labelName===null?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?alt=json-in-script&max-results="+c.numPost,{},function(s){if(s.feed.entry!==undefined){var r=s.feed.entry,q,p,e,o,h="",d="";for(var m=0,n=r.length;m<n;m++){if(m==r.length){break}q=r[m].title.$t;e=("media$thumbnail" in r[m])?'<img alt="'+q+'" src="'+r[m].media$thumbnail.url.replace(/\/s72\-c/,"/s"+c.thumbWidth+(c.squareThumb?"-c":""))+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">':'<img src="'+c.noThumb+'" style="width:'+c.thumbWidth+"px;height:"+(c.squareThumb?c.thumbWidth+"px":"auto")+'">';o=("summary" in r[m]&&c.summaryLength>0)?r[m].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/[<>]/g,""):"";o=(c.summaryLength<o.length)?o.substring(0,c.summaryLength)+"…":o;for(var l=0,f=r[m].link.length;l<f;l++){p=(r[m].link[l].rel=="alternate")?r[m].link[l].href:"#"}h+='<div class="slider-item">';h+=(c.showThumb&&c.showDetail)?'<div class="image-wrapper">'+e+"</div>":(c.showThumb&&!c.showDetail)?'<div class="image-wrapper"><a href="'+p+'" title="'+q+'"'+(c.newTabLink?' target="_blank"':"")+">"+e+"</a></div>":"";h+=(c.showDetail)?'<div class="detail-wrapper"><h4><a title="'+q+'" href="'+p+'"'+(c.newTabLink?' target="_blank"':"")+">"+((c.titleLength=="auto")?q:q.substring(0,c.titleLength)+(q.length>c.titleLength?"…":""))+"</a></h4><p>"+o+"</p></div>":"";h+="</div>";$("#"+c.containerId).css({width:(c.showThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("width"),height:(!c.showDetail&&c.squareThumb)?c.thumbWidth+"px":$("#"+c.containerId).css("height")})}d='<div class="slider-rotator-nav"'+(c.showNav===false?' style="display:none;"':"")+">";d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#prev">'+c.navText.prev+"</a></span>":"";if(c.showNav===true||c.showNav=="number"){d+='<span class="rotator-num">';for(var g=0;g<c.numPost;g++){d+='<a href="#slide-'+g+'" class="'+(g===0?"current":"")+'">'+(g+1)+"</a>"}d+="</span>"}d+=(c.showNav===true||c.showNav=="next/prev")?'<span class="rotator-advancer"><a href="#next">'+c.navText.next+"</a></span>":"";d+="</div>";$("#"+c.containerId).html(h).after(d);c.onInit();$("#"+c.containerId).removeClass("loading").customRotator({interval:c.interval,speed:c.speed,autoHeight:c.autoHeight,hoverPause:c.hoverPause,crossFade:c.crossFade,autoSlide:c.autoSlide,hide:function(i){c.onHide(i)},show:function(i){c.onShow(i)}})}else{$("#"+c.containerId).removeClass("loading").css({width:"auto",height:"auto"}).html("Error or not found!")}},"jsonp")};
//]]>
</script>
Langkah ketiga cari kode
<div class='slider-rotator loading' id='slider-rotator'>
<script type='text/javascript'>
makeSlider({url: "http://www.seocips.com"});
</script>
</div>
Silahkan ganti kode warna biru diatas dengan url website sobat. untuk langkah ketiga jika sobat kesulitan mencari kode <div class='sidebar-wrapper'> silahkan letakan saja secara manual di wedget sidebar saudara dengan cara Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode pada langkah ketiga diatas. Simpan template dan lihat hasilnya.
Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode HTML/JavaScript dibawah ini.
Cara memasang Slider 2
Cara yang kedua adalah langsung menambahkannya sebagai widget. Jika sobat belum terbiasa, masih bingung mengedit html template Blogger atau mengalami kesulitan dalam mencari kode-kode diatas karena penamaan di template berbeda, silahkan gunakan kode yang telah diringkas dibawah ini. dengan cara :Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode HTML/JavaScript dibawah ini.
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/seocips/seocips-script/slide1.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://sites.google.com/site/seocips/seocips-script/slide2.min.js"></script>
<script type="text/javascript">
makeSlider({url: "http://www.seocips.com/"});
</script>
Kode jquery berwarna merah tidak usah dipasang jika ditemplate sobat sudah ada kode yang seperti itu atau jquery versi berpapun, atau ganti saja kode jquery yang lama dengan jquery diatas. Simpan template dan lihat hasilnya.
Baca juga :
Baca juga :
- Cara memasang widget artikel terbaru dengan navigasi next dan prev.
- Membuat widget popular post 3d bergerak diblog
Post Comment