Recent post adalah adalah ujud lain dari thumbnail dan snippet home page blogger yang di olah secara singkat dari isi posingan blog secara berurut di mulai dari yang terbaru, untuk melengkapi tutorial pemakaian tema blogger editblog mungkin ada yang tertarik menambahkan widget ini ke dalam tema blog. Jika tidak abaikan saja.
Cara pemasangan recent post sangat mudah tingga masuk ke pengaturan blog masuk ke lay out pilih HTM/Java script kopi pastekan saja kode dibawa ini kedalam kotak widget HTM/Java script tadi:
Setelah HTML/Javascript kita pilih akan muncul kotak dialog widget yang dapat ditulis atau di pastekan kode seperti ganbar dibawah ini:
Kopi pastekan kode dibawah ini kedalam kotak widget tersebut:
 |
| Image recent post pada side bar editblog |
<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... Baca selengkapnya..";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"></script><a style="font-size: 9px; color: #E6E6FA;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#FF69B4;background:#E6E6FA; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}</style></div>Demikian cara membuat widget recent post yang responsive dan ringan. Selamat ngeblog!
Related Posts
- CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT DAN MENGGANTIKANNYA DENGAN TOMBOL SHARE RESPONSIVEGambar tombol Share pengganti pada blogspotTombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini:Terlihat kecil dan mon ...
- BLOG FOR TEST: INTRODUCE MY NEW SITEThis new blog for testThere is no big deal even how hard I try to concealed and in the back door: We are fool when we think we has been done with the ...
- 7 LANGKAH MEMBUAT TEMPLATE SEDERHANA BAWAAN BLOGGER MENJADI RESPONSIVE DAN MOBILE FRIENDLY (LANJUTAN)Pada tulisan sebelumnya saya hanya memberikan contoh bagaimana mengubah tampilan template bawaan blogger "sederhana" menjadi :Menyembunyikan tampilan ...
- CARA MENGGUNAKAN TEMPLATE EDITBLOGTEMA UNTUK DIPAKAI SENDIRI SECARA GRATISJika kita belum berniat atau mampu membeli tema blogger, sedangkan tema bawaan jika tidak di modifikasi dengan benar akan kelihatan sangat standar. M ...
- HOW TO CREATE COOLEST LOGO IN YOUR BLOGFirst you must know how important any logos in a blog. It is like a kind of a short impression to representative your mission in a blog. People will ...
- MEROBAH GAYA DAN UKURAN FONT POSTINGAN BLOG DENGAN OPSI CSS PADA BLOGGERMungkin yang kami kemukan hanyalah masalah kecil bagi sebagian teman teman blogger. Akan tetapi baik gaya maupun ukuran font cukup berperan besar pad ...
Terimakasih tutornya bang.. otw tes dulu.
BalasHapusSilahkan😊
Hapus