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.
Cara Membuat Widget Recent Post Keren Warna Warni di Blog

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.

2 Komentar untuk "Cara Membuat Widget Recent Post Keren Warna Warni di Blog"

  1. Lihat kode-kodenya yang panjang gitu jadi pening sendiri. Tapi demi mempercantik blog harus dilakukan. Agar punya ciri khas tersendiri.

    BalasHapus
  2. keren sob, tapi puyeng juga liat code nya; lam kenal

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel