Cara Memasang Widget Artikel Terbaru

Cara Menampilkan Widget Artikel Terbaru

Mungkin sangat banyak sekali cara untuk supaya membuat sebuah widget Artikel Terbaru/Recent Post yang kini sudah cukup banyak blogger - blogger terkenal.


untuk membuat postingan terbarunya supaya tampil muncul seperti rekomendasi ke pengunjung supaya membaca artikel terbarunya ketika membaca artikel yang sedang dibacanya.

Menampilkan Widget Artikel Terbaru/Recent Post

Pertama sobat bisa menampilkan Artikel terbaru bisa memasangnya dengan widget bawaan blogger Caranya:
  • Pergi ke Layout>Add Gadget/Widget>sobat pilih Feed
  • Sobat masukan URL blog sobat masing - masing >Continue
  • Ubah judulnya sesuai selera sobat seperti Postingan Terbaru/Artikel Terbaru
  • Save
Kemudian Kedua menampilkannya dengan sebuah judul dan gambar/thumbnail
Seperti gambar saya di Paragraph pertama
Penasaran bagaimana cara memasangnya? langsung simak caranya berikut..


  • Pergi ke Layout>Add Gadget>HTML Javascript Isi Judul "Artikel Terbaru" Kemudian copas kode berikut:
  • <script type="text/javascript">
    function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJmqiunxLTfn37scVPlHwNqk37nDEdygcu511-o8G73Ux61o_yI4eBHEHmFPXY0y0g-pUxLcpp1iTFIV4TlH-4wiPL6U8HvMEfJLi6tqGTm10d8kFcIyo3iTWjKlWIRzxHAc3ot3LYWMl/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
    </script>
    <script type="text/javascript">
    var posts_no = 5;
    var showpoststhumbs = true;
    var readmorelink = true;
    var showcommentslink = true;
    var posts_date = true;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    <a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://avistauser.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"></a>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <style type="text/css">
    img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
    .recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
    ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
    ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
    ul.recent-posts-container li:none{content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
    .recent-posts-container a { text-decoration:none; }
    .recent-posts-container a:hover{color: #4DACE3;}
    .post-date {color:#e0c0c6; font-size: 11px; }
    .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
    .recent-post-title { margin: 5px 0px; }
    .recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
    .recent-posts-details a{ color: #888;}
    a.readmorelink {color: #4DACE3;}
    </style>
    Jangan lupa tuk mengganti kode yang berwarna biru ganti dengan alamat url web sobat.
Jika sobat ingin menampilkan widget tersebut dengan berupa Kategori atau Label Tertentu berarti kodenya
    <script src="/feeds/posts/default/-/label?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    
  • Sobat harus menambahkan Label kedalam HTML tersebut
  • Kemudian Langkah terakhir sobat tinggal klik Save

Dan jika sobat kurang puas dengan tampilan tersebut sobat kunjungi aja di Blogger Guide dan Help Logger disana sobat akan menemukan beberapa jenis dan tampilan widgetnya beserta reviewnya

Selesai sudah Tutorial kita kali ini semoga dapat bermanfaat dan menambah wawasan anda mengenai tentang ilmu dan pengetahuan seputar blogger dan apabila sobat masih kurang mengerti mengenai artikel dan penjelasan saya ini sobat bisa langsung komplen melalui kolom komentar berikut atau bisa juga melalui Contact pribadi saya diatas header.. :-)


Wassalamualaikum Warrahmatullah

Post a Comment

8 Comments

  1. mantap tutor, ijin ane pasang di blog

    ReplyDelete
  2. Wahh .. keren. Scriptnya masih work gan ^_^

    ReplyDelete
  3. keren mas, nice infonya tapi kalo label nya diganti nanti tampil gitu dan itu hanya dipasang dalam artikel yahkedua script diatas??
    kalo saya rubah template nya saya enggak bisa

    salam kenal dari bunda ya
    kunjungan dan ijin lihat lihat blognya.. dan ditunggu visitnya bareng bunda

    ReplyDelete
    Replies
    1. Pasang kodenya di tata letak om bukan di artikel :)

      Delete
  4. Welcome Bonus - Casino Promo Code 2021 | JTHub
    The Casino Bonus 서울특별 출장마사지 is the ultimate bonus code 대전광역 출장안마 for all new 고양 출장샵 online players. It offers you a 100% match bonus of up to $500 on the first deposit. It 아산 출장샵 includes a 창원 출장샵

    ReplyDelete

Berkomentarlah Dengan Baik

Jangan Berbuat Tidak Sopan

Otomatis Akan Saya Spam

#Dilarang Pasang Link Aktif Apabila Mau Pasang Link Blog Sobat bisa dengan mengubah opsi commentnya ke NAMA/URL kemudian pasang nama dan URL web sobat, yang relevan pasti saya kunjung balik