CARA MEMASANG WIDGET ARTIKEL TERBARU THUMBNIL PADA HALAMAN BLOG CARA MEMASANG WIDGET ARTIKEL TERBARU THUMBNIL PADA HALAMAN BLOG - SUARA HARIAN OTO BEMO BERODA TIGA
Suara Harian Oto Bemo Beroda Tiga

Komunikasi, Media Ilmu & Pengetahuan Umum Blogging

Langsung ke konten utama

"OTO BEMO.. OTO BEMO.. BERODA TIGA .. TEMPAT BERHENTI.. DITENGAH TENGAH KOTA..PANGGIL NONA..PANGGIL NONA..NAIK KERETA..NONA BILANG..TIDAK PUNYA UANG.. JALAN KAKI SAJA"

CARA MEMASANG WIDGET ARTIKEL TERBARU THUMBNIL PADA HALAMAN BLOG

Navigasi judul pada blog sangatlah penting, dengan adanya navigasi pembaca dapat dengan mudah melihat semua isi dari blog tersebut. selain itu juga pembaca menjadi lebih nyaman karena tidak perlu bingung jika ingin mencari artikel lainnya. salah satu widget yang dapat membantu navigasi pada blog adalah widget artikel terbaru. 

Bagi seorang blogger, ada beberapa komponen yang perlu diperhatikan saat membuat dan mengelola apa yang disuguhkan dalam isi blognya. Agar pengunjung tertarik dengan isi blog kita dan betah berlama-lama membacanya, kita mesti memaksimalkan fitur-fitur widget yang telah tersedia, termasuk di antaranya yaitu pemasangan halaman widget Recent Post/ Artikel Terbaru/  Postingan Terbaru. Keuntungan dari memasang widget ini adalah pengunjung dapat melihat dan memilih artikel-artikel terbaru dari blog kita. Dengan adanya widget recent post ini, pengunjung akan dibuat penasaran untuk membaca artikel-artikel lain dari blog kita. 

Untuk tampilannya sendiri banyak pilihan yang kita gunakan seperti artikel terbaru dengan gambar atau juga snippet. untuk tutorial kali ini saya akan memberikan script widget artikel terbaru yang simple dan ringan. agar kecepatan loading pun tidak terlalu berpengaruh. Baca Juga : Cara-memasang-widget-artikel-terbaru

oke langsung aja berikut caranya :
1. Buka blogger => tata letak => tambahkan gadget
2. Selanjutnya pilih HTML/Javascript dan masukkan kode berikut ⛛
3. Tampilan seperti gambar diatas, angka 3  contoh susunan bisa disesuai selera anda




<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(h){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/AVvXsEil0JyRi5GVFy3rbn0qokpWjJ-hOmPkm46VlWI-kH5LD4ySbLOzpHaKIl2J_ZBqdvqpYz-Qtz8oXVcBcAflVshR6VQkbtYnSUvPq59cCa5gnT8L0RO34o0oTTZ_hVjsmR2DPSygiX1x4g-C/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),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>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")} 
  </script> 
  <script type="text/javascript"> 
  var posts_no = 3
  var showpoststhumbs = true; 
  var readmorelink = true; 
  var showcommentslink = true; 
  var posts_date = true; 
  var post_summary = true; 
  var summary_chars = 40;</script> 
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> 
  <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:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;} 
  .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;} 
  ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%} 
  ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;} 
  ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} 
  .recent-posts-container a{text-decoration:none;} 
  .recent-post-title {margin-bottom:5px;} 
  .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;} 
  .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;} 
  .recent-posts-details a{color: #777;} 
  </style>



Bagaimana Reaksi Anda Tentang Artikel Ini?

Komentar