Caranya membuat slider postingan

ini dia caranya membuat slider postingan lengkap dengan gambar postingan
Slider adalah seperti yang sudah saya tulis pada postingan yang lain cara membuat slider berdasarkan label/kategori , dan kali ini blogger wonogiri akan membuat tutorial Cara membuat slider pots

fungsi dari slider post ini untuk menampilkan judul-judul postingan yang sudah di publikasihan , ini berguna untuk pengguna situs karena akan diperlihatkan artikel yang ada di web yang sedang dikunjunginya.

Contoh slider post dilengkapi dengan gambar yang ada di postingan seperti gambar di bawah ini

Caranya membuat slider post

1.login ke blogger anda masing-masing
2.pada menu dashboard blog pilih Template
3.lalu klik edit HTML
4.dan cari kode ini ]]></b:skin>
5.selanjutnya kopi kode di bawah ini dan pastekan di atas ]]></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/AVvXsEgL7r6yoi8G4SAUhORR25AKtKdpAZB2Sy0lAkgwyylZCeAGAmss1yVBOD-oUcZrU_4FwCHxlIysOa_whBdmKTCsxDH2cQhpajIl_cYtpMVxKXLU4VH1yiYEHG3tPmHKb3nfpb-hVm3NnUY/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/AVvXsEiTofhcMFe9yWMQSVy2dtVSRNZqY4aUraUEyyoqVCua5Bcr7G1c7TD4gFSJPsXtW-NTrWwrJtchy7LrjfC1hrzR-IOMEPHyg0K-IGZnTurjA7ZHwRiR4LblfV8hy3K9GNgomXGlut5VLtE/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 :
- angka merah pada kode di atas 640 dan 226 px itu sebagai ukuran panjang dan lebar , jadi jika tidak pas dengan template anda silahkan sesuaikan

5.kopi lagi kode di bawah ini dan pastekan di atas </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/AVvXsEhSztG3sYW7is-HSzwT2Xy5vVp4vE5mgW8GRPPUWxAXDeYx_G1MUiKhOHs3ry0T_LVZA0lLXiqNahyphenhyphenXR2huWKwy9H3hlrz7AyDrWppbbjkw77vr53hU6oVyK3TUi5hr8eWtRxzYAJgUgIQ/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>

keterangan :

• tulisan warna biru pada kode kedua yaitu kode ini http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js jika di dalam template anda sudah ada kode yang seperti itu maka jangan di sertakan ( hapus saja )
• angka 7 sebagai jumlah postinganya
• angka 340 dan 212 sebagai panjang dan lebar ukuran gambarnya

6.selanjutnya kopi kode lagi kode di bawah ini dan pastekan di atas 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/-/sport?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>

7.simpan template nya
8.selesai...

demikian  cara membuat slider post semoga bermanfaat , Baca juga Cara menambah 3 kolom widget di atas footer