Cara Membuat Slide Bar di Blog Secara Mudah

Untuk memasang slider di blog Anda cukup mudah asalkan membacanya secara urut dan keseluruhan. Karena kebanyakan kalau membaca itu di ambil isinya saja. Itulah yang menyebabkan sulit dalam melakukan percobaan tersebut. Langsung saja cara untuk membuat slide bar di blog.

Berikut hal yang harus diperhatikan :

1. Masuk atau Login di blog Anda.

2. Pilih Template dan klik Edit HTML.

3. Setelah masuk di kode HTML lalu cari kode ]]></b:skin> untuk lebih cepat tekan ctrl+f dan pastekan kode di bawah ini di atas kode ]]></b:skin>. Untuk menghindari kesalahan dalam membuatnya sebaiknya backup template Anda terlebih dahulu.

#featuredSlider {background:#fff;float:left;margin:0; padding:0 0 10px;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;border:1px solid #fff; width:99%; position:relative;color:#666;}

#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}

#featuredSlider .container {height:266px; margin:0 10px 0 0;overflow:hidden; position:relative;}

.featuredTitle{padding-top:15px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}

.featuredTitle a{color:#f7441a}

.featuredTitle a:hover{color:#000}

.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}

ul.pagination {list-style-type:none; margin:0 auto; padding:0;}

ul.pagination a { float:left; margin:0 5px; display:inline; }

ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKVpfD2xOdME7oFnGqGYm7E8V0xRUzYmn6q9_mqt1gTFAy46j7ogskPZOhXZcsz-gP9XpW-6WTuv-NZFzwDlMKy8AKdVPUYwon9laF9SZjyv1LM2oaHmuFEplOpuOIGluieKaaeDId8ig/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }

ul.pagination a:hover { background-position:0 -12px; }

ul.pagination a:hover { background-position:0 -12px; }

ul.pagination a.activeSlide { background-position:0 -12px }

a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4aCyQEuDVX9Q0oLXM-4IlT4rm67y9BAnp3xJ5YCFGUjTSvCsK3T_WiG6nTCXnkA9r-SfFVkDnbYo2bXYjTFyuuVrshAz1C2KFVr2gZImcSXiX6GBX5WqxffLWGq_gxcjerJMJTpx9uQ/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;

border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}

a.readmore:hover {color:#ff0}

Seperti gambar dibawah

Keterangan : Bahwa kode yang dikasih warna adalah tinggi dan lebar slide bar secara otomatis. Jika Anda ingin membuat ukuran sendiri silakan diganti.

4. Kemudian cari kode </head> untuk lebih cepat tekan ctrl+f pada keyboard. Lalu pastekan kode dibawah ini di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoxkfHdIMXD37ZbcV5ZayTMWVtokcdq8u23Bvf3O39IFc0sm-vdabGwUH-diq3FtQSST_sPDaK33PmP22_oSpy1F1IcooSiJIZ3WVTN-0IKxH4Xl0-TwPVGQy9NaCGgqsBaq05uxMV2nE/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;
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('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 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;
 //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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="350" height="262" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
 document.write(trtd);

 j++;
}
    document.write('</div>')
}
//]]>

</script>

Seperti gambar dibawah

5. Langkah selanjutnya Anda tinggal memunculkan slide bar di tampilan blog Anda. Cari kode <div id='main-wrapper'> untuk lebih cepat tekan ctrl+f pada keyboard. Kemudian letakkan kode dibawah ini di bawahnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'><div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 3000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>           </div> <!--end .container-->
</div>

</b:if>

Seperti gambar dibawah

6. Untuk melihat hasilnya Anda tinggal save dan lihat hasilnya.

Semoga dapat mermanfaat badi Anda. ^-^ Selamat mencoba kawan....