Cara Membuat Slider Carousel Otomatis

Cara Membuat Slider Carousel OtomatisBanyak cara mempercantik Blog, dengan menambahkan bermacam-macam bentuk Widget, kali ini kita akan bahas
mengenai cara membuat Slider Carousel Otomatis, akan tampak slider berjalan dengan Artikel-artikel menarik yang anda inginkan. bisa anda tempatkan di bawah header atau tempat yang anda inginkan.

Pemasangan nya pun kali ini tidak terlalu sulit, ikuti cara-cara memasangnya di bawah ini

• Longin Blog Anda
• masuk ke Template/Edit HTML
• lalu masukan Kode dibawah ini, letak kan di atas ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4TfzlcK6YjtMK2wSTEDQPETTCU83J87Hp6qYLe1NKfRYC5k9TcdXBoRXz78LUii9Teiw-36BcTTJGAER3eYpOCNizvD4wDypf3DO9aAfuUDmLGPJirv9YYDP_lcEFC30PAe_j9PD6KeU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcfXV7kMe8VR56F_KJ_eDONyZC_BJYPzSU9OAx0ifJy0FW0qPzJMBa08Meur_uS4yhP8LKPJ6hyphenhyphenoElQS2P9-wetDxNaBJghnnqobA1wIAkTnCx4zWG-0JUbalttVVQqKj7uq8BShXYY8/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDyZcQ5V-DXHr25gezmDkoCmeaWIT5NZpj_FXB7PVRvrai8-wiyjH7KqOhO0FEfA6lrxwN2S_XqSPWTVsv5BSC8oBwGNlKIvsUL3ftTWs2D-lZ7qWJqVboNpBjZ5UjkZxqTxE7PunpH8/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NKCmT49od65MhzOq53hQdOaq2a3axq24Hd-2KCcBQvJa6eCaPVbZttqIWP6Vd5lVrGkGxyetyWVLjomuKPWenaRog8nF2ycuG5khqGD0-3AjiGHhaUAgZJiIWMhUotPCy1fRXezYA8s/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnYKyMw2xr4QiIjOJ505gB1Fzl0Zek106GIurQ0qm87lDl0eYh3zR0AUGiZPlSECscay9LAesihG1SyIc-KDrXEgrV_3TaPkwkpUEEki0VRZQQtWnWL-3twSiOY6qbBTUhFtib8BY9D6M/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7h5gPyopK1tnjyLRx5seeq8Dd5R1FSx24JciyqG0QxOKMIFKTqK7sBnTiBzpNqOpejqt707M75qfqNfQF4lcr8w8kjFcJvUST0Bgdlf2EWlbTG9wK-kLuob8JcgbRl2zr9Zp9TzohNg/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Kode yang berwarna biru silahkan sesuikan dengan lebar dan tinggi template Blog anda.
kemudian cari kode </head> masukan kode di bawah ini pas di atas nya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCaeMBSgBCr-Rhrf3lO2OJ6JJ2AtU-kTnD55W20tbgUPmSi_AW1QsxrgkX1DVB6by1BVy9MgH9hLCNYsBilLiHHuIfbHUkGizxEepoad1_9UYhCNOHDZ8kO73ep57BR2Frt3PoeqwdhFY/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

kode 15 yang berwarna biru adalah jumlah slider, silahkan di cocokan.
kode berwarna biru News adalah nama label anda yang ingin di tampilkan
penulisan besar atau kecil hurup harus sama.

Agar Slider tersebut bisa muncul di Blog Anda cari kode berikut <div id='main-wrapper'> lalu letakan kode dibawah ini di atas kode tadi

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?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: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if>

Silah kan Save, lalu periksa kembali ke blog, apa pemasangan sudah berjalan dengan benar, atur letak slider seperti yang anda inginkan.