Caranya sebagai berikut:
1.Login ke akun blooger anda.
2.Masuk ke doshbor blog anda
3.Klik tab Rancangan dan centang Expan wedget
4.Cari kode ]]></b:skin>
5.Simpan code di bawwah ini di atas code ]]></b:skin>
#carousel{width:960px;height:330px;border:1px solid #386361;position:relative;display:block;background:#e2e2e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5eeGZj3G57l-uUo2LQR9PE2UulKOb5_XfX0ynYppxusaxFDmvZ2LdmHyaCWcQ4jibkyAVjoRLywrQalPpKOYM7Yh6hwSchMqZXKKNJ5ewGcggcscRZnBn9yB1hRDg1JKx2nt4VKtA38/s1600/outer.png) repeat-x top;margin:10px auto;padding:0 auto}
#carousel .container{position:absolute;left:25px;width:920px;height:330px;overflow:hidden}
#carousel #previous_button{position:absolute;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiN7eluEPB1tJ-pnILZCCbsXd5wDvaf2WueVRQDXuefUja43i4nTrdSKa-Ph9CkJwd4Peqz9Wx07D1PoRY6JOjcShONoHAyXPqIejhPzOYzFAxtK4Hgiq8rgvNxSkfVOGSv66ac2We9Xo/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7daxasIZR-EN2-TD-5Vk4fv1zAUFNmz3dpWgy4kUvVANChN06KeRoAiOuRP6QXaFmwcU025OmAhM-5-679uoaX2Rm0enW56_ZFE62s-WCugIUll9JJA0MyJh1cDOT4aRc85oOVy1BI4/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{filter:alpha(opacity=80);opacity:.8}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#143234 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7T-KUmEB7KLBwLmNoXZ3j3NFuev9zIYt1ZvmKtQjebflnvN0p-Ru7Gyr92tkzDXr-3cdLsLqhyZCSXojRJ5fc88nJd-L4DL5foabCfzSYov_vb5QiBMLHdzzLVBlAbYOjXVPrk_H10Q/s1600/sliderbg.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;line-height:1.2em;width:200px;height:300px;margin:0 1px 20px 12px;padding:6px}
#carousel ul li a.slider_title{color:#5ea19d;display:block;margin-top:5px;text-shadow:0 1px 1px #000}
#carousel ul li a.slider_title:hover{color:#f7bc2f}
6.Cari code </head> lalu copy dan simpan code di bawah ini di atas code </head>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlFEgdVtqDIl14JAmIG_l6IBAY72NZny0XIOv3-_2XtZeTuVb3Fiut9VgahEj6DZwnXQ-UCzWqQc5Y8xyl0YQZWou6x3kD-eiNF8hvHBOcGr-zps6EjQ4LCpyJ0pESDHAniu-jYeZCgfX/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;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;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="200" height="250" 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>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();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;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 trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;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;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;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="tutorial-onlineku"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="tutorial-onlineku_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlFEgdVtqDIl14JAmIG_l6IBAY72NZny0XIOv3-_2XtZeTuVb3Fiut9VgahEj6DZwnXQ-UCzWqQc5Y8xyl0YQZWou6x3kD-eiNF8hvHBOcGr-zps6EjQ4LCpyJ0pESDHAniu-jYeZCgfX/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcE1Bmt7_R632OUdS9vbRFMK8SaPJBqZq2A5_g4tzgOmgz16nJ4xuOSOnOlu6QNCLyNeVdXnoViPWJ42rpyW693CLjD5MKwXJx0hSe-kUy4BsZi0ANhGtvR1QG4s1S0dPnbCneKGp7Ig/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcE1Bmt7_R632OUdS9vbRFMK8SaPJBqZq2A5_g4tzgOmgz16nJ4xuOSOnOlu6QNCLyNeVdXnoViPWJ42rpyW693CLjD5MKwXJx0hSe-kUy4BsZi0ANhGtvR1QG4s1S0dPnbCneKGp7Ig/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="tutorial-onlineku_img" src="'+thumburl[r]+'"/><br/><div style="width:132px;padding:0 10px;color:#333;height:35px;text-align:center;margin:0px 0px; font:14px PT Sans Narrow; line-height:16px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<script src='http://tutorial-onlineku.googlecode.com/files/carousellite.js' type='text/javascript'/>
7.Cari code <body> lalu copy dan simpan code di bawah ini tepat di bawah code <body> Codenya sudah saya parse jadi kalian ngak usah repot memparsenya biar siap pasang.(hasilnya akan tampil di atas header blog)
8.Atau mau di simpai di bawah header blog..?Cari code <div id='content-wrapper'> lalu copy dan simpan code di bawah ini tepat di bawah code <div id='content-wrapper'> Codenya sudah saya parse jadi kalian ngak usah repot memparsenya biar siap pasang.(hasilnya akan tampil di bawah header blog)
Ket:Code di bawah ini sudah saya parse agar bissa di simpan di dalam script Html blog kalian,Tapi jika anda mau parse code html yang lain anda bisa parse ( disini ) Pilihan dimana anda mau menempatkan slidernya terserah anda..
<div id='crosscol-wrapper'>
<div id='crosscol-wrapper'>
&lt;div id=&#39;carousel&#39;&gt;
&lt;div id=&#39;previous_button&#39;&gt;&lt;/div&gt;
&lt;div class=&#39;container&#39;&gt;
&lt;script&gt;
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
&lt;/script&gt;
&lt;div class=&#39;clear&#39;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&#39;next_button&#39;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
&lt;/script&gt;
</div></div>
9.Save tamplate anda dan lihat hasilnya jika ukuranya ngak sesuai silahkan anda robah ukuranya sesuai dg tamplate anda sendiri,Selesai dan smoga sukses...
Nb.Code scrip no 7 atau yang di atas ini yang menentukan di mana anda mau menempatkan posisi slider entah itu di bagian header blog atau di bagian bawah header blog
0 comments:
Post a Comment
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).