Widget Recent Post Berdasarkan Label dengan Gambar | RahmanCyber NET - Recent post merupakan salah satu widget yang menampilkan artikel terbaru pada sebuah blog. Dari beberapa literatur yang saya pelajari, recent post sendiri banyak sekali fungsinya, diantaranya yang paling populer adalah untuk mempermudah pengunjung menemukan postingan dari yang paling terbaru hingga ke postingan ke yang paling lama, artinya Recent Post ini bisa saya simpulkan sebagai Tampilan Postingan berdasarkan Waktu, karena postingannya di sortir dari yang paling baru.
{getToc} $title={Table of Contents}
Lalu sebenarnya untuk membuat Recent Post, dulu saya sudah pernah membahas di postingan lama, dengan materi yang sama, Cara membuat Recent Post Grid
Tapi itu udah sangat lama banget,sehingga saya memperbaharuinya di postingan ini saja, dengan lebih kompleks membahas cara membuat Widget Recent Post Berdasarkan Laber dengan Gambar di Tampilan Blogger terbaru 2020, kalian bisa terapkan di Postingan Blog maupun di Widget, artinya kalian tidak perlu pergi ke Pengaturan Editor Template.
Jika temen temen masih pemula dan belum mengetahui secara detail tentang bagaimana sih Blogger itu dan Bagaimana sih Cara membuat Blog, kalian bisa pelajari di Bahasan Saya Sebelumnya tentang Tutorial Blogger Tampilan Terbaru 2020 dari Dasar.
Kalian juga perlu mengetahui sejarah Blogger, ya tentu sebagai pengguna perlu tuh mengetahui cikal bakal berdirinya Blogger, Siapa sih penemunya? Sebelum di Beli oleh Google.
Kumpulan Widget Recent Post by Label dengan Gambar
Langsung aja ya visitor, berikut ini beberapa Recent Post by Label dengan Gambar yang bisa kalian pilih sesuai selera kalian masing masing.
Widget Recent Post dengan Background Warna Acak Bertingkat berdasarkan Label dengan Gambar
Widget ini bisa kalian pasang di Sidebar samping ataupun di Postingan Halaman Dinamis Blogger maupun Statis Blogger, Tampilannya begitu menakjubkan dengan tampilan seperti rangkaian kertas yang bertumpuk.
Untuk memasangnya kalian hanya cukup Copy Paste Code Widget Recent Post tampilan bertingkat ini
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_7SAy3Yu_GcjiAmFRTd1ZLWl8Akroi11LUEXB55yLZM8ExGtLklQfsGJrTRWH_nL52sguYPYh4vx9ZRhA2fErTJe4VfBZhs1OX9qSFV9x34i5JHV28nlszSQ2d4VA3oiGgG0LwkKyr4U/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 = 7;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/bahas blogger?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.rahmancyber.net" rel="nofollow">Recent Posts Label</a>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; } </style>
Yang perlu kalian ubah dari Widget Recent Post diatas adalah "var post_no = 7" bisa kalian ubah value "7" yang ada disitu dengan jumlah postingan yang ingin kalian tampilkan. Pada bagian penentuan label "/feeds/posts/default/-/bahas blogger?" bisa kalian ubah "bahas blogger" dengan label postingan yang telah kalian buat di blog kalian, misalnya "Teknologi" pastikan huruf besar kecil diperhatikan karena itu bisa menyebabkan tidak nampil.... intinya harus sesuai dengan nama label yang ingin kalian tampilkan, jika belum tau bagaimana cara mengkategorikan Blog, bisa kalian kunjungi bahasan saya sebelumnya Bagaimana Mengkategorikan Postingan dengan Cepat.
Widget Recent Post dengan Background Block berdasarkan Label menggunakan Gambar
Widget yang kedua ini masih Recent Post dengan desain Warna Warni, dengan tampilan yang bisa dilihat seperti tumpukan balok, karena memang tampilan recent postnya bertumpuk tumpuk.
Untuk memasangnya kalian hanya cukup Copy Paste Code Widget Recent Post tampilan block warna warni ini
 |
