Cara Membuat Widget Recent Post di Blog - Hai sobat, pada kesempatan kali ini saya akan membagikan tutorial tentang Cara Membuat Widget Recent Post di Blog.
Recent Post memudahkan pengunjung yang baru pertama kali mengunjung blog kita atau pun yang sudah sering mengunjungi blog kita untuk melihat artikel yang baru saja kita posting. Recent Post ini sudah ada dihalaman utama blog kita. Namun ketika kita mengunjungi salah satu artikel, kita tidak bisa melihat recent post ini. Nah disini peran widget recent post, pengunjung bisa melihat artikel yang baru tanpa harus ke halaman utama blog kita.
Recent Post ini tidak harus ada diblog, tapi tanpa recent post ini kaya ada yang kurang. Recent Post ini tidak membuat berat loading blog, karena recent post yang saya bagikan ini sangat simpel. Jadi sobat tidak perlu mikir dua kali untuk memasang widget recent post ini.
Oke langsung aja disimak tutorialnya :
- Buat widget baru
- Pilih HTML/Javascript
- Copy code berikut
<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;transition:all .3s;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts:hover{padding-left:3px}
li.recent-posts a{color:#4F4FFF;}li.recent-posts a:hover{color:#FF4F4F;}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.domain.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>
Ganti domain.com dengan domain sobat. Untuk ganti jumlah postingan yang akan ditampilkan, ganti numPosts = 10
Kalau diblog sobat belum ada jQuery, silahkan tambahkan link berikut sebelum tag </head>
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Cukup sekian tutorial tentang Cara Membuat Widget Recent Post di Blog. Kalau ada yang mau ditanyakan silahkan tinggalkan komentar.