Widget Recent Post dengan Thumbnails di Blogger V2 New Update



Widget Recent Post dengan Thumbnails di Blogger  New Update- Kali ini saya share cara menghias blog dengan memasang widget recent post dengan thumbnails di blogger v2 . Sobat blogger widget ini sudah banyak digunakan oleh sekian banyak para bloggers di tanah air kita . Tampilanya sangat menarik , berikut contohnya .



Bagaimana?Menarikkan? sobat blogger tertarik bukan? Kalo begitu langsung saja kita pasang Widget Recent Post dengan Thumbnails di Blogger ini, silahkan ikuti langkah langkahnya!




Langkah2 :
1. Buka dashboard > Design/Layout > Add a Gadget / Tambahkan Gadget.
2. Pilih HTML/Javascript.
3. Kemudian paste semua kode dibawah ke dalam kotak HTML/Javascript.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><style type="text/css" media="screen">
<!--
#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:258px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: show;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:show;margin:0px 0px;padding:0px 0px 2px 0px;}#spylist li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}.spydate{overflow:show;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;}
.spycomment{overflow:show;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}
--></style>
    <script language='javascript'> 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 = "http://i1179.photobucket.com/albums/x397/Dharmajaya/logo.png";text = "
Komentar";showPostDate = false;summaryPost = 40;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 10;home_page = "http://anaktimor-17.blogspot.com/";limitspy=5intervalspy=6000</script>
<div id="spylist">    <script type='text/javascript'>//<![CDATA[ /* * Script dikombinasikan dari bloggerstricks.com * spy effect dari jqueryfordesigners.com * Oleh Abu Farhan (www.abu-farhan.com) * Modifikasi oleh darmasite.blogspot.com */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>



Catatan :
Untuk menyesuaikan tampilan recent post dengan template blog, perhatikan dan ganti beberapa poin dasar berikut sebelum memasukkan script:
·                                 boxwidth = 258 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
·                                 text = "Komentar" adalah teks di belakang jumlah komentar, ganti Komentar sesuai keinginan, misalnya: replyscomment(s), dll.
·                                 numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
·                                 limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
·                                 intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.
·                                 home_page = "http://anaktimor-17.blogspot.com/"; ganti dengan URL blog sobat, ingat! diblakang com harus isi tanda / (slash)
4. Terakhir save! nah, coba sobat lihat sekarang hasilnya.

Comments

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online