Membuat Slider Carousel Otomatis Berdasarkan Kategori/Label

Cara Membuat Slider Carousel Otomatis Berdasarkan Kategori atau Label di Blog - Cyber 88 | Assalamualaikum wr.wb hai sobat blogger pada postingan kali ini admin cyber 88 akan membagikan suatu tips tutorial blogging yang diciptakan/dibuat oleh blog Maskolis , yakni Cara Membuat/Memasang Slider Carousel Otomatis Berdasarkan Kategori/Label.

Berbicara tentang prinsip kerja dari slider otomatis ini sama dengan membuat slider otomatis berdasarkan label, jadi pada slider tersebut akan nampak postingan yang berlabel / berkategorikan sendiri. Slider yang diciptakan oleh maskolis ini sangat sekali sederhana dan juga disertai efek efek yang menarik seperti efek easing dan mousewhell.

Demo

Dengan anda memasang slider ini pengunjung akan senang karena pengunjung tersebut tahu artikel artikel yang berkategorikan tertentu. memang tips trick ini sangat sudah lama diciptakan atau sudah expired hehehe.

Tutorialnya pun sangat mudah sekali jika kita memasangnya, nah jika anda menginginkan untuk Memasang Slider Carousel Otomatis Berdasarkan Kategori/Label anda bisa melihat tutorialnya dibawah ini .

Membuat Slider Carousel Otomatis Berdasarkan Kategori/Label

• Ingat BACKUP dulu template anda untuk berjaga jaga .
• Pastinya anda sudah masuk ke akun blogger .
• Masuk ke dashboard > Template > Edit HTML
• Tekan tombol CTRL+F pada  keyboard anda
• Dan kemudian akan muncul kotak pencarian > Masukkan kode ]]></b:skin> pada kotak pencarian > Enter
• Masukkan kode dibawah ini tepat diatas 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/AVvXsEhXynKUQ7Xk538rss6M1IuTzw-9KWlOs2X1VUD23ZErPxMoC6plIEaeVYzFj1u2woa8mEbGXPmr-a40CfGSvJQDCmv_tJDaBu5tQ36aOsgU4NG7rrkWBc-C86Pwq265Gx7P5yB3dUPqrrU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNcuPlB1xQc217xel-f50Paub7bJObiWLggIXJRjeO3WoMkerihtvv5yPBocQR5G4aDf6gmG_BTgp_0lhNPdQLriUBGSZjkQq476C8HVRIzPV8ndh8-R-eY5tt_7BEBNO_TXpSUfYnyRM/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/AVvXsEizeYlVHwONZsAE8EnJkl6KtrhCYwhJzdilTUhLEy_JPWcHF1ZLHKO9_ccCRTbXqU8qHL3QR3hu7nZ2IB2pPKq6M-cA6OL9FpSnzaH9MU8y7-1a2oYLrUnARCndt4iWgzdTJ_kOXmJqb7k/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18brlEmEFq6I_fOIWXVJXJMfQ3_LDNq7vH7195u71yKYME3uvUYfNRuLk-EUnz0A_bQUDx6oY_G0fpQYbeoORQ6Z0pOKGQY2eP_7tLV0HwcEdWfsuzBdiIRdl8T4-tDoSdAlQFp6hiZk/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/AVvXsEgTxEvrGCA_7KmzVgOBI_KDuooPZcM-Tq5JtdvvSdGyi4U_ZzDng2hnvC4RiOXbY1BCIalzlWvQmaESylhobS8FjT81mHLqokU4FG8ZFAxX34rDXwI-8rpI1vGJNpOXPc34TebtgRNB3LY/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/AVvXsEihOMXpQzjMBMxpEBaCHRmZs4Nc_D16W245ExOEKVGcQ4IfpEFWhE7wssYkBTKX8Z9YFJiZRrA6EcU-BvBnkdv3OL2WTrPmhKh6JJjPt7I_X2RLc9KM689gsSYkHDEaVC_kv-K8Rrgw9rY/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}

• Cara selanjutnya yaitu masukkan kode </head> dikotak pencarian > Enter.
• Setelah anda ketemu kode diatas, masukkan kode Script ini tepat diatas kode </head>.

<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/AVvXsEi7BXIYHzeTku5KWy2RJYqatXS1e0nDATyautPnwh0TGOXV3z8jaeY4CjFl_fOXHoWWUFWRNUlj7Rw96jG9aCi-J_KXxj-zBt0FfrluaKJeQabHpwmYd6zJbMxJJuGwPJ38r1RwgkD3Eb4/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "Cyber 88";

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>

Note :
 - Warna Biru (Blue) jika anda sudah memasang kode Jquery pada template, jadi tidak usah lagi untuk memasang kode jQuery diatas.
 - Warna Oren (Orange) artikel yang berada pada Slider, jika anda ingin mengubahnya silahkan saja.
 - Warna Merah (Red) Ganti dengan Label/Kategori pada blog anda .

• Langkah selanjutnya yakni memasukkan kode pemanggilnya, cari kode <div id='main-wrapper'> atau jika tidak ada <div class='main-wrapper'> .
• Jika sudah menemukan taruh kode pemanggil dibawah ini tepat diatas kode <div id='main-wrapper'> atau <div class='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>

• Langkah terkahir Simpan Template/Save Templates.

Baca Juga >  Membuat Threaded Comment Hack Ala Kompi Ajaib

Nah itulah artikel tentang Membuat Slider Carousel Otomatis Berdasarkan Kategori/Label semoga artikel ini bisa bermanfaat bagi kita dan kalian semuanya wassalamualikum wr.wb.