| Hasil Widget Recent Post dengan Background Block berdasarkan Label menggunakan Gambar Add caption |
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_7SAy3Yu_GcjiAmFRTd1ZLWl8Akroi11LUEXB55yLZM8ExGtLklQfsGJrTRWH_nL52sguYPYh4vx9ZRhA2fErTJe4VfBZhs1OX9qSFV9x34i5JHV28nlszSQ2d4VA3oiGgG0LwkKyr4U/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==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" 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==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(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_number = 7;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/bahas blogger?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.rahmancyber.net" rel="nofollow">Recent Posts Label</a>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
Gambar yang diatas itu sengaja saya tampilkan untuk memberi tahu kepada kalian, bahwa script ini bisa juga di pasang di Postingan Blog kalian entah itu dinamis maupun yang statis / page.
Setelah itu agak sama dengan yang diatasnya ini yang perlu kalian ubah dari Widget Recent Post diatas adalah "var post_no = 7" bisa kalian ubah value "7" yang ada disitu dengan jumlah postingan yang ingin kalian tampilkan. Pada bagian penentuan label "/feeds/posts/default/-/bahas blogger?" bisa kalian ubah "bahas blogger" dengan label postingan yang telah kalian buat di blog kalian, misalnya "Teknologi" pastikan huruf besar kecil diperhatikan karena itu bisa menyebabkan tidak nampil.... intinya harus sesuai dengan nama label yang ingin kalian tampilkan.
Widget Recent Post Flat berdasarkan Label dengan Gambar
Widget Recent Post ini lebih sederhana ketimbang kedua widget Recent Post diatas yang memiliki modifikasi warna warni, sehingga saya menjulukinya FLAT, haha walaupun sebenere yang diatas itu juga sama ya FLAT tapi lebih berwarna, kalo widget Recent post yang ini lebih ke pecinta kesederhanaan... hihihi mungkin sisi lain saya suka ini.
 |
| Hasil Widget Recent Post Flat berdasarkan Label dengan Gambar Add caption |
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px 5px;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; margin-left: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>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_7SAy3Yu_GcjiAmFRTd1ZLWl8Akroi11LUEXB55yLZM8ExGtLklQfsGJrTRWH_nL52sguYPYh4vx9ZRhA2fErTJe4VfBZhs1OX9qSFV9x34i5JHV28nlszSQ2d4VA3oiGgG0LwkKyr4U/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 = 7;
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/-/Bahas Film?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.RAHMANCYBER.net" rel="nofollow">Recent Posts Label</a>
Diatas sengaja saya screenshotkan tampilan hasil tidak saya letakkan di sidebar, disitu untuk menunjukkan pada kalian bahwa kode tersebut fleksibel, bisa ditempatkan dimana aja.
Oke...Setelah itu agak sama dengan yang diatasnya ini yang perlu kalian ubah dari Widget Recent Post diatas adalah "var post_no = 7" bisa kalian ubah value "7" yang ada disitu dengan jumlah postingan yang ingin kalian tampilkan. Pada bagian penentuan label "/feeds/posts/default/-/Bahas Film?" bisa kalian ubah "Bahas Film" dengan label postingan yang telah kalian buat di blog kalian, misalnya "Teknologi" pastikan huruf besar kecil diperhatikan karena itu bisa menyebabkan tidak nampil....
intinya harus sesuai dengan nama label yang ingin kalian tampilkan.
Widget Recent Post GRID GALLERY berdasarkan Label hanya Gambar Thumbnail
Nah pada Widget Recent Post yang ini, hanya Gambar saja, karena memang dinamai Gallery ya gan, jadi gak ada teksnya, sangat cocok buat kalian yang punya blog dengan Postingan Gambar, Wallpaper atau pokoknya yang di tonjolkan itu gambarnya Untuk Recent Post berdasarkan Label ini udah Responsive ya, jadi jangan khawatir.
 |
