Karsa Nusantara Karsanusantara.com adalah blog yang mengulas tentang Seputar Blogging, Wordpress, SEO, Bisnis Online, Teknologi, Traveling dan Media Sosial.

Cara Mudah Membuat Widget Recent Post Simpel di Blog

1 min read

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.

Baca Juga :  Apa Peranan Seo Untuk Perusahaan Atau Pebisnis Perorangan

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

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.

Baca Juga :  Perbedaan Pos dan Laman di Blogger

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 :  Memilih Pasar Sasaran Terbatas Dalam Hal Ini Tidak Semua Segmen Untuk Pemasaran Produk Baru Merupakan Strategi

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.

Karsa Nusantara Karsanusantara.com adalah blog yang mengulas tentang Seputar Blogging, Wordpress, SEO, Bisnis Online, Teknologi, Traveling dan Media Sosial.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  Never miss a story from us, get weekly updates in your inbox.

© 2022 Copyright Karsa Nusantara

KarsaNusantara Theme by BungMais.com