Cara Membuat Recent Post ala BungFrangki

Cara Membuat Recent Post ala BungFrangki

AdminBlog

April 09, 2017

Cara Membuat Recent Post ala BungFrangki - Recent Post adalah widget pada blog yang menampilkan artikel terbaru yang biasanya dipasang pada sidebar blog. Dengan memasang Recent Post, maka pengunjung dapat mengatahui tampilan postingan terbaru, sehingga artikel terbaru dapat mudah dibaca oleh pengunjung blog.

Recent Post merupakan widget yang paling sering dipasang pada blog selain Popular Post, kedua widget ini menampilkan postingan yang paling sering dibaca dan postingan terbaru yang berfungsi sebagai informasi kepada visitor untuk membaca beberapa artikel menarik lainnya.

Cara Membuat Recent Post ala BungFrangki

Oke jika Anda tertarik untuk memasang Widget Recent Post ini, bisa ikuti tutorialnya berikut ini:

1. Log in ke akun blogger Anda. Kemudian setelah masuk dashboard blogger masuk ke menu Layout atau Tata Letak
2. Klik Tambahkan Gadget pada bagian sidebar, lalu pilih HTML/JavaScript
3. Setelah muncul jendela baru, copy semua kode di bawah ini dan paste-kan di bidang konten/isi. Klik simpan.

<style type="text/css">
li.recent-posts:nth-child(1){border-top-width:1px!important}
li.recent-posts{background:#fff;margin:0!important;padding:8px 10px!important;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:#fd745c;font-size:14px}
li.recent-posts a {font-weight: 400!important;display: block;text-decoration: none!important;line-height: 1.4em!important;padding-right: 8px!important;}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){
var homePage = "//www.tipsryand.com/",
numPosts = 10;
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">'+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>

• DEMO

var homePage = "//www.tipsryand.com/", adalah link blog kalian
numPosts = 10; adalah jumlah post yang akan tampil dalam widget
Dan silahkan diganti sesuai keinginan kalian

Dan selamat, blogger anda sekarang sudah terpasang widget Recent Post Sederhana. Tentunya bisa mempercantik tampilan blog Anda dan meningkatkan kunjungan pastinya. Oke sekian tutorial sederhana dari Saya, semoga bermanfaat dan terimakasih

Tutorial Blogger • April 09, 2017