Cara Membuat Recent Post Yang Sederhana Dan Simple

Tutorial gimana cara membuat sebuah widget recent post yang sederhana dan simple ,mungkin kalian yang gak suka blog kalian itu banyak gaya atau recent post yang terlalu bergaya mungkin kalian kurang suka kali ini saya akan memberikan sebuat recent post yang simple dan sederhana tapi keren lah yang banyak bacok lah ,kalau menurut saya terlalu keren widget recent post tidak berperngaruh pada pengunjung blog karna recent post yang sederhana pun banyak orang yang suka teruma saya juga sukan dengan yang simple - simple aja, berikut saya akan memberikan nya untuk anda widget recent post yang simple dan sederhana.

CARA MEMBUAT WIDGET RECENT POST YANG SEDERHANA


pertama kamu pergi ke blog kamu dulu 
lalu pilih menu template === > edit template
cari code javascipt atau </body> 
lalu copy code di bawah ini , pastekan tepat diatas code </body>

JavaScript

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

kemudian kita pasang code css nya , cari code </style> atau ]]></b:skin>
lalu pastekan code di bawah ini di atas code </style> atau ]]></b:skin>

CSS

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 10px;
    margin:0 auto;
    border:1px solid #ddd;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    text-decoration:none;
}
#recent-posts li{
    border-top:1px solid #ddd;
    padding:6px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>

kemudian kamu simpan template nya dan selesai

untuk dapat membuat recent post tampil anda pergi ke tata letak == > tambah widget
lalu anda tambahkan recent post nya oke.

sekian dari saya semoga bermanfaat untuk anda cara membuat recent post yang sederhana , semoga bisa ,sekian dan terima kasih.


EmoticonEmoticon