Cara Membuat Slider Berdasarkan Post di Blogspot

Kali ini saya akan berbagi tips cara membuat slider pada blogspot, mungkin sebagian besar blogspot tidak menggunakan slider terkadang dapat memberatkan blogspot itu sendri. Namun blogspot yang menggunakan slider akan lebih menarik dari pada blogspot yang tidak menggunakan slider. Selain itu blogspot yang menggunkan slider image akan terlihat lebih keren gitu loch, akan dilihat oleh pengunjung terlihat lebih menarik dan memudahkan pengunjung mengetahui apa saja isi yang terdapat pada blog tersebut. Langsung saja saya gak perlu panjang lebar bercerita yuk ke TKP.

Inilah langkah-langkah cara membuat Slider Image Post-nya Pada Blogspot:

1.Login ke blogger dengan akun Anda
2.Masuk ke template > Edit HTML, kemudian centang expand widget templates
3.Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan, sebaiknya backup dulu template anda.
4.Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;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/AVvXsEiZGMBdsax0x3SzMcKqCZOIV8l_SKpXN5iJtJqvNWu873Ha5NlXiPYxijZU0yuSErvmBZiUWBAjMTPKyYKq-7pScZXaxDxpudcerpx3RN-8JzCZbBYo4bXQ-5jGf2PsdaOKBpLr8FkD7qk/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/AVvXsEgX5v56B-si_fvrQuQyF5z7FGm_8tn89KRl6tcpqSvDrrJzzcDf0p-HD5As65hfjtaK826VyKgSrK1sKnITaLZVVDNXMHHXftnZmXvMazY1TOwXotwUrHuA41sqKUeBHNgocWJJnh5xW_g/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}

Perhatikan kode yang berwarna biru di atas adalah untuk mengatur lebar dan tinggi slider-nya silahkan untuk disesuaikan dengan keadaan template anda.

5. Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery.innerfade.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBz9dd3Nvwj2GvLXtkailTZb7ubcZaPl3NhOsqwsUowR75YRbWcXkMC8b4B5jYSY9k-7MY4327PqK936YnJ8X7woNFWNJ4nD9sKtM11FQDHBYDATIYYDjb25BZxTzPuGT4ZvCUeqskYB8/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="340" height="212" 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>

Perhatikan kode yang berwarna merah itu adalah kode jquery.min.js seri terbaru yang digunakan pada tutorial ini. Jika template anda sudah terpasang kode jquery.min.js  walaupun serinya berbeda maka tidak usah memasukkan kode jquery di atas.
Untuk kode yang berwarna biru di atas adalah tinggi dan lebar gambar pada slide-nya.

6. Langkah ke enam adalah memasang kode pemanggil Slider image post-nya. Cari kode <div id='main-wrapper'> dan letakkan kode dibawah ini tepat dibawahnya:

<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>

Jika anda ingin menampilkan slider perkategori tinggal ganti kode:

/feeds/posts/default?max-results

Dengan kode:

/feeds/posts/default/-/LABEL YANG INGIN DITAMPILKAN?max-results

 7.Klik save template.

Tweet

Description: Cara Membuat Slider Berdasarkan Post di Blogspot Rating: 4.5 out of 5

Reviewer: Anonim - ItemReviewed Cara Membuat Slider Berdasarkan Post di Blogspot

Ditulis oleh: Anonim, Pada : 04.59

Dapatkan artikel terbaru seperti Cara Membuat Slider Berdasarkan Post di Blogspot langsung ke Email kamu..!!!

Artikel Terkait :

Artikel Terbaru :