Sabtu, 22 Desember 2012

Membuat Recent Post | Artikel Terbaru Dengan Scroll

Recent Post - Artikel terbaru
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 :
Recent Posts
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:
recent


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

Artikel Terkait Lainnya :

TERIMA KASIH ATAS KUNJUNGAN SOBAT CERIA PADA ARTIKEL INI
Judul: Membuat Recent Post | Artikel Terbaru Dengan Scroll
Ditulis oleh Ery || Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi Sobat ceria. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini dengan segala rasa hormat harap menyertakan link dofollow ke https://pemula-awaliharimu.blogspot.com/2012/12/membuat-recent-post-artikel-terbaru.html?m=0. Sekali lagi Terima kasih sudah berkenan membaca artikel ini. smile
If You Like This Article Share it:

10 komentar:

  1. matur nuwun
    http://kawasansaru.blogspot.com

    BalasHapus
  2. mau tanya kak, recent post ini latarnya bisa di ganti gak? soalnya belum tentu cocok sama warna template ku. ini blog aku http://mahagurugo.blogspot.com/

    BalasHapus
    Balasan
    1. Yudi.. untuk latarnya dia akan menyesuaikan sendiri.. coba aja dulu

      Hapus
  3. tanya nih sob, itu pake javascript nggak?

    BalasHapus
  4. mantape like this :D kunjungi blog ku sob habiball.blogspot.com

    BalasHapus
  5. keren sob ^^ makasih ya atas wigdet nya ^^ salam blogger ^^
    visit balik juga ya di jordanvengeance.blogspot.com

    BalasHapus
    Balasan
    1. sama-sama sob, thanks sudah berkujung.

      Hapus

Tinggalkan Jejak Petualangan Dunia Maya SOBAT di dalam blog ini dengan menyempatkan diri sejenak untuk saling sapa ataupun berkomentar.
*Budayakan saling menghargai dan berkomentarlah yang baik.*

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Bloggerized by Blogger Tip and Trick - Premium Blogger Themes