Carousel Slider Konten Otomatis

Posting sebelumnya saya share bagaimana cara membuat slider konten otomatis. Sekarang saya akan posting kembali slider konten dalam bentuk berbeda. Bentuk tampilan kolom slider kontennya memanjang yang biasa di sebut carousel slider content. Baiklah...mari kita bahas cara membuat carousel slider konten otomatis. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></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/AVvXsEi2fIsEVq-buq25htmBAiTwctEMJtv6Ze-phG1sGNXPFF3lFHlbdzDN2Q4GpgJbH7MRJbWv0q4RtFu4OUifqB0pDMMkFqhzSIzcdGeVimWiBE_EKg1sZzlCEl4N5qlHeboAewRwTVej0HQ/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzCSPm-EB1llgWLvgzm939GFj20uWBpCh0Q7fVoKLif8zr2WPLhwUqDxp_8ZZXU_5aC8yX4z8Z8TPmvyaWYJO9o3dCXZnCa0IeHXr6loUz_9lCnByCOXvufk3qtBLC81AghXYphzDq-a0/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/AVvXsEgFi2SoRjD9dU-M0JWFHadvdmktMVzA-hvfarhAc-39ijvzCspcqzaxYeOQCUdtQyHFq1oCu0Bh38L-v7Je7d8d6JrGOPP5f8dIKy_QdSu1_3HILvmeNCH700BFQ_QViT5dPbPbcQwT6MY/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Bu0Cz6a0v5rfU7WB5gXPa7Xcun72c9sRcPnZMbYHnyOJDX1n0oGz1I9U2p2UXOs7giRl0NkEDpVrcWQ_fqzwy1UHn-bVwIZEnrOHsyQ_YS3w97W_XHyuAhhPvZwo6xWAnxfrmjEu86U/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/AVvXsEjTYxYYQMoRp-Jr_C0dgNY2dAKgU3N7K0bHkI5fd9-DRzF67IAdaFUydgPanPfJ3E8c_csbX5Xr9ji74nPxtJbI_RFC_ngLCt-aE2qtccvzjR4I21dL0rXmmBlE1ni3onB3xbDeY2EGFfY/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/AVvXsEgLse9JqS2NAEdZN7gwdBCkSGBeA0Kk6tAca2dyaoGLelQ-Ol_WHZO2i9nP4LHwIL_6s-7rkKhQhyphenhyphen5rsma3229HpYRAEF2EM9QGaBSrDOTaQ6rNWxWDxw8jUj8fj73untPHlwjyI42B8KA/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}

Selanjutnya masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

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

aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "widget";

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> 

 

Silahkan edit beberapa kode berikut (dari kode di atas)
numposts1 = 15; jumlah postingyangditampilkan pada slider konten
label1 = "widget"; label atau kategori yang akan ditampilkan pada slider konten

Selanjutnya masukkan kode berikut di bawah kode <div id='main-wrapper'>

<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>

   

 

Catatan
Kalau mau mengganti tampilan slider posting berdasarkan label atau kategori menjadi default slider, ganti kode /feeds/posts/default/-/&quot;+label1+&quot;?max-results dengan kode feeds/posts/default?max-results

Jangan lupa Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

 

sumber: blogonol.blogspot.com

Artikel Terkait:

Posted in: Tips Trik Blog