Membuat Recent Post | Artikel Terbaru Dengan Scroll

Membuat Recent Post | Artikel Terbaru Dengan Scroll - Menambahkan sedikit Informasi tips dan trik pada Blog ini, kali ini saya akan membahas cara Membuat Recent Post | Artikel Terbaru Dengan Scroll seperti pada blog ini. Dalam dunia blogger sudah banyak cara untuk membuat recent post yang menarik hingga menggunakan gambar, disini saya berikan cara membuat recent post sederhana tapi menarik dan tidak terlalu berat untuk loading blog. Langsung saja karena pastinya sahabat sudah mau mulai membuatnya. Silahkan Ikuti petunjuk yang ada dibawah ini.
Screenshot tampilan Recent Post bisa lihat dibawah ini atau samping kanan blog ini :

Screenshot Recent Post

Membuat Recent Post | Artikel Terbaru Dengan Scroll :

1. Silahkan masuk ke blog sahabat (dashbor)
2. Masuk ke Tata Letak
3. Tambahkan widget >> Tambah HTML/Javascript
4. Copy kode dibawah ini pada widget HTML/javascript tadi.
5. Simpan dan lihat hasilnya.

<div style="border: 1px solid rgb(181,214,202); height: 200px; margin: 10px 0pt 0pt; overflow: auto; padding: 8px; width: 280px;">
<script>//credit to hoctro
function rp(json) {
    document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
        document.write('<li>');
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}
        posttitle = posttitle.link(posturl);
        var readmorelink = "(Lihat yuk)";
        readmorelink = readmorelink.link(posturl);
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0,4);
        var cdmonth = postdate.substring(5,7);
        var cdday = postdate.substring(8,10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
    } else if ("summary" in entry) {var postcontent = entry.summary.$t;
} else var postcontent = "";var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");   
if (showpostdate == true) document.write('# ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + '>> ');document.write(posttitle + '  ');
if (showpostsummary == true) {if (postcontent.length < numchars){document.write(postcontent);
} else {postcontent = postcontent.substring(0, numchars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write('-> ' + postcontent + '...' + readmorelink);}}
document.write('</li>');document.write('<hr width="100%" size="1"/>');}document.write('</ul>');}
var numposts = 20; var showpostdate = true; var showpostsummary = true; var numchars = 5; </script><script src="http://pemula-awaliharimu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></div>

Keterangan Kode Warna :
Merah = Untuk tinggi dan lebar
Biru = Silahkan ganti dengan kata-kata sahabat sendiri (ex: readmore, buka, lengkapnya)
Kuning = Jumlah maksimal Recent posts yang di tampilkan
Ungu = Silahkan ganti dengan alamat blog sahabat

Atau Jika sahabat ingin yang lebih simple atau sederhana bisa gunakan kode dibawah ini dengan cara seperti diatas :

Recent Posts Simple Code :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

<script src="http://anas.ku93.googlepages.com/post-terakhir.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://Blog Sahabat/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

</div>

Screenshot:

Sekian untuk kali ini bagaimana cara Membuat Recent Post | Artikel Terbaru Dengan Scroll semoga bermanfaat.