Cara Menciptakan Widget Artikel Terbaru Di Blog

Cara Membuat Widget Artikel Terbaru di Blog

Assalamualaikum wr wb

Widget di blog ada majemuk kegunaannya, ada yang dipakai untuk menampilkan jam, menampilkan kalender, dan lain-lain, salah satunya yaitu kita dapat menampilkan artikel terbaru dari blog kita dengan memakai widget, keuntungannya ialah saat orang lain mengunjungi blog kita tanpa melewati homepage maka orang tersebut akan tau artikel terbaru dari blog kita dari widget tersebut dan siapa tau hasilnya orang tersebut mengunjungi artikel gres itu. Ada 2 macam widget artikel terbaru yang dapat kita dibuat, yaitu yang disertai degan gambar/ thumnails dan yang tidak menampilkan gambar.

Cara menerapkan widget ini pun cukup gampang sekali, berikut kita bahas.

Membuat widget artikel terbaru di blog

Pada kesempatan kali ini kita akan coba menciptakan widget artikel terbaru di blog tanpa gambar, berikut langkah-langkahnya:

1. Kunjungi Blogger.com pilih blog yang mau disesuaikan.
2. Pilih Tata letak.
3. Pilih Tambahkan gatget pada lokasi yang ingin dipasang widget ini.
4. Pilih Html/Javascript
5. Copy kemudian pastekan kode dibawah ini

<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 = 10;var showpostdate = false;var standardstyling = true;</script> <script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href=" " rel="nofollow" >Recent Posts Widget</a> <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> 

• 10 = jumlah artikel yang akan ditampilkan pada widget.
• false = untuk menonaktifkan tanggal postingan, untuk mengaktifkannya ubah menjadi true. 
• #000000 = warna teks.
• blog-address.blogspot.com = ganti dengan alamat blog anda.
  
6. Lalu Simpan dan selesai.

Tampilan widget artikel terbaru

Nah gampang bukan untuk memasang widget artikel terbaru di blog, mungkin sekian dari aku wacana tutorial ini, terimakasih sudah mengunjungi blog saya, dan agar bermanfaat.

Silahkan untuk berkomentar.

Wassalamu'alaikum wr wb

Share this post