Cara Membuat Slider Carousel Berdasarkan Label Diblog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.

Kali ini saya akan membagikan sebuah tutorial Cara Membuat Slider Carousel Responsive Diblog , dengan slider blog kita akan terlihat lebih keren dan apalagi jika kalian pengelola blog video atau film pasti cocok untuk blog seperti itu.
Jika biasanya kalian membuat slider dengan efek biasa tapi kali ini yang saya bagikan berbeda yaitu slider dengan efek slider Carousel.
Jika kalian ingin membuat slider efek dibawah ini adalah step - step nya dibawah ini :

DEMO

Buka blog kalian
Pergi ke Template >> Edit HTML
Lalu cari kode ]]></b:skin> , sekarang copy dan pastekan kode dibawah ini diatas ]]></b:skin>

#carousel{
width:760px;
height:250px;
margin-bottom:0px;
position:relative;
display:block
}

#carousel .container{
position:absolute;
left:0px;
width:760px;
height:250px;
overflow:hidden;
background:transparent;
}

#carousel #previous_button{
position:absolute;
width:30px;
height:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwkTnoPMXAaZKyMbDCBW0YvAYuVVRlGEqY-lDCp0dldOIFNXHp0CQpdvpZyLJPGCU-dbyq7QJE69dDLk1Mao4tv36kUxel_S2B4Ria9PNgDl4BW1m-eAhik4FGWKAig2-dAxHQJn69HA0/s200/back.png) center;
z-index:100;
cursor:pointer;
}

#carousel #previous_button:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflkWHJ94I0cu4fIJ6svAbpUsPgCvSspnIceDXs_MQPV-mNzmH7wQv_9Ii6REhwamRVSH-vNLfSOvqya5O9-udR_T4mcnBEjNcx6sm-q1aTP232cg9_ZRueRg-qxF8HcW925wPWesGKnY/s200/back.png;) center
}

#carousel #next_button{
position:absolute;
right:0;
width:30px;
height:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJAHGdLpUwxnFV6CC52HcZYK5pighEHJhtk76KVzUZkM3Y9JwMIqPKre5P7a3K4fv4OOE2ssQEkvcYKCK0pZQwygJ4OdIQlKYPMyTZ2gviNtAgDUSrHxJP6TsrZqC1bo8GAdDPJ_yxtc/s200/next.png) center;
z-index:100;
cursor:pointer;
}

#carousel #next_button:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchS23s5SqYAhE1LAwqM6bLwT93QEfeim3WtO9JDEeQQoYx5E5tUOEogRIo-yN_nuLIvhVCxDuKg3nx0XdSMbQk5qC7PU9bJxTK4jVE2Yr_R1IUdvy_0htlUW2MjMe9tqjCqGSAKNAjwU/s200/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/AVvXsEgTQe-PV9blOikqg6VAYsCna5l23EDbrHFxTPgLohUc8hOEbHU1NT2HdOpvSZZN6wfXdkew7O-1q7KVzR-EsIfvHZgBCv2uPL_WW1UhUXMwurOJPt_CoSQtBOkswjDElbaQHr6HAkHet2U/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:130px;
height:210px;
margin:5px 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:2px;
width:125px;
height:150px;
}

Selanjutnya cari kode </head> , sekarang copy dan pastekan script dibawah ini diatas </:head>

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

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "Yoshep Bioskop";

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>

Sekarang cari kode <div id='main-wrapper'> , sekarang copy dan pastekan script dibawah ini dibawah <div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>

Terakhir Save Template
Selesai

Keterangan kode yang diwarnai diatas :

Merah : Panjang Dan Lebar Slider.
Kuning : Panjang Dan Lebar Gambar Thumbnail Post Pada Slider.
Biru : Postingan Label Yang Akan Ditampilkan (Ingat Penulisan Huruf Label Harus Sama Dengan Label Yang Ada Besar Dan Kecilnya).

Terima Kasih.