Home » » Cara Memasang Slider Posting

Cara Memasang Slider Posting


Posted by Template Responsive Blogger Minimalis on Thursday 12 May 2016

Cara memasang slider posting di blog , slider posting sering juga di sebut deangan featured post.
Tampilan dari slider posting yang akan saya berikan ini contohnya seperti gambar di bawah ini

cara memasang slider posting

Cara Memansang atau membuat slider posting sangat mudah silahkan ikutin cara nya di bawah ini

1.buka blog anda , tentunya anda harus login ke blog anda masing-masing
2.lalu masuk ke dashboard blogger
3.kemudian pilih template dan klik lagi edit html
4.lalu cari kode </head>
5.kemudian kopi kode di bawah ini dan pastekan di atas kode </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/AVvXsEgzEEaee7pfGQxPM8k7kNssn_NdgrT2ruZV98KrGMrBJp0L58UY8lDvjc_M4EqfTfIa0JypBvjpAbElCIkj1PJ_ir4CdgzcpTfa43O3IrFgj-W1S5nuUTuJRaFoo4riiPcZa0fCeP17s5A/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/AVvXsEg7jIuN5r3HQYCDGDhsikiQshJBTmvjBNn_cM5QG8enUUx5jaj2uRwSSorPRGIEZ_TNTnEbm4xrF9FDMdd1AA8E-sQDunq5a5LVxkFMGQLUr6EWxW7SottzoY4Vgezw0KGosZFsIGDJtpM/s640/template+top+image+below+600+asli.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>

6.lalu kopi lagi kode yang di bawah ini dan pastekan di bawah kode <div id='main-wrapper'>

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

7.kemudian simpan template nya.
8.selesai.

Demikian panduan website cara memasang slider posting , semoga berguna.


0 comments:

Post a Comment

Kontak