Cara Membuat Widget Recent Post Keren Warna Warni di Blog

Widget recent post atau yang kita kenal dengan widget artikel terbaru berfungsi untuk memberikan informasi kepada visitor untuk membaca postingan terbaru yang ada pada blog tersebut.

Sebelumnya saya sudah pernah membuat tutorial modifikasi widget popular post keren dengan warna-warni seperti pelangi. Widget popular post ini merupakan fitur yang sudah tersedia di blogger oleh karena itu penggunaan widget ini jauh lebih banyak di bandingkan dengan widget recent post.

Berbeda dari widget popular post, widget recent post ini tidak tersedia pada fitur blogger, maksudnya adalah ketika Anda ingin menambahkan widget baru biasanya di bagian tata letak blog ketika Anda klik tambahkan gadget maka akan muncul widget-widget yang cukup banyak untuk bisa Anda gunakan pada blog.

Karena widget artikel terbaru atau recent post ini tidak tersedia di blogspot, maka kita perlu membuatnya dengan cara manual yaitu menggunakan sedikit bantuan kode JavaScript.

Jika Anda ingin mengedit tampilan widget recent post ini bisa Anda gunakan kode css, di sini saya akan memberikan kode css yang bisa membuat widget recent post terlihat lebih keren dari biasanya dengan warna warni seperti pelangi.

Jika Anda tertarik membuat widget recent post atau ingin memodifikasinya supaya terlihat bagus dan keren silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Widget Recent Post di Blogger

1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Kemudian Copy dan Paste kode JavaScript di bawah ini.

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>

4. Klik Simpan.

Catatan:
Anda bisa mengatur jumlah postingan yang di tampilan pada widget recent post, caranya cukup mengubah bagian kode numPosts = 10; silahkan ganti 10 dengan jumlah yang Anda inginkan. Namun saran saya tidak mengubahnya lebih dari 10 postingan.

Cara Modifikasi Widget Recent Post Keren Warna Warni

1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari kode ]]></b:skin> atau </style>.
4. Kemudian Copy kode CSS di bawah ini, lalu Paste sebelum kode ]]></b:skin> atau </style>.

/* Recent Post */
#recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul{margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after{content:"01";}
#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after{content:"02";}
#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after{content:"03";}
#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after{content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recent-wrapper ul li a{color:white;text-decoration:none}

5. Klik Simpan tema.

Catatan:
Kode CSS di atas berfungsi jika artikel terbaru atau widget recent post yang Anda gunakan tidak lebih dari 10 postingan, jika Anda menampilkan lebih dari 10 postingan pada widget recent post maka tampilannya tidak akan terlihat keren lagi.

Code by Bung Frangki

Itulah artikel mengenai cara membuat widget recent post keren warna-warni di blog, caranya cukup mudah bukan? selamat mencoba dan semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini