Membuat Slider Carousel di blog ~ F2

Membuat Slider Carousel di blog | Dengan memasang Slider carousel di blog akan membuat tampilan blog kita menjadi cantik dan juga tampilan blog kita akan menjadi propessional,namun kebanyakan para blogger takut dengan memasang slider caraousel ini akan menambah beban saja pada saat loading di blog kita,padahal apabila kita bisa untuk mencari cari kita bisa saja dengan memasang slider carousel ini tidak akan mendapatkan dampak negative kepada blog kita.

Cara mudah membuat slider carousel di blog

Apabila anda ingin mencoba untuk memasang slider carousel ini di blog anda,bisa anda ikuti langkah-langkah pembuatan nya di bawah ini

Masuk ke blogger
Pilih template nya
Kemduaian masuk ke Edit html
Lalu silahkan anda cari kode ]]></b:skin> dan letakan kode berikut sebelum kode tersebut

#carousel{width:960px;height:125px;border-bottom:0px solid #666;position:relative;display:block;background:#484848;}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:940px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTppXZJyS9KrzUcbknZeiUlAZDfiFBS094aj5yKU_J_d4k1KtMWAagjxTQZzCdbQX5goyKHtvMrlE1B-FRpldpjPJ3nq3afZnL_vGleyDCWK6e1o8Jm_m_iePv6li0JfqpspnNzMVqJ8/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1_IKKvAl0YbK_IXRzN0EUcvF4jRmA-2q4KIeCZkI6jux8z3soyNI5kEtu5YezAJBbzqwyKGSJSOT2cSIj4dAAw296PyrVuXd0N1wasdDNdG3pmqJT85jbTW6Kncd_WlU6q28akbPK5M/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;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:207px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#423119;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#e78b14}

Silahkan anda cari kode </head> dan letakan kode berikut sebelum kode tersebut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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>

Setelah itu silahkan anda carilagi kode <div id='content-wrapper'> dan letakan kode berikut sebelum kode tersebut

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);
</script>    
<div class='clear'/>
</div>
<div id='next_button'/>
</div>

Kemudian Save Template dan lihat hasilnya

Nah itulah cara pembuatan slider Carousel di blog,semoga artikel ini bisa membantu anda semua,selamat mencoba slider caraousel ini.

File download Mp3 Full Album kami compres menggunakan rar dan disimpan melalui hosting 4shared.com dan mediafire.com, file rar tidak menggunakan Password. How To Download