Cara Membuat Widget Recent Post Sederhana

Tuesday, January 9, 2018

Cara Membuat Widget Recent Post Sederhana - Recent Post atau Postingan terbaru adalah suatu hal yang menampilkan artikel-artikel terbaru dari blog kita. Nah kali ini saya ingin membagikan Cara membuat widget recent post sederhana. Caranya cukup simpel dan juga tampilannya recent postnya sangat sederhana dan ringan, kenapa sederhana dan ringan? karena hanya menampilkan Judul Postingan saja tanpa adanya embel-embel Gambar Thumbnail ataupun cuplikan teks konten seperti yang ada pada widget Postingan Populer. Untuk lebih jelasnya silahkan liat gambar dibawah ini.

Baca juga

Widget Join this site sederhana pakai banget

Widget Subscribe via email yang keren

Bagaimana? Sangat sederhana sekali bukan heheh. Jadi bagi yang berminat untuk memasang widget ini di sidebar blognya, silahkan disimak baik-baik langkah-langkah yang akan saya paparkan dibawah ini :

1. Login ke akun Blogger anda terlebih dahulu

2. Masuk ke Menu Tata Letak atau Layout

3. Klik Tambahkan gadget dan pilih HTML/Javascript

4. Copy dan Paste kode dibawah ini

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://pendidikan-bareng.blogspot.com/",
numPosts = 5;
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" rel="nofollow">'+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>

5. Terakhir klik simpan dan liat hasilnya.

Catatan :

Teks warna Merah adalah URL blog yang ditujukan

Teks warna Biru adalah Nilai dari jumlah yang ingin anda tampilkan di recent postnya nanti

Semoga Cara Membuat Widget Recent Post Sederhana ini dapat bermanfaat bagi anda, diakhir kata saya ucapkan Terima kasih atas kunjungannya.