memasang slider otomatis di blog

 memasang slider otomatis di blog

1. masuk ke blog anda
2.Pilih Template dan edit HTML
3.Letakkan kode di bawah ini d iatas </head>

<style>
#featuredSlider {margin:10px; padding:0 0 10px;width:96%; position:relative;border:3px solid #444;box-shadow:1px 1px 5px #666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0;}
#featuredSlider .container {height:246px; margin:0 10px 0 0; overflow:hidden; position:relative;}
.featuredTitle{padding-top:15px;font:16px Arial;}
.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;display:none}
a.readmore {float:left;border:1px solid #444;background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirg2tTGo2HLmltKWZxTzr8yMzrizBOunOI34r8OvpBE_usra52Ue5ewOkge_zNzXyxPpkZTPdbxkw1AO_GcP3-UtPYLoCZCq7YvEdxTMSvk1o8o-bSqpSBjorsOmGJB3k1MDV_biJKN_o/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}
                        </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/master/slider-otomatis-seocips-1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCppWl2MNyTnoc2XgV9JP0vw53E1L1jWWoC7P45EqJvFVE-jjmGX5pVq_RLYb8xWGwftsEKETGg-lzUWJDjs7cWHiYXPGpc_TL5XiWuhDRPRj0CNWv-ACBXMpjo4S6SF7EvX_dcPMmpSI/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>

setting

•  kode width 96% adalah lebar slider otomatis ini.,sesuaikan  dengan template yang sahabat gunakan
• kode warna merah diatas adalah kode ( jQuery.min.js ) silahkan dihapus bila sudah ada

 Memunculkan slider di blog 

Cari kode :
<div id='main-wrapper'>
Letakkan kode berikut 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>
</div>
</b:if>

Save Template

happy blogging