Blogger - Widget Recent Post

Blogger - Widget Recent Post

Unknown

Content [Open]

Alxbot Tools - Tutorial blogger cara membuat recent post di blogspot dengan tampilan menarik, seo friendly, ringan dan elegant. Widget recent post bisa membantu meningkatkan page view dan memberi daya tarik pengunjung ketika mengunjungi halaman blog kita.

Kali ini Alxbot Tools akan memberikan cara membuat widget recent post di bloger dengan menggunakan kode HTML/javascript, berikut ini contoh tampilan recent post yang akan kita pasang pada blog .

Keterangan :
Menampilkan hanya judul postingan, tanggal dan jumlah komentar sehingga tidak akan meberatkan halaman saat di muat.

Lihat juga widget recent post lainnya :
Widget recent post simple untuk blog
#Recent post widget blogger dengan thumbnail


Atau
Widget random post blog

Cara Pemasangan :

• Login ke akun blogger
• Tata Letak / Layout --> Tambah widget --> Kode HTML/javascript
• Copy kode berikut :

    <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(p){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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKipKrPti40COvD80UNQ9-tI8e547saeTrR2TgL_udTD7kU6BK5B0lL8LkRb4bCwz_s8x87OP3W5vrYapoSmP8Tivg_Qrkq6xbptp28vbQ5eClalJ_uTr4tmCPWk2qufYKiABcRVi3H8vE/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
    </script>
    <script type="text/javascript">
    var posts_no = 5;
    var showpoststhumbs = false;
    var readmorelink = true;
    var showcommentslink = true;
    var posts_date = true;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    <a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://bott-fb.blogspot.com/search/label/Blogger">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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
    .recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
    ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
    ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
    ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
    .recent-posts-container a { text-decoration:none; }
    .recent-posts-container a:hover{color: #4DACE3;}
    .post-date {color:#e0c0c6; font-size: 11px; }
    .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
    .recent-post-title { margin: 5px 0px; }
    .recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
    .recent-posts-details a{ color: #888;}
    a.readmorelink {color: #4DACE3;}
    </style>

•  Paste kode dan Simpan, selseai.

Itulah cara membuat widget recent post dan tutorial pemasangannya di blogspot tanpa edit tema blog. Semoga artikel Blogger - Widget Recent Post ini bisa membantu dan bermanfaat.

Unknown