| Hasil Widget Recent Post GRID GALLERY berdasarkan Label hanya Gambar ThumbnailAdd caption |
<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 64;
var recentpost_title = true;
</script>
<script src="/feeds/posts/default/-/Bahas Teknologi?max-results=20&alt=json-in-script&callback=gallerygrid"></script>
<a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.rahmancyber.net" rel="nofollow">Recent Posts Label</a>
Selanjutnya Jika kalian Pengen mengubah Berapa Gambar yang mau ditampilin di recent post, kalian bisa ganti dibagian ini "/feeds/posts/default/-/Bahas Teknologi?max-results=20&alt=json-in-script&callback=gallerygrid" pada max-results=20 , silahkan diganti misalnya 60 , terserah... intinya itu fungsi buat ngatur berapa banyak thumbnail yang nampil. Terus apa lagi? pada bagian
var recentpost_thumbs = 64; itu fungsinya buat ngatur ukuran thumbnail, silahkan ubah sesuai keinginkan, tapi saranku silahkan ubah sesuai ratio, misal mau di gedein 2x lipat.. tinggal 64 x 2=128.
Jika pengen kecil lagi tinggal dibagi 2, 64 dibagi 2 = 32...
oke Visitor???
Widget Recent Post Thumbnail Bulat Berdasarkan Label
Nah ini sedikit modifikasi lagi, desain widget Recent Post Thumbnail Bulet, dengan warna biru yang memukau. Hasilnya akan nampak seperti ini
 |
| Hasil Widget Recent Post Thumbnail Bulat Berdasarkan LabelAdd caption |
<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/AVvXsEhq_7SAy3Yu_GcjiAmFRTd1ZLWl8Akroi11LUEXB55yLZM8ExGtLklQfsGJrTRWH_nL52sguYPYh4vx9ZRhA2fErTJe4VfBZhs1OX9qSFV9x34i5JHV28nlszSQ2d4VA3oiGgG0LwkKyr4U/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 = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default/-/Bahas Blogger?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 2px; border: 4px solid #2a9df5; border-radius: 100%;}
.recent-posts-container {font-family: 'Lobster', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #616662;background: #2a9df5;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 5px 5px 5px 5px; border-top: 2px solid #2a9df5;}
ul.recent-posts-container {padding-left: 25px;border: 2px solid #2a9df5; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 10px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-left:20px; padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>
Selanjutnya sebenarnya sama, kalian hanya perlu mengubah Variabelnya saja, kalo disini saya pakai 5 var posts_no = 5; kalian bisa ubah 5 dengan jumlah postingan yang ingin kalian tampilkan. Jangan lupa untuk labelnya juga "/feeds/posts/default/-/Bahas Blogger?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" ubah Bahas Blogger dengan Label kalian sendiri.
Cara Memasang Widget Recent Post di Sidebar
Ini adalah bonus ya... jadi sebenarnya caranya mudah, tinggal kalian pergi ke tata letak
entar kalian pilih tambahkan widget,
setelah itu silahkan pilih yang HTML/JAVASCRIPT
Lalu Copy Pastekan Kode di Postingan diatas itu pilihlah desain yang sesuai selera mu.. lalu kalo udah di Save..
Silahkan lihat Hasilnya.
Penutup Bahasan Widget Recent Post berdasarkan Label
Visitor, kiranya tutorialnya sekian ya, itu diatas merupakan Widget Recent Post yang bisa selain memperindah Tampilan Blog Kalian, juga dapat membuat Pengunjung mudah bernavigasi, untuk Script diatas semuanya internal ya kecuali Fontnya dari GoogleApis.
Moga dapat bermanfaat dan Stay Creative!
oh iya.. gambar yang digunakan di Project diatas ada 2... jadi fungsinya buat nampilin jika di postingan kalian tidak ada gambarnya..
Jadi cuman 2 Gambar diatas doang ya... ^_^
Jadi bingung mau pake yang mana
BalasHapus