Cara membuat slider berdasarkan label

Membuat slider di dalam blog ,Cara membuat slider di Home berdasarkan label
Slider adalah suatu fitur berupa kolom ruang untuk menampilkan cuplikan gambar atau postingan di halam beranda suatu situs
selain untuk menampilkan cuplikan-cuplikan gambar ataupun postingan slider juga akan menambah variasi tampilan blog menjadi cantik menawan hati , seperti apa sih tampilan slider itu , silahkan lihat pada gambar di bawah ini sebagai salah satu tampilan slider yang ingin saya bagikan disini

Tampilan slider ini hanya tampill jika sedang membuka halaman home tapi jika pindah membuka halaman posting otimatis ruang slider nya akan hilang jadi tidak akan membuat penuh laman blog dan meenurut saya juga indah sih

Cara membuat slider ini bagi yang sudah mahir akan terasa gampang tapi jika masih tahap belajar maka perlu di perhatikan di simak dengan teliti supaya pembuatan slider nya berhasil
Slider ini akan otomatis menampilkan postingan beserta gambarnya berdasarkan Label

Cara membuat slider berdasarkan label
1.buka blog anda lalu login
2.pada menu dashboard blog pilih Template
4.lalu klik EDIT HTML dan cari kode ]]></b:skin>
5.selanjutnya kopi kode di bawah ini dan pastekan di atas 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/AVvXsEibBoM5sFpq3_pkpqE_SYFXrp6rfb-AkyevAGvdq2IP3RjVlQ2ghy6suQ-Fow9AgZf91Rf9SrRR95CYNsGUgbOP-nwMVkcGgu6-Nj1YqpTHAV5vkmV5-DI_xkaKZwzgT7shWAAVJvOfo0w/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQT3vAkVOikdUAmVovgnYMAfxZPnzmUhSS5Y-I4kxFomiMZUmoIJJxk0yA4L4ZnyKVuVqvaigpbs2s4wtm4YicpSF97ETihv9Evlj7z3eDWo1ofwfrAB41ZueQ2SkNd1ewndDOW7pTVDw/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/AVvXsEjZAmqRmpJfsxQUGhyGCS8_7DhsYcv5PUaU_M9QeLWDWCAwep-MXRzSRD1O6H_DglWfqRAzRDG8eaXW3RgEVQHdFyulaInw85taYLNUwQNcyi4UMlwFEw4qxrPFv0zxEgjzE6kFPjOxmPw/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxi-b4L5Ti_g02aCbI0EkSSMLITbqP-qKxODlsH3UhnUQKauK9cWZo6Bb6mBpjKP1HTXVj6ElmVFGQ8uYDNQpN0eaWxjV5WHF4AJ63OzT9YD-rDCVW_5i_PxMpnFl4Yb66Pyk5hZ0nVyI/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/AVvXsEhBRFU87pUSj8c0CkmOhMySviVqouZlZpASTQ6OE6-hkN6hMhVwJMtQ3SztKTB9CP_Okzk7w2EUXdnMZKrGzIDXteQ8GefnSF6JFGWgP7Z2okG-1AfW7vBKDngZLKSllrURGhKcMqfTq4Q/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/AVvXsEhHJOG3yy9gIvPWZ_j4App9fweGtLvvTHYRIJcPEu_PmR41JUO6fYQTLO29WAqZRDH2751tAYTIFqSkEXy4JD_Y4VqvrstbwGVjbIcPu8DjyBAYmqSJAH-i1ouVmAy27QfWdCrGFlNkI4s/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}

5.kopi lagi kode di bawah ini dan pastekan di atas kode </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnN5D-fGHwu8UyqHNOjGDo7KKrIqedzH1k6RwAgAsxtQwjS_8bFT88Rs5INyxH-OThRs1w9YTpAtv1cBeM3ZR7xLywwFL6NRoNnu0MteMx4RzHVHE2XVgjWmWum79Qfshlo1U407axxcw/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 17;
label1 = "Jasa Adsense";

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>

Keterangan :

• dalam kode di atas ( kode ke dua ) tulisan warna biru yang ini http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js jika di dalam kode HTML template anda sudah ada kode seperti itu silahkan di hapus saja
• Tulisan warna merah pada kode di atas ( kode ke dua ) tulisanya seperti ini Jasa Adsense itu sebagai label nya jadi ganti dengan label anda

6.seterusnya kopi lagi kode di bawah ini ( kode ke tiga ) lalu pastekan di atas 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>

7.jika sudah selesai simpan template anda
8.selesai...

keterangan 

• kode yang ke tiga ini sebenarnya bisa di taruh di atas menu vavigasi atau di bawah nya bahkan bisa di letahkan di kawasan helder atau footer , tapi hal ini jika mau memindahkan silahkan hati-hati meeletahkan kode nya jangan sampai memotong kode yang lainya

Semoga panduan Blogger dari jasa pembuatan website tentang cara membuat slider berdasarkan label bisa dengan mudah di terapkan buat sobat blogger dimanapun berada
selamat mencoba...