Halo semuanya, apa kabar? selamat datang bagi yang pertama kali bertamu ke blog sederhana kita ini, Pada Kesempatan ini kami akan memberikan informasi yang sangat keren dan unik tentunya, yaitu tentang Cara Mudah Membuat Widget Recent Post Simpel di Blog Terbaru yang semoga menjadi bahan bacaan yang inspiratif dan inovatif untuk diterapkan untuk kebutuhan anda, mari kita baca bersama ulasannya sampai selesai agar tidak ada kesalahpahaman diantara kita
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.
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?
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.