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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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

Seorang Mahasiswa yang ingin berubah dari yang baik menjadi lebih baik hingga sukses dengan hobby Musik, dan Menulis

Apabila Bermanfaat Mohon Bagikan

Related Posts

Previous
Next Post »

7 Komentar

Komentar
July 2, 2017 at 3:42 PM delete

mantap tutor, ijin ane pasang di blog

Reply
avatar
July 2, 2017 at 3:45 PM delete

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

Reply
avatar
July 2, 2017 at 4:14 PM delete

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

Reply
avatar
July 17, 2017 at 2:18 PM delete

cara ini ga work pak untuk wordpress

Reply
avatar
October 3, 2017 at 4:18 PM delete

Pasang kodenya di tata letak om bukan di artikel :)

Reply
avatar

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

Artikel Terbaru