Jumat, 08 Juni 2012

Tutorial Membuat Slider Carousel Otomatis Di Blogspot

0 komentar


 
 
Tutorane -Sore,, sobat, hmm setelah sekian lama blog ini gak update, kali ini ane akan update blog ini lagi ya walaupun artikelnya sedikit tapi akan ane usahakan untuk update blog ini tiap minggunya :D. Ok, kali ini ane akan memposting "Tutorial Membuat Slider Carousel Otomatis Di Blogspot", nah bagamanakah caranya? ok, bagi yang sudah tidak sabar mari kita langsung ke TKP :D 
    Berikut "Tutorial Membuat Slider Carousel Otomatis Di Blogspot" :
  • Seperti biasa, login ke akun blogger kamu. klik blogger.com.
  • Lalu silahkan pilih blog yang ingin sobat pasangkan tutorial ini.
  • Setelah itu klik Template>Edit html>Lanjutkan, dan centang expand widget templates
  • Kemudia, cari kode  ]]></b:skin> , dan letakkan kode berikut diatas kode ]]></b:skin> tadi.
#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/AVvXsEgnChye0f2g373tInpQVxJe0IACSpM9x-TJjRBKJTYu895evPwqnuTu43jWIkAbCzfBLAuJTNO2R1AWL50AXbElSbiAsKRBh7Gu71RaIIvaoXQwPr_c4ipJZDgMHazbd76ewS_frLrykyU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1PGlnRqJ7Vjul5TuIkJ4weRAVB5tSNhVWlHigJRCKRBrHAruvDLc0oUwZskfeLL00yFt3-YgqvVAYDZg7_os4Obq7SCVyAURRiILzYeDaCuzacc52usN5E5sWAV5mMm-ATPp7tccqRNQ/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/AVvXsEjp0gkam-aLusgIloSOFaqAS8lbS3N7pS5kuJELLhG3w6IbHp5BSgCbD3YWVXsOu_yMKJtrJpvpxcli5tFXc-a_Mvl9K8fzjOhqGORVkrgDOKKCyWxohiXyr1CnQtiI0IJqtcaG9HznpCg/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyCaGCvNHInuIHZ744wwnAWatzgQnRZhKVKYfZMtKSr0FVxZmTgPAm-RjoMAp3Oh2lRrtzUkaO3ijCF7H2IlXQpj-A_dPY9sOp1N2fCJDK6TS-y9PNVndx2mBbHKsp9DeAqijqTYm-tY/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/AVvXsEiQ5jtDHQSRLSW2Y6d5CQbiSGphyNZB-nZSrHDcE9zI0udVR92SfIw75upMMhsachP6c0KcaBQYPzi9D08I7b1FjjqPjAyuHqayWu_OjF1xNH7L82zDuVmF1ZVAUDZT4VKLsuTbXKauGZs/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/AVvXsEi96GIVSzmhy9j5kNWFGMZcd_BOt6xv2GDKRrVTM4f6dbHQnh6xifOU4Fr7vCknL0lkshnZA-aH8b_4Ny5ckSCBdqexQze2o35zgh_Hi0GClYX-fB4ghSdanfBEUzqKPSde5wEyw5rhsnU/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}  
 
Untuk memudahakn pencarian, tekan CTrl+F dari keyboard sobat. atur kode yang berwarna merah sesuai keinginan sobat, dimana kode widht merupakan kode lebar dan kode height merupakan kode tingginya.
  • Selanjutnya letakkan kode dibawah ini diatas kode </head>
<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.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/AVvXsEj_jk-QKFK8QbEqsAzFUZRWMOqhpjCYzfE64M36ykqG-fl8oFLQ87U4kCmtDB3ey2ohUuGbomabKuj2FkFIPNLUmVXBwN4bMRP7oOB8GdgTPXtp-BTFFIBCRoV_WbihdOeAlVEqhsO6GEI/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> 
 Perhatikan kode yang berwarna merah pada script diatas, kode itu merupakan kode script jQuery.min.js yang dibuat oleh maskolis untuk membuat slider ini, jika pada template sobat sudah terdapat kode script jQuery.min.js walaupun serinya berbeda, maka kamu tidak perlu memasukkan kode yang berwarna merah lagi/kode script jQuery.min.js yang dibuat maskolis tadi. 
Sedangkan kode yang berwarna merah adalah jumlah slider yang ingin ditampilkan dan kode yang berwarna hijau adalah label yang ingin ditampilkan di slider tersebut, ingat tutorial slider ini berdasarkan label dan besar-kecilnya huruf harus sama persis dengan nama label sobat.
  • Setelah itu, cari kode  <div id='main-wrapper'> dan letakkan kode dibawah ini diatas kode <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>  
 
Kode diatas bisa juga kamu letakkan dibawah atau diatas navigasi menu Kamu atau bisa juga diletakkan diatas footer.  
  • Nah, langkah terakhir save/simpan template sobat.
 
Ok, sekian postingan ane kali ini, jika ada pertanyaan/krtik dan saran jangan malu untuk berkomentar ya :).
 

Ditulis Oleh : Ikhbal Gusri

Artikel Tutorial Membuat Slider Carousel Otomatis Di Blogspot ini ditulis oleh Ikhbal Gusri pada hari Jumat, 08 Juni 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Tutorial Membuat Slider Carousel Otomatis Di Blogspot dapat Anda sampaikan melalui kotak komentar dibawah ini.

:: Dapatkan Widget Ini ! ::

Leave a Reply

Berkomentar dengan menggunakan bahasa yang baik dan santun,dilarang menautkan link hidup dan komentar yang admin anggap SPAM akan dihapus.