membuat slider postingan dan gambar

membuat slider postingan dan gambar
Slider adalah seperti yang sudah saya tulis pada postingan ku yang lain cara membuat slider berdasarkan label , slider kalau saya mengartikan adalah sebagai tambahan ruang / kolom untuk menampilkan cuplikan gambar-gambar atau cuplikan posting disertai gambar yang ada dalam postingan tersebut dengan secara otomatis

fungsi lain dari slider kalau menurut saya akan menambah unik tampilan blog dan juga akan membantu mempromosikan postingan sendiri di halaman home sehingga pengunjung blog pun akan lebih cepat melihat apa saja artikel di dalam blog tersebut.

kali ini saya akan memberikan panduan cara membuat slider postingan dan gambar , untuk contoh slider gambar di sertai postinganya seperti pada gambar di atas
cara pembuatanya silahkan simak di bawah ini

Cara membuat Slider postingan dan Gambar
1.buka blog anda lalu login
2.pada menu dalam 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/AVvXsEjp1_gGj0_GxoqMJO0CDxn-MW0CML1eP7DSaSBpyqXEeAXkFMcALAyg6fS5ephIbKbisH8ElanhQeU6xF05-4EExwrzSwNqQMl0PhfKjSewbreBQrPKP-YXwq56LykjEr1R1sIoDTnGTH8/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/AVvXsEgm9zQdLdZvSAU41es3GIMPTzmy2mW7yyZ9jIEG36jIgWK1Q6Velc4LQhI4IjBIP5BI87rvK6v-EcTdNlEmXvCNqlaipD5snf4qHmgdNBLH00aK5sFFFh-iv4loU0Nw75LcqXBJE5nvLpo/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/AVvXsEgnN5D-fGHwu8UyqHNOjGDo7KKrIqedzH1k6RwAgAsxtQwjS_8bFT88Rs5INyxH-OThRs1w9YTpAtv1cBeM3ZR7xLywwFL6NRoNnu0MteMx4RzHVHE2XVgjWmWum79Qfshlo1U407axxcw/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...

Tambahan :
pada dasarnya dengan cara di atas sudah jadi / sudah selesai Tampilan slider posting disertai gambarnya , namun jika anda mau merubah jenis postinganya berdasarkan label anda bisa merubahnya , caranya di bawah ini

cari di dalam kode yang ke tiga kode ini /feeds/posts/default?max-results , lalu tambahkan dengan label yang di inginkanya sehingga contohnya akan menjadi seperti ini /feeds/posts/default/-/google adsense?max-results

Tampilan slider pada blog berbagai macam untuk menambah keunikan blog dan tentunya fungsi yang lainya juga memberikan cuplikan isi postingan di dalam halaman Home , seperti tampilan slider yang lainya yang sudah saya buatkan panduanya Cara membuat slider berdasarkan label

dengan mengikuti panduan di atas cara membuat slider postingan dan gambar saya yakin sobat blogger akan berhasil membuat slider postingan disertai gambar