Kamis, 10 November 2016

Menambahkan Widget Recent Post / Artikel Terbaru Pada Blogger Dengan Tumbnail Super Keren


Cara menambahkan widget recent post pada blogger
Add caption


Seyogyanya sebuah blog bertujuan agar blog tersebut ramai pengunjung dengan menyajikan isi yang berkualitas.

Akan tetapi, kualitas konten saja tidak cukup agar pengunjung blog betah berlama - lama mengunjungi blog yang kita punya.

Seorang blogger tentunya harus mampu memberikan tampilan yang indah, bersih, dan enak dilihat bagi pengunjung blognya.

Hal tersebut agar visitor merasa nyaman saat sedang membaca isi tulisan yang disajikan di dalam blog milik kita.

Nah, salah satu hal yang akan saya bagikan disini adalah salah satu penunjang agar tampilan blog terlihat semakin indah dengan widget recent post dengan tumbnail yang super kece.

Cara menggunakan widget recent post untuk blogger dibawah ini yaitu dengan menambahkan widget html pada menu tata letak di dashboard blogger kemudian copy paste kan kode dibawah ini. 

Kalo sudah tinggal disimpan saja. Lalu cek hasilnya.

<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = true;var posts_date = true;var post_summary = true;var summary_chars = 40;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://www.caraseven.blogspot.co.id" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.recent-posts-container a{text-decoration:none;}.recent-post-title {margin-bottom:5px;}.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}.recent-posts-details a{color: #777;}</style>

Selamat mencoba.

On : " menambahkan widget recent post pada blogger "

0 komentar:

Posting Komentar