Home » , , » Cara Membuat Slider Carousel Otomatis Berdasarkan Label

Cara Membuat Slider Carousel Otomatis Berdasarkan Label

Posted by Admin Posted on 9:17 PM with No comments
Cara Membuat Slider Carousel Otomatis Berdasarkan Label - Pagi sahabat blogger, kali ini saya akan memberikan tutorial tentang bagaimana slider carousel otomatis. Slider carousel ini dipasang berdasarkan label, dan contohnya bisa kalian lihat pada halaman home website ini.


Saya menemukan cara pemasangan slider Carousel ini dari website nya maskolis dan untuk cara pemasangannya ikuti langkah-langkah berikut ini:
  • Login ke blogger dengan akun Anda
  • Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  • Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  • Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  • Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#carousel{width:910px;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/AVvXsEgrCB0vVlf4bbn1ZA_UcfOsSvnMT1EHXQ1IBlM5XsL7jIXC87bxTnYPdkloSjeYlxoVbQFe-jMD-hRFiO1ccQ14ws_Sd6hjW3UX8laT8hhsavHy5hZ8Qnl0uWKdth_SR3PH370GD93umIw/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnwVLPRxYZtDTPZNSmVvKl6hMZKxPhzNJ9Du1pJGNKls_nOaVdAGfCFwZYMiEnwsxPSQRvWK4pIZmq0xi3aIULoiU9s3bQdLPpGzeb87iUFuzwH-rIxB1NLC52MOxo1TAgij4UJZ5IW4/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/AVvXsEjJWYzwmMDV1yXMnWrXaOQzaRQMGHriBk-HpH9SVQzoogJFA0-e3Hnb6G_Vs-pwr32n3FT3YpYkeBzPoba8lHwzxXfU7VIBpbNuf3gDH7tBfAFYvxPQ18FegDExUS2i_YJNCVvH0qGjm94/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IWLS4XbLCX4oHQRMMKMh2sxqY1esXmkeiB6-M_MJ1RR1c6103S0gEus_4p392113glVRuYV_Ep9v-t421mUVdXWwuc5IWH59XIDgvMBQrEc5Ll970ImbrZXNGemvzxKTfEVGoRV8s5s/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/AVvXsEh9tSTAJ_YdVSIpMryoQMHACLpqam2KWQq6EJ_domMVXPPbcDoupiTeOwrPwI39FenZK-jR-s55SgtEHYQBigzFy8ur54uqOm1XvZEBJaN77kjbHkBIHeq5BdgPztC1nP0y86IpExGw0cE/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/AVvXsEjzGkXi2yxPqg-zHOM2Kb9cxiV5TvboLkg0-Pls15ncoUs_eFaA042xTTdPKx15sOZw7JGF-Xf-nggjbzfVDBZ9o4n7eztSfDylfeDWJvu5AfsgIVUaRtXTISrZ3cuIhyAHKSYf22zUxss/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}
Coba kalian perhatikan kode warna merah diatas, itu adalah lebar dan tinggi slider pada website saya, silahkan sesuaikan dengan ukuran template kalian.

  • Langkah selanjutnya kalian cari kode </head> dan masukkan kode berikut ini diatasnya :
<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/AVvXsEifEIiu1jIYhYkHPLp2KI5pIlENBc4ZsQ8oavq3LtkPDKs1MGYYcN1ab2VqF-iwAcbV_-MwICbar1onRPjJULNVbP7F1B-H2VtqdI9OZMZyiKEsSrHlUGz3ZxBL7WI9tWg2srukS2S8CrY/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 5;
label1 = "sport";

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>
Perhatikan kode warna merah : 5 adalah jumlah slider yang ditampilkan. Dan sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).

  • Dan langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'> , kemudian letakkan kode berikut ini diatasnya :
<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>
Kode diatas bisa kalian letakkan dimana saja baik dibawah atau diatas navigasi menu atau bisa juga diletakkan diatas footer. 
  • Lalu langkah terakhir kalian tinggal save templates dan lihat hasilnya. Jika kalian mengikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Mungkin cukup skian dulu artikel tentang Cara Membuat Slider Carousel Otomatis Berdasarkan Label dari saya dan semoga bermanfaat.


Label: , ,

0 komentar:

Post a Comment




Popular Posts