Cara membuat Carousel slider otomatis berdasarkan label

Ardi21_ansyah

Blogger, Widget

Sabtu, 07 Juni 2014

Belum ada komentar

Cara membuat Carousel slider otomatis berdasarkan label

Dalam tutorial ini saya akan membahas cara membuat Carousel slider otomatis berdasarkan label Anda di blogger. Yang harus Anda lakukan hanya mengganti dengan label sendiri dan slider akan bekerja didasarkan pada label yang Anda tambahkan dalam template Edit HTML. Saya membuat korsel slider ini sangat sederhana dan hanya menggunakan script jCarousellite tanpa menambahkan efek mengurangi atau roda mouse.Dalam tutorial ini saya akan membahas cara membuat Carousel slider otomatis berdasarkan label Anda di blogger. Yang harus Anda lakukan hanya mengganti dengan label sendiri dan slider akan bekerja didasarkan pada label yang Anda tambahkan dalam template Edit HTML. Saya membuat korsel slider ini sangat sederhana dan hanya menggunakan script jCarousellite tanpa menambahkan efek mengurangi atau roda mouse.

Pertama - tama anda harus login ke blogger dengan akun Anda 

Setelah itu pilih blog yang ingin Anda tambahkan slider. 

Pergi ke template >> Edit HTML dan memeriksa memperluas template widget,

jangan lupa untuk membackup template Anda terlebih dahulu. 

Dan kemudian tempatkan kode berikut ini 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/AVvXsEiDENKjGX71qyu-PB17hXLCPhPDPqKklgDlbwicZb3jLIAqpgvSPkOYuTk0Lb08LAC0AfStGO_eGpZV9syNZqOtbqfrEF2ot8uNI2OrZb_rS3EoMzf001kSjGa9CJ2ypMH5vAiAnjda7Sw/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbIyjTsnU3vR2Dlgap_L7q9295XpsCSi7VsCKDPWwJRTJpJ2Thw0_8bgNBHMIUk7N4YspeYEgUr_WDUgtrqitzh8e7svaNcXQVxLblxn9I1HR-WQzXnzr45JMNpyNooEtPsGpRFSRtVA/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/AVvXsEgR8vhNMgHi9hWQRXZrUoZAN_IZvOcSmtV-xEEHV7mVG2X35L0W0TIDkwvGW0NzmYgjDPOOACIAO1-MoURTx8WRcrb59oUI0E3CbHeydUZ9oPWDRUTb33-cZQ5RvDVXLF6LHzcRpHQP014/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFs_2P_-M5ap0h939MjcRxLWex5TVb2zMBsjrn3MNmsO9KadQo4TNKqa0fW_9JQkGgob5rawR54UOebyyFn2Ynk_F1LpFHTA8g96rSSBLpJeBeQ9tYDisqIQqWG9qpSLSrAfeQWGnWctA/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/AVvXsEhhVJhd8ZlOBMkeNqPRjqtCZ_r1a-C_2lsrkzWBP09UAdySUqEehRNDSRCsswG47tEXLDJSmi6HZ4wYG6EWFAsgoK07jAumg02wxPDC7HSulTxmQQmT3zM4Xv506WrMrK-mlGblQ6sYvnA/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/AVvXsEjTtQAOKXFHE2dNG1bK6risx0LYZk5DUSRr5-jaGm6Po9W7oL6pDdET6n3yD1NcKD1IX4Lx7OJR3rVyUhHDsHzvTA_-CzyTFtCZPWVCR6fk98jxUnnrkLyW8RuE6bUkZHnbbds8r9xjiBg/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}

Lihatlah beberapa kode dengan warna biru di atas, itulah lebar dan tinggi slider

dalam demo yang saya buat, berubah dengan ukuran Anda sendiri tergantung pada lebar

template Anda. Masih di Edit HTML,

tambahkan kode berikut ini di atas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrv4xtKlqcreyXJ317iVKi5WGZhn3TpAvL9B9VAeDuhd05FuM8vK-rLQdqw7Om8k6YiWAvMV5oMuD3TeyhOGDROmAEZxVu1iRaOaXvZMiat0HyM943ayOzkqFkVhc0e5blYQtS2bvs-QY/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>

Catatan: 

Lihat script URL merah di atas, itu kode script seri terbaru jquery.min.js yang saya gunakan

untuk membuat slider ini. Dan jika Anda telah menemukan jquery.min.js meskipun dengan

seri yang berbeda dalam template Anda, kode merah tidak perlu lagi memasukkan.

Harus ada hanya satu jquery.min.js dalam template Anda, terserah nomor seri,

jika mungkin versi terbaru.

Kode biru (15): jumlah posting Anda yang ditampilkan dalam

slider. News adalah label yang saya pilih untuk muncul dalam slider. 

Langkah selanjutnya Anda harus menghubungi slider untuk muncul di blog Anda.

Tempatkan kode berikut ini di atas <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>

Anda juga dapat menempatkan kode berikut di bawah menu navigasi Anda atau Anda juga bisa ditempatkan di sisi footer Anda, bahwa itu tergantung pada kebutuhan Anda. 

Langkah terakhir, simpan template dan lihat hasilnya.