Cara Membuat Widget Artikel Terbaru di Blog


Assalamualaikum wr wb

Cara Membuat Widget Artikel Terbaru di Blog

Widget di blog ada bermacam-macam kegunaannya, ada yang digunakan untuk menampilkan jam, menampilkan kalender, dan lain-lain, salah satunya yaitu kita bisa menampilkan artikel terbaru dari blog kita dengan menggunakan widget, manfaatnya adalah ketika orang lain mengunjungi blog kita tanpa melewati homepage maka orang tersebut akan tau artikel terbaru dari blog kita dari widget tersebut dan siapa tau akhirnya orang tersebut mengunjungi artikel baru itu. Ada 2 macam widget artikel terbaru yang bisa kita dibuat, yaitu yang disertai degan gambar/ thumnails dan yang tidak menampilkan gambar.

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

Membuat widget artikel terbaru di blog

Pada kesempatan kali ini kita akan coba membuat 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 lalu pastekan kode dibawah ini
  6. <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="http://www.kangghani.com/2015/06/cara-membuat-widget-artikel-terbaru-blog.html" 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.
      Cara Membuat Widget Artikel Terbaru di Blog
  7. Lalu Simpan dan selesai.

Cara Membuat Widget Artikel Terbaru di Blog
Tampilan widget artikel terbaru

Nah mudah bukan untuk memasang widget artikel terbaru di blog, mungkin sekian dari saya tentang tutorial ini, terimakasih sudah mengunjungi blog saya, dan semoga bermanfaat.

Silahkan untuk berkomentar.

Wassalamu'alaikum wr wb
Next Article
Newer Post
Previous Article
Older Post

6 komentar:

  1. kok di blog saya ga muncul ya?kenapa ya kira-kira?

    ReplyDelete
  2. kok js ada tulisannya id-pemula ya

    ReplyDelete
    Replies
    1. artikel updated, monggo dicoba kembali gan..

      Delete
  3. gan bagaimana cara mengganti fontnya

    ReplyDelete
    Replies
    1. pada #hlrpsb a tambahin css font-family, untuk lebih lengkapnya kunjungi http://www.w3schools.com/cssref/pr_font_font-family.asp

      Thx sudah berkomentar..

      Delete

Format untuk memasukkan gambar [img]url gambarnya[/img]
Untuk tebal <b>teksnya</b>
Untuk miring <i>teksnya</i>
Untuk memasukkan kode [code]kodenya di sini[/code]
Menyisipkan link aktif akan langsung terhapus :)