Kamis, 07 Maret 2013

Membuat Kolom Widget Recent Post

Membuat Kolom Widget Recent Post adalah artikel lanjutan dari memasang recent post di Blogger yang sudah tidak berfungsi lagi. Jadi, kita akan membuat kolom widget recent post sendiri dan tentunya menggunakan kode script dan memasang di didalam template blog kita. Kolom widget recent post ini merupakan buatan mas Kolis karena saya sendiri sampai saat ini belum bisa membuat kode recent post yang bisa tampil diseluruh bagian blog dan tidak melulu tampil di sidebar. Sampai saat ini saya mencoba membuat sendiri, bagaimana recent post bisa tampil didalam artikel blog!

Membuat Kolom Widget Recent Post

Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini
  1. Silahkan masuk dulu ke akun Blogger anda
  2. Masuk ke Template >> Edit HTML >> centang Expand Widget Templates >> tekan tombol Ctrl+F di keyboard
  3. Cari kode ]]></b:skin>
    Dan tambahkan kode berikut diatas kode ]]></b:skin>
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h5 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
  4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas </head>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://panduantemplateblog.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed = showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h5><a href='" + posturl + "'>" + posttitle + "</a></h5>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
  5. Silahkan simpan Template blog anda terlebih dahulu
  6. Sekarang tutup menu Template dan buka menu Tata Letak
  7. Setelah berada di menu Tata Letak, silahkan anda klik Tambahkan Gadget yang ada dibagian sidebar kanan blog seperti yang terlihat pada gambar berikut ini

    Membuat Kolom Widget Recent Post
  8. Selanjutnya scroll/gulir kebawah dan cari widget HTML/Javascript dan salin kode berikut kedalam kolom HTML/Javascript
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
  9. Simpan widget anda dan lihat hasilnya di homepage blog anda
Keterangan :
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://panduantemplateblog.blogspot.com/"; silahkan ganti url ini dengan url blog anda, JANGAN SAMPAI LUPA!
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil

Okey, itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kwatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post

Membuat Kolom Widget Recent Post Rating: 4.5 Diposkan Oleh: ana sriwahyuni

40 komentar:

  1. Ya di coba dahulu, moga lancar!

    BalasHapus
  2. wah sekarang kalau ingin membuat widget post terbaru harus buat sendiri ya? padahal 2 tahun yang lalu saya masih bisa memasang widget posting terbaru melalui tata letak di blogger.
    sekarang banyak yang sudah berubah ya bu :)

    BalasHapus
  3. di coba ne gan..

    mudah2an berhasil..

    salam

    BalasHapus
  4. Lumayan juga Mas kodenya,tapi ada juga yang pakai kode di head Mas itu gimana Mas.

    BalasHapus
  5. @Andik Rasida silahkan mas Andik, semoga berhasil..

    BalasHapus
  6. @Taqorrub Ubaidillah begitulah mas, karena memang sebagian widget tersebut berasal dari luar Google atau Blogspot

    BalasHapus
  7. @Abed Saragih mungkin maksudnya mas Abed adalah newsticker yaitu tampilan artikel dalam bentuk berita dengan hanya menampilkan judul artikelnya saja? kalau iya, insyaallah akan saya update..

    BalasHapus
  8. terima kasih mas tutorial nya di coba dulu
    @nice

    BalasHapus
  9. keren sih, tapi apa gak terlalu berat eah...
    terus lagian recent post sma aja kyak postingan, ada tombol nextnya..
    hehe,,,

    btw nice tips...!

    BalasHapus
  10. menyimak sambil blogwalking sob,kebetulan saya sudah memasangnya.

    BalasHapus
  11. Makasih yah bu Artikelnya sekalian saya minta izin untuk merangkumnya dan dijadikan sebuh ebook terus dijual sekedar nambah nambah beli pulsa n jajan

    BalasHapus
  12. @Restu Nugroho ngga' mas, widget cuma merupakan salah satu faktor berat tidaknya loading blog, selebihnya ada di jaringan modem :)

    BalasHapus
  13. salam kenal mas, saya coba ya, mkasih loh infonyaa

    BalasHapus
  14. eror mba...
    udah saya simpan templatenya, tapi pas saya tambah gadget HTML dan memasukan kodenya
    malah ga bs di terapkan ya ?? dimana salahnya mba ?

    BalasHapus
  15. makasih..........you are the best !!!

    BalasHapus
  16. Thanks infonya bermanfaat sekali,...

    BalasHapus
  17. bagus nie,
    patut untuk di coba gan,

    BalasHapus
  18. wah bagus tutornya salam kenal

    BalasHapus
  19. wah keren juga nihh tutorial'y

    BalasHapus
  20. Met siang mbak ....tq tutorialnya

    BalasHapus
  21. buat blog lambat atau tidak?

    BalasHapus
    Balasan
    1. saya sudah memasangnya di blog saya yang lain, dan tidak mempengaruhi loading blog.. trims mas Azmi

      Hapus
    2. MAKASIH BANGET ...... AHIRNYA JADI GUGA

      Hapus
  22. ANK TUTORIALNYA YANG BAGUSSS

    BalasHapus
  23. Infonya Menarik tuk dicoba,,,,,,,,lam kenal dari newbee bgt.

    BalasHapus
  24. boleh ni di coba nice info.......

    BalasHapus
  25. Tips-trik yang cantik dan menarik, bisakah anda sharing pula tentang cara membuat kotak komentar seperti milik anda ini ?

    BalasHapus
  26. Info menarik, langsung di coba... trims infonya..

    BalasHapus
  27. kalo kita mau rubah tampilan kekanan dan dibuat jadi 2 kolom bisa ga ya? caranya gimana ya mbak?

    BalasHapus
  28. Iya nih kemarin recent post masih bisa sekarang kok ga bs ya?sy coba pasang lagi tapi tetep ga bs, sy cek di gadget lainnya udah ga ada recent post lagi kemungkinan mank udah di blok sm googlenya kali ya..padahal kemarin apik pake recent post yang bs bergerak gitu...dicoba dulu dh..

    BalasHapus
  29. Coba dlu gan.. ijin copas juga.. ntar ane kasih link blog agan di postingan saya

    BalasHapus
    Balasan
    1. silahkan dan semoga memberikan manfaat

      Hapus
  30. info yang sangat bermanfaat mba

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia