Membuat Widget Postingan Terbaru (New Post) Simpel, Responsive dan Ringan di Blogger

Baca Juga

Dujaa.com, Cara Membuat Widget Postingan Terbaru (New Post) Simpel, Responsive dan Ringan - Widget artikel terbaru atau widget New Post termasuk navigasi yang sangat penting pada sebuah blog. Dikarenakan widget postingan terbaru memberi info kepada pembaca bahwa blog tersebut melakukan update.

Selain memberi informasi update postingan terbaru dari sebuah blog, wigdet postingan terbaru (New Post) juga memudahkan serta memancing pembaca agar membaca artikel terbaru lainnya. Tentunya jika pembaca membaca artikel lainnya pada blog kita maka akan berpotensi baik kepada blog kita.

Semakin betah pembaca berlama - lama di blog kita maka semakin bagus pula kualitas blog kita dan akan mengurangi Bounce Rate pada blog. Kemudian Google juga senang terhadap blog kita karena navigasi yang terpasang tidak membingungkan pembaca.

Bagaimana Cara Membuat Widget Postingan Terbaru di Blogspot ?

Nah pada kesempatan kali ini saya akan memberikan tutorial kepada anda khususnya bagi yang masih pemula dalam dunia blogger yaitu langkah - lengkah membuat widget postingan terbaru pada blogspot.

Dalam tutorial kali ini saya akan menggunaka kode script widget postingan terbaru yang tampilannya simpel. Jika anda menginkan tampilan yang lebih keren menggunakan thumbnail silahkan gunakan kode scrpit opsi lainnya.

Baiklah langsung saja perhatikan langkah - langkah membuat widegt postingan terbaru di blogspot berikut ini :

Langkah - Langkah Mebmuat Widget Postingan Terbaru pada Blogspot

• Buka Dashboard blogger
• Klik menu Tata Letak
• Klik Tambahkan Widget, Biasanya widget postinga terbaru teretak di sidebar.
• Cari dan Klik HTML/Javacsript
• Pada Judul isikan kata Artikel Terbaru atau New Post, bebas sesuai keinginan juga boleh
• Kemudian pada konten isikan kode script postingan terbaru dibawah ini

<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 = 5;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><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://appspremi.blogspot.com/" rel="nofollow"></a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <style type="text/css">
  .recentpoststyle {counter-reset: countposts;list-style-type: none;}
  .recentpoststyle a {text-decoration: none;color: #49A8D1;}
  .recentpoststyle a:hover {color: #000;}
  .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#134f5c; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
  .recent-post-title a {color: #444;text-decoration: none;font: bold 14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
  .post-date {font-size: 2px;color: #fff;margin:5px 0px 15px 32px;}
  .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
  </style></div>

• Ganti alamat blogspot kode yang berwarna MERAH dengan alamat Blogspot anda
• Kode warna BIRU adalah jumlah postingan yang tampil pada widget Artikel Terbaru. Silahkan sesuaikan dengan keinginan anda.
• Kemudian Klik Simpan
• Selesai

Contoh hasil dari kode script seperti dibawah ini. Untuk warna huruf dan hover silahkan sesuaikan sendiri,

Anda juga bisa memilih opsi tampilan widget yang menurut anda bagus. Berikut opsi kode script Widget Artikel terbaru :

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 8;var showpostdate = false;var standardstyling = true;</script>
<script src="https://www.dujaa.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

Keterangan :

• Kode warna BIRU numpost = 8 : Angka 8 adalah jumlah psotingan yang akan ditampilkan pada widget, silahkan ganti sesuai kebutuhan anda.
• Kodw warna MERAH dengan alamat url blog anda.

Contoh tampilan widget popular post dengan kode script opsi kedua :

Nah itulah tutorial tentang cara Membuat Widget Postingan Terbaru (New Post) Simpel, Responsive dan Ringan di Blogger dan juga opsi kode scriptnya. Silahkan pilih salah satu kode yang sudah saya sediakan.

Dengan memasang Widget Postingan Terbaru maka blog anda sudah memiliki navigasi yang tidak membingungkan pembaca. Sehingga Google pembaca senang Google pun ikut senang.

Demikianlah sedikit tutorial yang telah saya berikan, semoga dengan sedikit ilmu yang saya bagikan dapat bermanfaat bagi anda. Terima kasih.