Cara membuat slider berdasarkan label

Membuat slider di dalam blog ,Cara membuat slider berdasarkan label
Slider adalah suatu fitur berupa untuk menampilkan cuplikan gambar atau postingan di blog/website
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

Cara membuat slider label
Slider bermacam-macam variasainya ada slider post , slider gambar dan juga slider label/kategori, nanti jika ada waktu akan saya bahas satu persatu , untuk kesempatan ini blogger wonogiri akan menyajikan Cara membuat Slider berdasarkan label/kategori.

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/kategori postingan anda

Cara membuat slider berdasarkan label/kategori

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/AVvXsEie9PpApbEOmpMOyWvLsszAwmO1O1rCQIexvca42mo3-YkTekiksNuyEdkvNjTwosrw1GwZ-w5C7olg-jeOKvHP_zw-FEtvmwfUilhIH3APQWkusRmZZCHZtQDVPuFvZsevQjTfPD3zEG0/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPlXheAiC7TV_bSh5QnLXwqehLXHGOtPuxYULuj6RGTzsZSpJuzPu-T4DGkWTCiDtWp_7QodJCV06BQcbvOoWX_5lb92I1-DLlTtPZnAaGltlL9EAEvlD-5EFRWPMvBIdRI5p0DKE5O0Y/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/AVvXsEj1s3xeHyZWOyrJ2h_Nydm33a0ORYydMVyOlvPuzDoVdAe1eKZoab-EaY-kdiBZWCxH4Vj-yKnlkNN5E_SlcSlLc5BcN-XcC6c5A8EbPSEXz9zZKt5sdoUaMqxkXcmVsvtCMXasRhTAPvg/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63o9-0BfLfomFw5iQlDuebPbiGg9xdTgg7YmiIz2ViCsaUsItSD1cSOumE1JTg9Y4ePsVoB-xE9FQT7x9RD2L3JKC7mZewLRdPDtwlXqMeGAahkdjSqViL4LiCPLXFmI__-56sRERN5M/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/AVvXsEjfwBFiGmkJCm2c6bJfeKaVI_vE3aI0sjgfImJLBlMU9566c_wF4v-6rqY915a4atk_8Xu3Zo9umDMXfz7yb_BR7bZMKJZs_h0BrqLSFjjx94q-t4olSltmg_yGRTrZBoVpNs6-7iponqo/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/AVvXsEgLWX-KqhcuxN4Tuyd3q_ejkMbW8iOoFuH6w1OLZteER82qBQjXpDNNUOjeMgD6WM31oLP1LejwXu5lSwVEwaxroMS782HoBAa9ghn_bn274-9yOHM38_SZHvmKVb2UZ_Ex_pmlhBNkyiU/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/AVvXsEhSztG3sYW7is-HSzwT2Xy5vVp4vE5mgW8GRPPUWxAXDeYx_G1MUiKhOHs3ry0T_LVZA0lLXiqNahyphenhyphenXR2huWKwy9H3hlrz7AyDrWppbbjkw77vr53hU6oVyK3TUi5hr8eWtRxzYAJgUgIQ/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 17;
label1 = "Blogger wonogiri";

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 ini Blogger wonogiri itu sebagai Nama 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 wonogiri tentang cara membuat slider berdasarkan label kategori bisa dengan mudah di terapkan buat sobat blogger dimanapun berada.

Baca Juga Cara membuat contac form
selamat mencoba...