tapi kalau pembaca mau langsung kesitus nya maskolis dipersilahkan dengan sangat.
baik, saya akan memberikan bagaimana cara membuat slider carousel otomatis tersebut. untuk melihat contoh, lihat gambar dibawah ini.
nah contohnya kurang lebih seperti diatas itulah..
kalau mau pasang di template anda, anda hanya tinggal mengikuti cara dibawah ini dan semoga berhasil ya.
- login terlebih dahulu agar mudah untuk mengeditnya dan pilih blog yang mau ditambah dengan slider carousel otomatis tersebut.
- masuk ke edit html dan centang expands wigdet template.
- kemudian cari kode ]]></b:skin> dan cari dan kemudian letakkan kode dibawah ini diatasnya.
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81eKNfTN5t7vpnsHxbYN_wK8sV0j37YiWq7fda1fg6jfkkzzXWIzM444sFeTZR_pVz-1aYqTffsRN_vgOLszXXZh-Q906kSXNYJ6WiRtXq4VtIjG8l46oTf-NgBTJORL4VfmcAMBHve_L/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-suOM9UdsPEXJiQNmKIXZ8gqnsZ1EKmHymwAIZBI9TrlVYQf3wEH9Q7AcTDoopSD3NkZuJ7XPug-IH7vI70vuOqM8y1e-lkVNqk3bL-_WodKYZiWY7d2MgsvK0ngjNGYpeGO54suJaeSG/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
lihat warna merah diatas, menandakan bahwa itu panjang dan lebar widget tersebut. untuk sesuai kebutuhan silahkan diganti sesuai template anda. - belum selesai sampai disitu,masih di edit html, cari kode </head> dan letakkan kode dibawah ini tepat diatasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHCrGVmGECRqYljujizZp3oOLadfEALFhXVr5UfFqiEG5XhMdmgFgy1NjBxgCfyfm5Zq1aM0m0oXtSD_oHm0636gp9pI5FQjbeUJEAR98NvaeZYNAjxZ-ugpZvO8pYjBR5bVshGgSAv04/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;
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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
perlu diketahui :
perhatikan URL yang paling atas, yang berakhiran .js berwarna hijau jika template anda sudah terpasang javascript atau .js maka tidak perlu dipasang lagi.
kemudian kode berwarna biru muda : 12 itu adalah jumlah tampilan slidernya. dan sedangkan 100 dengan 90 itu adalah panjang dan lebar image. - langkah terakhir adalah mencari kode <div id='main-wrapper'> dan kemudian letakkan kode dibawah ini tepat diatasnya.
<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/-/sport?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>
perhatikan kode bewarna biru, itu adalah label dan anda bisa menggantinya dengan label yang anda inginkan - save tamplete dan lihat hasilnya.
