Di artikel kali ini saya akan membuat recent post yang dapat membuat tampilan blog kalian lebih menarik serta mempermudah bagi viewer blog kalian membaca artikel-artikel terbaru dari blog kalian.
(Baca juga : Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar)
Recent post ini adalah widget yang paling sering dipakai oleh para blogger, karena widget ini dapat meningkatkan view pada suatu blog. Yang membuat recent post ini berbeda dari recent post yang lain adalah gambar thumbnail yang bulat serta setingan yang mudah.
Kenapa dikatakan mudah, karena kalian hanya cukup mengaturnya tanpa menambahkan link blog kalian. Jadi widget recent post ini bisa di gunakan secara otomatis.
Tidak usah panjang lebar langsung saja saya akan menunjukan Cara membuat widget recent post multi color keren di blogger, berikut adalah langkah-langkahnya.
(Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll)
Cara Membuat Widget Recent Post Multi Color Keren di Blogger
- Langkah pertama buka akun Blogger kalian.
- Pilih menu Tata Letak, pilih Tambahkan Gadget di sidebar kalian. Kemudian pilih HTML/Javascript.
- Di dalam widget konfigurasi, masukan Judul recent post kalian. Kemudian masukan script CSS berikut di kolom Konten.
<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/AVvXsEi6Ua_n4PIlAzY7pMRNims1wYrPBGMJUHIC-_6Gvq2tlSE7XYWIaK7jc9wE8vcCvc78md0JWQ_kSJ6O3KZxbAdwuTi9WtKsIBoSr0bSTBAknvjnR11hvgVGJiz6VethVBSmQ6XMJR8Ah7et/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 = 5;
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?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />- Pengaturan Widget :
- var posts_number = 5; ( Jumlah Postingan yang ingin ditampilkan )
- var showpostswiththumbs = true; ( Untuk menampilkan gambar thumbnail )
- var insidereadmorelink = false; ( Untuk menampilkan readmore )
- var showcomments = false; ( Untuk menampilkan jumlah komen )
- var posts_date = false; ( Untuk menampilkan tanggal postingan )
- Ketikan true untuk menampilkan settingan, dan false untuk menyembunyikan settingan.
- Setelah settingan selesai silahkan pilih Simpan.
Sekarang kalian sudah menambahkan recent post di blog kalian. Tentunya ini akan mempermudah para pemirsa blog kalian, dan kemungkinan artikel kalian akan dilihat oleh pengunjung blog kalian lebih meningkat. Untuk tutorial yang lain dari saya, tetap kunjungi https://trik-komtek.blogspot.com/.
Terima kasih sudah berkunjung di blog saya, jika ada pertanyaan serta kritik dan saran silahkan masukan di kolom komentar. Karena pertanyaan serta kritik dan saran dari kalian sangat berguna bagi saya dalam membangun sebuah blog.