Widget Artikel Terbaru

Aloo Moz's Blogger... gimana kabarnya ??? semoga sehat dan bahagia, info unik kali ini tentang cara membuat Widget Artikel Terbaru (Recent Post) yang unik dan keren, pastinya...hehehe... Widget ini akan menampilkan daftar postingan artikel blog terbaru dengan ringkasan artikel. Widget ini berfungsi untuk memudahkan pengunjung blog mengetahui info artikel terbaru yang ada di blog.

Pada contoh diatas, coba dekatkan mouse sobat ke daftar list recent post monozcore diatas. Pada saat mouse didekatkan maka akan muncul tool tip info yang berisi ringkasan postingan artikel blog. Gimana keren-kan ???. Pembuatan widget ini cukup mudah... oke buat yang tertarik kita langsung aja ke TKP...

Cara Pemasangan

• Login ke blog sobat.
• Klik "Design" kemudian klik "Add a Gadget" setelah itu pilih "HTML/Javascript".
• Copy-paste kode berikut ini pada kotak postingan gadget.
  
  
  <style type="text/css">
  /* FEEDBLITZ WIDGET */
  .postnew li a:hover {
  display:block;
  text-decoration:none;
  background:#efefef;
  }
  .postnew li a:visited {
  text-decoration:none;
  }
  .postnew {
  float:left;
  width:380px;
  }
  .postnew ul {
  width:90%;
  list-style-type:none;
  }
  .postnew li a {
  text-decoration:none;
  border-top:1px solid rgb(204,204,204);
  line-height:1.6em;
  font-size:12px;
  display:block;
  padding:3px 0px 3px 0;
  }
  .feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
  display:none;
  padding:2px 3px;
  margin-left:95px;
  margin-bottom:12px;
  width:162px
  }
  .feedburnerFeedBlock  li:hover .date {
  font-size:13px;
  font-weight:bold;
  text-align:left;
  display:block;
  position:absolute;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOXZwpqC5EMkeFCiXnMROiMmBv0fwwdbt7PKfpkpNeVfTFTqpNyOvUHvxNRetHuYGenyGUM9RA_10MHxa9AqU1hbWaNV8Cphnx4o4pw8PGl8oflfUTuBGGZtYbeTZYp0KLrRqNxKVW-k/s400/tooltips-date.gif) no-repeat scroll 10px 0px; color:#333; padding:0px 35px; margin-right:10px;
  width:114px
  }
  .feedburnerFeedBlock  li:hover div {
  line-height:1.2em;
  border-radius:8px 8px;
  -moz-border-radius:0 0 8px 8px;
  -khtml-border-radius:0 0 8px 8px;
  -webkit-border-radius:0 0 8px 8px;
  border-radius:0 0 8px 8px;
  font-size:90%;
  display:block;
  position:absolute;
  border:1px solid #D8D8D8;
  background:#E5E5E5  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD4CLUWz467O3LtV09D3F5jsRDGlstjYYsHRTbxGlofRjiJhl6Opy-xeCg_UmQ61FXnrGoVz_kuwDLYGXleC6tQILJJov6d9d1bAXp_pLwVrR6oKz6hX05CfSQniY2KAX3IayRMqCH5U8/s1600/tooltips-background.png) repeat-x;
  color:#333;
  padding:35px 10px 10px 10px;
  }
  </style>
  
  <script src="http://feeds.feedburner.com/monozcore?format=sigpro&nItems=5&format=openLinks=new
  &displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>
  <div style="text-align:center;font-size:80%;"><a href="http://monozcore.blogspot.com/2012/02/widget-artikel-terbaru.html" style="text-decoration:none;color:white;">Get this widget</a></div>


• Gunakan feed burner sebagai rss feed blog sobat kemudian ganti teks "monozcore" pada kode script di atas dengan nama blog sobat. Untuk nItems=5 merupakan banyaknya daftar recent post yang ingin ditampilkan, pada kode diatas recent post yang ditampilkan sebanyak 5 postingan artikel terbaru.
• Klik "Save" dan lihat hasilnya...

Gimana Moz's Blogger kerenkan infonya ??? jangan lupa cendolnya yaa...supaya kreasinya makin unik dan bermanfaat...Terima kasih.

.:Semoga Bermanfaat:.