Membuat Recent Post Seperti di Blog Wong Gunong

Selamat malam para sahabat pecinta uongduro, malam ini saya mencoba menyajikan sebuah Recent Post ringan, tidak bikin loading blog lemut dan dijamin tampilannya sangat keren. Widget ini seperti Recent Post yang berada pada blog Wong Gunong, berikut contoh gambar dari Recent Post yang dimaksud. 

Untuk tampilannya sahabat bisa lihat di blog Wong Gunong, tampak ramping, simple responsive dan sangat seo serta mudah suport pada jenis template apapun. Untuk demonya silahkan sahabat tekan tombol demo dibawah ini.

DEMO

Untuk membuat Recent Post seperti di blog Wong Gunong silahkan sahabat ikuti tutorialnya ya...  :)

1. Silahkan masuk ke akun blogger sahabat
2. Di dasbor klik Tata letak
3. Klik Tambahkan gadget
4. Pilih dan klik HTML/JavaScript [</>]
5. Copy dan paste kode berikut didalamnya

<div class="recentpoststyle">
  <script type="text/javascript">

  function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
  </script>
  <script type="text/javascript">
  var posts_no = 9;var posts_date = true;var post_summary = true;var summary_chars = 0;</script>
  <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
  </script>
  <style type="text/css">
  .recentpoststyle {
   counter-reset: countposts;
   list-style-type: none;
}
  .recentpoststyle a {text-decoration: none;color: #49A8D1;}
  .recentpoststyle a:hover {color: #ff0000;}
  .recentpoststyle li:before {content:
   counter(countposts,decimal);
   counter-increment: countposts;
   float: left;z-index: 1;
   position:relative;
   font-size:20px;
   font-weight:bold;
   background: linear-gradient(#ff0000, #fff);
   color: #fff !important;
   margin:0px 3px 0px 0px;
   padding: 5px 0;
   line-height:30px;
   width:25px;height:40px;
   text-align:center;
   -webkit-border-radius:1px;
   -moz-border-radius:1px;
   border-radius:1px;
}
  li.recent-post-title{
   margin-bottom: 15px;
   padding: 0;
}
  .recent-post-title a {
   color: #444;
   text-decoration: none;
   line-height:25px;
}
  .post-date {display:none}
  .recent-post-summ {display:none}
  </style></div>

6. Terakhir jangan lupa Klik simpan

Jika mengikuti semua tutorial dengan seksama, sekarang sahabat tentu sudah memiliki Recent Post keren seperti di blog Wong Gunong. Untuk warna silahkan sahabat sesuaikan sendiri sesuai selera untuk blog sahabat.

uongduro

Blogger wangi dan baik hati :)

Silahkan berbagi

Postingan Terkait

Ditulis uongduro — May 05, 2020 — Add Comment — Tutorial