mas template

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

recent post maskolis


  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini 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 h6 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-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #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}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://johny-gantengbanget.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 += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    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>
    Keterangan :
    var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
    var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
    var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
  7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
    Terakhir save dan lihat hasilnya.
Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

96 comments:

  1. Mantap..ini yang saya tunggu cuma saya bingung nanyainnya..

    Coz ga tau namany :D :D :D

    ReplyDelete
    Replies
    1. sama mas.e.. http://hargahpq.blogspot.com

      Delete
  2. wah makin keren aja nih mas kolis,,met sahur ya,,hehe

    ReplyDelete
  3. Apakah Latest Post kentir banget bisa di ganti dgn yang seperti ini om..

    Kalo bisa gimana carany om..

    ReplyDelete
  4. KEREN ,... TAPI SAYANG GW PAKE TEMPLATE GALLERY, JADI GAK PAS KALAU PAKAI WIDGET INI, UNTUK TEMEN2 YANG LAIN PASTI SANGAT BERGUNA,.. LANGSUNG DI SEDOOOTTTTTTT.

    AKAN TETAP SELALU MENUNGGU YANG TERBARU.
    SEHARI GW BISA BERKUNJUNG 15 SAMAPAI 20 KALI GKGKGKGKKGKGKGKKGGKK LEBAY JUGA GW YACHHH.
    TAPI GAK PAPA AH,.. YANG PENTING GAK PERNAH KETINGGALAN.

    CREATING WEBSITE MAJU TERUS,....... GOODLUCK. THANKSSSSSSSSS BERAT.

    ReplyDelete
  5. permisi, mas. boleh saya minta template dari situs http://johny-gantengbanget.blogspot.com/ ? saya sudah cari tidak ketemu hehe.

    ReplyDelete
  6. btw mas, saya mau tanya nih, saya ingin buat slider seperti johny-guanteng banget, bisa kasih tau bagaimana kodenya. saya ingin merupah blog saya dengan slider seperti itu. bisa tidak mas kasih solusinya. kirim ke email aja kalau kepanjangan mas. di sini >>> zondimcom@gmail.com

    saya minta tolong ya mas, atas bantuannya, terimakasih banyak loh mas. bulan puasa berbuat kebaikan pasti selalu didoakan yang baik. hehhehehhe

    ReplyDelete
  7. kerenx mas..!!, sy baru liat tutorial kayak gini, insya Allah kapan2 sy share ke blog sy ya., thx :)

    ReplyDelete
  8. Mas kolis, Mas Kolis punya catatan tersendiri nggak mas tentang hal apa saja yang mas Kolis lakukan sehingga situs ini populer dan diminati banyak orang. pengen tau soalnya, hee.. kalau nggak keberatan nanti bisa dijawab di email saya mas di zimbah.x@gmail.com , sebelumnya makasih mas.

    misteruban

    ReplyDelete
  9. oh yes! makasih mas.. akhirnya.. hehe

    ReplyDelete
  10. mas, gimana mau matchkan warna background, text dan link colour sama dengan colour johny darkmovie ya?

    ReplyDelete
  11. Widgetnya Mantap mas, sudah saya pasang di
    http://informasi-terpopuler.blogspot.com/ ..thanks :)

    ReplyDelete
  12. Wah.. Sudah lama saya menunggu Mas.. Widget nya
    Terima Kasih ^_^

    ReplyDelete
  13. @Haz Issac:
    Tinggal dirubah warna yang ada di kode CSS pada langkah nomer 5 diatas bro

    ReplyDelete
  14. @debbie irlando manurung:
    Oke nanti saya buatkan tutorialnya, ini baru pulang soalnya

    ReplyDelete
  15. aman kan kodenya dulu mas...heheheh

    sambil nunggu sahur enaknya cari ilmu buat blogging..heheehh ( utamakan tadarus dulu tentuny..hahahahahh)

    ReplyDelete
  16. top markotop akan aku terapkan besok, sekarang saur dulu
    http://infobungo.blogspot.com

    ReplyDelete
  17. Mantap Mas.. slam kreatif selalu mas, sukses selalu..

    ReplyDelete
  18. Terima kasih masKOlis, Sudah langsung diterapkan.. :)

    ReplyDelete
  19. Alhamdulillah, akhirnya berhasil juga mas saya terapkan diblog baru saya hpbb-blackberry.blogspot.com, suwun mahatur tengkyu kamsiah syukron mas, artikelnya luar bisa bermanfaat, sangat berguna bagi pemula seperti saya.

    ReplyDelete
  20. How do i put for specific label only?

    ReplyDelete
  21. Kalau artikel tutorial tentang cara membuat widget kategori video seperti di template kenthir banget ada ga' mas bro ???

    ReplyDelete
  22. keren mas boss , salam terimaksih

    ReplyDelete
  23. wah keren mas caranya,, tapi kalo saya mau mengedit latest post yang sudah ada, pada bagian "newer-home-olderpost" menjadi seperti diwidget diatas "next-home-previous" bagaimana caranya mas??

    ini blog saya http://hotinfonews.blogspot.com/

    terimakasih mas :)

    ReplyDelete
  24. pagi mas kolis... mas sudah tak pasang di blog saya, tapi kok ada beberapa yang nggak tampil imagenya yah??? malah no image tanda silang itu yang muncul. padahal tiap artikel sudah ada beberapa imagenya mas... mohon pencerahannya ya :)

    ReplyDelete
  25. mas kholis,,mohon bantuannya nih
    masih menyangkut soal widget :D

    mas kolis cara membuat titel headernya menjadi h4 widget secara otomatis gimana ya

    saya merubahnya secara manual, klw tambah widget baru dia otomatis h2

    nih blognya mas nonaventa dot blogspot dot com

    tulung ya mas :)

    ReplyDelete
  26. @Praditya:
    Masuk ke setting, pilih other/lainnya di "allow blog feeds" posisikan ke full atau until jump break

    ReplyDelete
  27. apakah mempengaruhi berat loading blog.. mas,..

    ReplyDelete
  28. @Zulham-9179:
    Setiap penambahan code pada template pasti berpengaruh pada loading mas. Diringkas aja kode yg panjang itu kemudian simpen di google code

    ReplyDelete
  29. mantep mas..bisa dijadiin index jquery..
    tq"..
    demo edit template nya
    _http://readingbookonline.blogspot.com/

    ReplyDelete
  30. makasiih mas.. kalau misal nyimpan di google code apa loadingnya bisa lebih cepet ya,, makasiih ya...

    ReplyDelete
  31. mas, punyaku ko'keluar gambarnya yaw?
    "no image avaiable"

    ReplyDelete
    Replies
    1. masuk ke setting, pilih other/lainnya di "allow blog post" posisikan ke fulll atau until jump break

      Delete
  32. IT IS NT WORKING FOR ME CN U TELL ME Y MY WEBSITE
    WWW.FREEFULLVERSIONSOFTWARES4U.BLOGSPOT.COM

    ReplyDelete
  33. Macam mana nak buat untuk pos label-label tertentu sahaja?

    ReplyDelete
    Replies
    1. Saya belum mencoba, sepertinya sih nggak bisa

      Delete
  34. mas,gambarna gk muncul nie..yg kurang apana ya..

    ReplyDelete
    Replies
    1. masuk ke setting, pilih other/lainnya di "allow blog post" posisikan ke fulll atau until jump break

      Delete
  35. mas udah aku coba tapi kok ga muncul ya?

    ReplyDelete
  36. terimakasih mas. ini gudangnya template paling kreatif dan keren.

    ReplyDelete
  37. mas cara ngilangin textnya gimana???.. jadi cuma gambarnya aja gitu..

    ReplyDelete
    Replies
    1. Cari kode "var charac = 100"; nilainya diganti angka 0

      Delete
  38. wahaha keren nih kaya popular postnya lintas me :D

    ijin share ulang yak :D

    ReplyDelete
  39. Tampilan recent post ini bagus, saya da pasang di blog saya. Thanks Maskolis

    ReplyDelete
  40. mantap mas, ane comot ya... mampir www.bukuqw.com

    ReplyDelete
  41. Can you help me get 1 widget recent label , just widget dont put in Edit HTML , because i want to make new page ! Thank Mas so much

    ReplyDelete
  42. makasi mas!!
    artikelnya sangat bermamfaat...

    ReplyDelete
  43. Artikel nya sangat keren gan
    Jangan lupa follow balik , soal nya agan maskolis udah ane follow

    ReplyDelete
    Replies
    1. Maaf sebelumnya, ini salah satu perilaku blogger yang saya nggak begitu sreg mas. Kalau saya, mau follow atau langganan artikel mestinya harus iklas mas, jgn karena udah follow terus kita suruh org lain follow juga.

      Blog anda bagus dan isinya bermanfaat, tapi mungkin saya punya pertimbangan lain.

      Bukannya saya sombong mas, kebanyakan follow blog yang artikelnya tidak sesuai dengan niche blog kita buat apa. Bikin berat loading dahboard mas, pertimbangan lain bisa anda baca di artikel ini :
      http://www.maskolis.com/2011/04/pengalaman-blokwalking-bersama-temen.html

      Delete
  44. Terima kasih artikelnya kang. sangat membantu..

    ReplyDelete
  45. izin menghapus ..
    scriptnya mas.. :D
    dari pada gak berfungsi... Bocah Poris Blog's

    ReplyDelete
  46. Search "/ b: skin>" (0 hits in 0 files)
    Search "]]> " (0 hits in 0 files)
    Search "]]> " (0 hits in 0 files)
    Search "]]> : " (0 hits in 0 files)
    Search "]]> : " (0 hits in 0 files)
    Search "code]]> : " (0 hits in 0 files)
    Search "code]]> : " (0 hits in 0 files)
    Search "]]> : " (0 hits in 0 files)
    Search "]]> : " (0 hits in 0 files)
    Search "]]> : " (0 hits in 0 files)

    ReplyDelete
  47. Ini yg kucari... mantap gan
    terima kasih ya

    ReplyDelete
  48. ijin sedot scrip recent postnya boss... memang mantap inovasi terus...

    ReplyDelete
  49. mas kholis minta bikinin kode html nya donk buat pasang di mwb :) uji coba. trims sebelumnya. wassalam~

    http://apuy-kuswara.mywapblog.com/

    ReplyDelete
  50. trims ya kawan..

    untuk maskolis smoga smakin sukses dehh
    jgn lupa feed balik ya ke http://serimpimakmursejati.blogspot.com

    ReplyDelete
  51. Gan saya udah coba tapi kok tetep gak bisa ya, mohon pencerahannya

    ReplyDelete
  52. maksih kang artikel mantap bangat dan udah di pasang di blog saya,mu tanya kang lw misalkan di bikin per label bisa ga ya...???

    ReplyDelete
  53. tutorialnya keren dan mantap mas,.http://g-lucu.blogspot.com

    ReplyDelete
  54. waduh,,skrpnya terlalu banyak gan menuh2hin template emang ga bisa di perkecil pake google kode...

    ReplyDelete
  55. wah scriptnya banyak banget,saya butuh yang simpel aja,saya pake template johny see book sekali,terus cara buat widget artikel terbaru yang tampilannya sama/cocok/sesuai dengan artikel populer pada johny see book sekali gimana ya?
    tolong ya maskolis :)
    ini blog saya cahtekno.com

    ReplyDelete
  56. keren keren.. ijin nyoba d blog ane gan. dan ijin share jg http://malanggakure.blogspot.com/

    ReplyDelete
  57. Cara Menghilangkan thumbnail image nya gimana ya mas ???

    ReplyDelete
  58. mas kalo mau tanpa gambar gmn ya?
    kalo menurut saya bila dengan gambar jadinya mengurangi fungsi dari blog post..
    di tunggu mas jawabannya

    ReplyDelete
  59. +maskolis akhirnya bisa juga mas setelah dua jam ngutak-ngatik :)
    maklum newbie..
    skr recent postnya udh serasi dgn desain blog saya..
    thx mas kolis..
    kunjungi blog saya kalo sempat psdink.blogspot.com

    ReplyDelete
  60. AKU HARUS NGOMONG APA SOAL http://www.maskolis.com , MANTAPPPPPPPPPPPPPPPPPPPP, TOPPPPPPPPPPPPPPPPPPPPPP, KERENNNNNNNNNNNNNNN, Terus Berkarya Mas...!!!!!!!!!!!

    ReplyDelete
  61. makasih mas Tutorial sangat membantu

    ReplyDelete
  62. mas, kalo merubah ukuran font judul postingannyaa gimana?? dan jika ingin hanya sebagian saja judul yg ingin ditampilin gimana? saya tunggu ya mas. infouinvest.blogspot.com

    ReplyDelete
  63. puass deh sayang gak boleh pasang link

    ReplyDelete
  64. Follow ya qaqaaa tanpa kalian blog ku apa lah gunanya!

    ReplyDelete
  65. sipp ini yang dicari, makasih mas

    http://darwinblogs.blogspot.com/2011/07/situs-ppc-indonesia-terpercaya-terbaik.html

    ReplyDelete
  66. Ini yang aku cari, aku praktekin di blog ku ya. tanks..

    ReplyDelete
  67. masbro mau tanya kalau mau nerapkan di populer bagian mananyakah yg perlu diedit ?

    ReplyDelete
  68. trima ksih mas,, tutorialnya.
    mudah2an ente slalu sehat & pnjang umur,, biar slalu bisa ngasih ilmu yg brmanfaat... :)

    ReplyDelete
  69. wah harus lewat edit templlate ya,,, susah tu..
    mampir gan pakai template standart http://foseha.blogspot.com

    ReplyDelete
  70. terima kasih mas, saya sudah berhasil menerapkan tutorial yang mas berikan, silahkan saja lihat disini http://adsensehospital27.blogspot.com/

    ReplyDelete
  71. Dulu saya pernah coba widget ini dan berhasil. Tapi sekarang saya coba terapkan kembali pada Blog yang sama kok hasilnya gagal, widgetnya tidak muncul. Kira-kira dimana letak permasalahanya nih maskolis....

    kunjungi ya http://regibrader-free.blogspot.com/

    ReplyDelete
  72. Buatan maskolis sendiri ya, saya suka mas sama widgetnya ^_^

    ReplyDelete
  73. Alternatif lain untuk widget ini adalah dengan memanfaatkan fitur yang ditawarkan feedburner Google..Sukses terus buat Mas Kolis.

    ReplyDelete
  74. Lha kok di blog saya malah amburadul ya mas. Tulung mas.

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. Terima kasih mas jalan di template hasil oprek2 ditambahin dengan tips dari mas lebih asik makasih scriptnya mas sukses mohon sarannya di http://bisnisajidwi.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger