Cara Membuat Widget Recent Post Simpel di Blog

Nyampling ~ Cara Membuat Widget Recent Post Simpel di Blog. Pada sebuah blog jika kita baru memposting sebuah artikel maka akan muncul pada widget ini. Widget ini dinamakan sebagai Widget Recent Post atau biasa disebut Widget Artikel Terbaru adalah salah satu widget yang wajib dipasang pada sebuah blog. Salah satu fungsi widget ini adalah untuk mempromosikan artikel yang baru dipublikasikan, sehingga lebih cepat mendapatkan views. Karena artikel tersebut akan tampil pada halaman blog kita.

Secara default widget ini sudah ada di Blogger, tapi tampilannya minimalis dan juga polos tanpa pernak pernik lainnya. Sehingga bagi kita akan terasa bosan jika melihat bentuknya itu itu saja. Widget Recent Post ini terdapat berbagai macam tampilan, sehingga selain sebagai widget yang wajib harus ada, widget ini juga dapat mempercantik tampilan blog kita.

Cara Membuat Widget Recent Post Simpel di Blog

Nah, kali ini saya akan memberikan panduan atau tutorial tentang cara membuat Widget Recent Post di Blog yang simpel dan keren. Kenapa keren karena sudah ada ditambah warna background dan juga ada nmor artikelnya. Oke tambah panjang lebar lagi berikut langkah pembuatan Widget Recent Post ;

1. Silahkan Login ke Blogger >> pilih Menu Tata Letak >> Tambahkan Gadget di bagian Sidebar.

2. Pada kolom HTML/JavaScript, Tempelkan kode dibawah ini

<style>
/* Artikel Terbaru by Riswan.net*/
#recent-post {background:#1565c0;border-radius:0px}
#recent-post h2,#recent-post h3{background:#ffce41!important;border-radius:0}
#recent-post a:link, #recent-post a:visited{font-weight:normal}
#recent-post ul{width:100%;padding:0 0 10px}
#recent-post ul li {margin:0 !important;padding:8px 8px 8px 42px !important;position:relative;counter-increment:num;border-bottom:1px dotted #31c067 !important}
#recent-post ul li a {font-weight:normal !important;color:#fff !important;letter-spacing:0.5px;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important;padding-right:8px !important}
#recent-post ul li a:hover {color:#ffce41 !important;}#recent-post ul li:before,#recent-post ul li .item-title a{font-weight:300;font-size:12px;color:inherit;text-decoration:none}
#recent-post ul li:before{content:counter(num);display:block;position:absolute;font-size:20px !important;top:9px;left:10px;font-weight:bold !important;font-style:italic;color:#ffce41 !important}
#recent-post{margin:0 auto}
#recent-post ul li:last-child{border-bottom:none !important}
</style>
<div id='recent-post'>
<ul id="riswannet"></ul>
</div>
<script>
//<![CDATA[
// Atk Tbr by Riswan.net
var homePage = "https://isatsehat.blogspot.com/",
numPosts = 10;
function recentPosts(a){if(document.getElementById("riswannet")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("riswannet");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="riswannet"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Note : Jangan lupa untuk merubah https://isatsehat.blogspot.com dengan alamat situs sobat, sobat juga dapat merubah jumlah artikel yang tampil pada widget recent post ini dengan merubah value 10.

Screenshot pada saat menempelkan kode di widget

3. Kemudian klik Simpan. lihat hasilnya diblog kalian. Jika berhasil maka widget recent post akan muncul di sidebar blog kalian.

Penutup

Demikian sedikit postingan tentang "Cara Membuat Widget Recent Post Simpel di Blog"  Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.

Bagikan Artikel ini