Surya Bina Mitra: Trik Membuat Recent Post Thumbnail Gambar Bergerak Di Blog

Rabu, 05 Desember 2012

Trik Membuat Recent Post Thumbnail Gambar Bergerak Di Blog

Memiliki blog dengan garis tepi cukup lebar...
Kali ini saya akan berbagi trik blog yang berhubungan dengan posting khususnya recent post pada blog. Recent post adalah artikel posting yang paling terbaru dalam suatu blog. Adapun artikel posting yang di tampilkan biasanya berupa judul saja dari artikel maupun ada sedikit isi keterangan dari artikel yang kita posting, Dan semua itu bisa kita atur sesuai dengan keinginan kita.
Artikel posting ini saya dapat dari kukopas.blogspot.com

Mungkin juga anda tertarik dengan Artikel sebelumnya yang berhubungan dengan Widget ;

- Trik Membuat Kategori atau Label Bergerak

- Trik Mudah Membuat Widget Antik dan Bergerak Di Blog

- Trik Membuat Spoiler atau OpenHere Dengan Tampilan Menarik

- Trik Mudah Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog

- Trik MENYUSUN GAMBAR BANYAK DIDALAM POSTINGAN AGAR RAPI

Pada recent post yang sebentar lagi akan saya kasih triknya untuk sobat semua adalah recent post yang mempunyai fungsi menampilkan judul posting di sertai dengan thumbnail atau gambar foto, ada sedikit isi penggalan dari postingan blog dan juga mempunyai efek marquee atau slide berjalan teratur ke bawah. Artikel terbaru ini biasa juga di sebut dengan "Recent Post Thumbnail Bergerak Slide Ke Bawah".

Tampilan dari Recent post ini sangat bagus dan menarik, Sobat bisa melihat contohnya seperti pada gambar dibawah ini;

Contoh thumbnail Kategori

Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog yang sudah memasang Scriftnya, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> Ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih dan klik >> Tambah Gadget >> pilih dan klik tanda + pada >> HTML/JavaScript.
3. Kemudian silahkan sobat masukkan semua Kode Script berikut ke dalam kotak HTML/JavaScript.

Inilah scriftnya;

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:355px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:335px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 300;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 60;

thumbheight = 60;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Reply(s)";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = " http://kuc0pas.blogspot.com/ ";

limitspy=5

intervalspy=5000

</script>

//<![CDATA[

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;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[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>

</div>

4. Langkah yang terakhir. Setelah semua kode script di masukkan ke dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada halaman widget blog sobat sudah terpasang widget recent post thumbnail gambar bergerak slide ke bawah.

Keterangan:

• Ganti http://kuc0pas.blogspot.com/ dengan URL blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.

• text = "Reply(s)" adalah teks jumlah komentar, ganti Reply(s) sesuai dengan keinginan sobat, misalnya: komentar, comment(s), dan lain sebagainya.

• boxwidth = 300 adalah ukuran Lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog sobat.

• numposts = 10; adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat.

• limitspy=5 adalah Jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai dengan keinginan sobat.

• intervalspy=5000 adalah kecepatan scroll, spy atau slide dalam milisecond (ms), Silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.

Sampai di sini saya kira sobat pasti sudah faham tentang cara membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah di blog. Namun bila sobat masih mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

Sekian ..
Semoga artikel posting yang saya share ini bisa sangat bermanfaat bagi sobat Surya Bina Mitra.
Happy Blogging...

Edit ; wawansurya
Sumber;
www.affiliate-waones.com
http://mitra-sbm.blogspot.com/
http://mitra-sbm.blogspot.com/

merchant