Home
tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. . Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.
Cara pemasangannya juga sngat mudh. berikut caranya :
1. Login ke blogger dengan ID Blog sobat sendiri (ID orang lain kalo tau).2. Setelah itu pilih blog sobat yang ingin sobat tambahkan slider.
3. Masuk ke Rancangan >> Edit HTML.
4. Lalu centang expand widget templates
5. Saya sarankan untuk mem Backup template sobat dengan mengklik link "Download Template Lengkap".
6. Setelah semua anda selesai laksanakan perintah diatas, lalu cari kode ]]></b:skin> :
7. Tambahkan 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/AVvXsEgRBFWfS3vWATPTeHVRFeJRvpbIJQNiy7SAJWz-ifCtF4jfAf0QS2VKoLt6x27sE1ZnvrwuxGoRnVxKKbEsXyZqNkhhdcNo3hQqQ8orKqXGBGA2u2AHKBNyIS5bNxUa1oPDwv4hhIIGH1I/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXdevPhVPmxxQn9wKL5gPNa9Ys_W_fNdHS7Eza4MSiXgAumg1J3R1fVIaM9DofjpiKQO4rNSsqye4BUIZg2Mam3syjk2yxNUEPYPNXUfPVqYg7mfoRGIqntcz-mMqC-cM8pzg6GyifPE/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/AVvXsEjQ7lcpXQq2zyCZfPmjD82iKdUH507kjHVJJb9kIYTHmUQhVJPkVzzlheWJmlw6w_YVuR3PEaBMEF6TnlEsWe-RLq4hOsO1ZQIjZ3pVaodTnx53FAcSTcSs1KTglQ2MDtMkyVNdqpDrRGQ/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvEiUnYT7_Uysp90U_z-pXIUnUu4GYE6fl_2eBs-YUt_lNFryi_ST4zaxX1CS3On5L4g3Cwg9DW4bGuuSh6H-uIlyxtTXqNF8kSVK4t19oe33QkBNq2o9px8SAhGID_IKiybJSxVZDm0/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/AVvXsEiFlHwxWQDZLKYN1WICSyJZO09G00YZQVRV4WwHjb4on1zSHwGrMzhU07SWGfqzZJEb58d0k8hwpYt40DcjFBnHiLXqZkIjcVMmhwN4tlwnfzjY_zv_1azm6y3gnI2LlmzxVctrgLMaynA/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/AVvXsEhB8p69aZ1cC0bRtwYpy9irR_33_rd10tBUrS0Q19JLhp0x0AlB5GCtdMwEV-uhzB4LBQYJl9RJosYJMgpcCjj78IUnWbGbZj0NJ70tAryJyH1ZC_pj5DOZoXU7CcyfYK299Jzm6xsCNV4/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}
8. Perhatikan kode yang berwarna warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat,
silahkan Anda sesuaikan dengan lebar atau ukuran template Anda.9. Kemudian Cari kode </head>
10. Tambahkan kode berikut tepat diatas kode </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/AVvXsEhRqqNkY5kYYFgJGujl008pVBwQogBBw6fVdHtUMI9rGDYySgPJ6o1vReJcS83nlEsZ2k1T_Mi0D3UDn8XXNXw-P4ihYEc-7vkkPO0V6UljzjTwuJjdL2FHeClXdd4dB_YTBcttrtMdaiI/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>
13. Kemudian letakkan kode berikut ini tepat atau persis diatas kode <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>
14. Terakhir Save/Simpan template kalian.
Gimana gampang kan..... :) heheheheheehehehe.....
Gooood Luck yahhh :)
Anda baru saja membaca artikel yang berkategori Blog
dengan judul Membuat Slider Carousel Berdasarkan Label. Anda bisa bookmark halaman ini dengan URL https://sayangmamah07.blogspot.com/2012/09/membuat-slider-carousel-berdasarkan.html. Terima kasih!
Ditulis oleh:
Unknown - Thursday, 6 September 2012
Belum ada komentar untuk "Membuat Slider Carousel Berdasarkan Label"