Cara Menciptakan Carousel (Slide Otomatis) Postingan Terkenal Di Blogspot

 Sebelumnya, Saya mengucapkan terima kasih atas kunjungannya di blog ini. Selamat menikmati artikel-artikel berkualitas versi blog syahandrianeda.blogspot.com.

gambar

Jika Anda melihat halaman beranda di blog ini, maka akan tampil satu postingan yang bergerak otomatis ibarat slide. Tampilan tersebut yaitu carousel versi blog ini.

Carousel merupakan slide otomatis yang dibentuk dari pemograman javascript dan css guna menampilkan suatu artikel tertentu semoga lebih terlihat lebih dinamis. Carousel dalam blog hanya berfungsi untuk mempercantik tampilan blog.

Lebih jelasnya, berikut cara-caranya:

1. Kode CSS

Tempatkan css berikut sempurna di bawah </b:skin>

=======

#carousel{width:97%px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#556268;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:563px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:#556268 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTlIAL12IHnwM1dvdw9fjqBPBeA4ZQUUpyfwQ70Hr8-qUEs6oPqX-DC5wLh89U0e64GzYQSTfbrs6MzGtmA1CpZWPgVcYsPJtnE5CjWvLHWwvcUtipW8BuyboMisLsN7Q7wpf7BQLj0eB/s1600/previous.png) center;z-index:50;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:#556268 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHq4sCeGcEQx9tqTNNwG1k6KTOGmupopPjQd7IQCRqO3QQxO5VpRKR1IdZZ2_PsgeLI6QsJjEoGH_gLJcgb__8aAFQ-L7xhYI4yh3zaMhbcC_eQJPIR1H2r5F3sCV8u6JufQGJy0emXRVV/w26-h140-p/next.png) center;z-index:50;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=90);opacity:.9}
#carousel ul{width:563px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:260px;height:85px;margin:0px 2px 10px 20px;padding:12px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover {color:#f21827}

=======
2. Kode JQuery.min.js

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Tempatkan arahan JQuery.min.js di bawah </head>
Jika Anda sudah mempunyai JQuery.min.js boleh tidak digunakan. Asalkan yang terbaru.

3. Kode Javascript Carousel

Tempatkan Javascript berikut di bawah dan di bawah arahan nomor 2 tadi.

==========

<script type='text/javascript'> //<![CDATA[ (function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery); //]]> </script>

==========

4. HTML Carousel

Kode ini letakkan terserah Anda mau ditempatkan di mana. Saran aku tempatkan di bawah Kode

<div class='main-wrapper'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

kode:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
mengatakan jikalau slide carousel hanya tampil di halaman homepage aja. Intinya, Anda tempatkan pada main wrapper aja.

berikut arahan HTML Carouselnya:
==========

<div id='carousel' >
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 2,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>

Itulah cara menciptakan slide otomatis atau carousel pada blogspot.
Semoga bermanfaat.