Cara Mudah Membuat Widget Recent Post Simpel di Blog

RISWAN.NET - Cara Mudah Membuat Widget Artikel Terbaru Simpel di Blog, Widget recent post atau biasa disebut Widget Artikel Terbaru adalah salah satu widget yang wajib dipasang pada sebuah blog, widget ini menampilkan artikel-artikel yang terakhir dipublikasikan.

Oleh karenanya dengan dipasangnya widget Recent Post dapat sekaligus mempromosikan artikel yang baru dipublikasikan, sehingga lebih cepat mendapatkan views.

Pada kesempatan kali ini saya akan berbagi cara membuat widget recent post simple dan keren, pada widget recent post ini hanya menampilkan judul artikel dan ditambah numbering yang terletak di sebelah kiri membuat widget recent post ini terlihat keren.

Sobat dapat melihat demonya terelbih dahulu di bawah ini, atau juga lihat widget recent-post yang Riswan.net Gunakan di Sidebar.

See the Pen PxpwRE by Riswan Net (@deniriswana) on CodePen.

Bagi yang tertarik langsung saja ke tutorialnya, yuk simak Cara Mudah Membuat Widget Recent Post Simpel di Blog di bawah ini.

Membuat Widget Recent Post Simpel

Pertama silahkan Login ke Blogger sobat, kemudian pilih Menu Tata Letak, lalu tambahkan Gadget di bagian Sidebar.

Pilih HTML/Javascript, kemudian paste kode di bawah ini ke dalam widget

<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://www.riswan.net/",
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>

Jangan lupa untuk merubah https://www.riswan.net dengan alamat situs sobat, sobat juga dapat merubah jumlah artikel yang tampil pada widget recent post ini dengan merubah value 10.

Apabila sudah selesai lansung Simpan, lalu silahkan cek hasilnya. Sampai sini sobat sudah berhasil memasang widget recent post simpel dan keren di blog, mudah bukan?

Baca Juga: Cara Membuat Slot Iklan Banner Keren di Blog

Demikianlah artikel mengenai Cara Mudah Membuat Widget Recent Post Simpel di Blog, semoga dengan tutorial blogging singkat ini semoga dapat membantu sobat dalam editing tampilan blog dan dapat meningkatkan peforma blog.