Cara Memasang Slider Otomatis Keren di Blog

Cara Memasang Slider Otomatis Keren di Blog -
Untuk mempercantik tamplian blog bisa juga dengan "memasang slider di template blogger". Slider ada berbagai macam jenis dan bentuknya dan slider akan saya contohkan bagaimana cara memasangnya di template blog anda.
Keunggulan Slider dari seocips.com ini adalah slider otomatis dimana artikel terbaru kita otomatis masuk kedalam slider untuk di tunjukan misalnya di halaman homepage. Jadi anda tidak perlu memasukan link dan gambar secara manual seperti Slider-slider yang lain. tinggal memasangnya maka screnshot postingan anda akan di tunjukan dengan slider ini

Demo Slide

Jika anda tertarik, ini cara pemasangan slider otomatis di blog kalian.

• Masuk ke template

• Edit HTML

kemudian centang expand widget templates atau cari dengan CTRL+F lalu cari ]]></b:skin> atau </style>

Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin>  atau </style> .

/*Slider nyiaran.blogspot.com */
#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/AVvXsEh-dmvl_LlJOQz7nyHZmh646TNyE_boUS1tnJ-THgrRc8kC4uJYCLkxo_MWJBxMq6v9ZNlENA3WfrDhHZ95iyeaPW8CqNfQW3oMX5tvhmWmLwPo1GZrU14_pr2FJxpx2hSkhvvYfMIyqDE/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/AVvXsEhNFlwcEIbemCRSUfc1O8ixKSseUeRLr9-_GZ21reDVHbXLXKOUmWOxX7Mc6olEbNJiIbYMl8nMa8Jx_Z894AoskT-Z0qAX3RnSM85bqf7VwJRDFkygpNeZc_DpoIHVu1mi33RH2dCMgxQ/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}

keterangan : Kode yang di kasih warna di atas adalah lebar dan tinggi slider otomatis ini silahkan sesuaikan dengan template anda dan width:99% itu karna saya memasangnya di template responsive jadi saya mengganti kodenya dengan width:99% agar slidernya jadi responsive, jika anda memakai template biasa maka anda dapat mengganti kodenya dengan width:640px; ( angka 640 anda dapat menggantinya sesuai dengan lebar post di template anda.

Langkah selanjutnya, masukkan kode berikut ini diatas 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/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/AVvXsEigFChBOT9Lzld6p_0aAkBZJ27nnSX47QV_KMCcxLrKsdMBKccQ27EnhnxuEvzkDVqrxOv1FTYerBvFFpASxE6ElgaCryNnZYdRRhZzVY9brMba0QaoySkH16B2y6aEwefEEFs9y0cGY94/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>

Keterangan :

Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js . Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Kode warna biru angka 350 dan 262 adalah panjang dan lebar image yang ada di slider.

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini 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>

Sekarang tinggal Save tamplate anda dan lihat hasilnya.

Sekian mengenai tutorial Cara Memasang atau cara pasang Slider Otomatis Keren di Blog atau template blog blogger. Semoga tutorial di atas mudah untuk di kerjakan dan berhasil dalam pemasangannya.

Source: www.seocips.com/2013/11/cara-memasang-slider-otomatis-keren-di.html