Cara Membuat Widget Artikel Terbaru di Blog ala Mahrus NET

20 views
Widget Artikel Terbaru Blog picture



Widget Artikel Terbaru Blog atau dengan istilah bahasa kerennya recent post ini merupakan salah satu widget penting untuk dipasang di sebuah blog, alasannya ialah dengan tujuan menunjukkan akomodasi kepada pembaca perihal update terbaru di sebuah situs blog.

Memasang widget recent post pada sebuah blog tidaklah sulit, caranya sangat mudah dan simple sekali biasanya seorang pemblogger menempatkan widget ini pada bab sidebar blog, mengapa? alasannya ialah ini sangat mudah pembuatan dan pemasangannya.

Mahrus NET sendiri sudah memasang widget aertikel terbaru dibagian sidebar kanan yang mampu anda lihat disini : DEMO gimana sahabat keren banget bukan. 🙂 nah, bagi kalian yang ingin membuatnya silahkan lihat tips pemasangannya berikut ini :

Widget Keren Artikel Terbaru Pada Blog Ala Mahrus NET :

  • Silahkan anda masuk keblogger anda atau sigh in ke www.blogger.com
  • Kemudian silahkan anda masuk kebagian Tata Letak
  • Tambahkan Gadget
  • Pilih HTML/Javascript
  • dan Masukkan semua arahan berikut ini kedalamnya

<div class=”recentpoststyle”>
<script src=”http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js”></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 70;</script>
<script src=”/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts”>
</script>
<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: #c00;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 5px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,”Baskerville Old Face”,”Hoefler Text”,”Times New Roman”,serif; font-size: 15px;}
</style></div>
<div style=”text-align:right;”><a href=” ” target=”_blank” style=”font:normal bold 10px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);” title=”Widget Artikel Terbaru”>Mahrus NET</a></div>

  •  Save/Simpan..
  • Silahkan anda cek hasilnya…
Catatan : Angka 5 warna merah merupakan banyaknya artikel terbaru yang ingin anda tampilkan jadi, silahkan anda sesuaikan dengan kebutuhan anda.
Jadi, sangat simpel sekali caranya silahkan anda terapkan juga widget ini diblog kalian bagi yang belum work silahkan anda bertanya pada kotak komenta. 
Semoga bermanfaat 🙂

Tags: #Tutorial Blogger