Daftar Artikel Blog 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 monosbit 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...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

  
  <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/AVvXsEjJ8mJSZ6JLb6Lbklp1J_ZaDum4A6Ezbljtt5V6b1Jg8RvGU0EhD7A6XRxlQ7GHc7PLgpMtVzBxVXkwasj57i5LRJsmqPZ4RA3GyKIkRXwvDPpUM-xNiAYnN0xSIYOWeFZPOg3WUs25aN4/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/AVvXsEjTseZ-1ZyQWJNTdpN2ZSawjpshRw9tTiVPCcxt_eMzDQWw7pv0zoYiJjgWtgRc2uGyC350M0xKmozObByMX6EA_tC1QjSCHmeyu8LB_E3kX4jcayntVl8gD33QdqXm_ydcEPBuUP81gFs/s1600/tooltips-background.png) repeat-x;
  color:#333;
  padding:35px 10px 10px 10px;
  }
  </style>
  <script src="http://feeds.feedburner.com/monosbit?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:60%;"><a href="http://monosbit.blogspot.co.id/2016/04/daftar-artikel-blog-terbaru.html" style="text-decoration:none;color:white;">Get this widget</a></div>
  

  
  KETERANGAN :
  • Gunakan feed burner sebagai rss feed blog sobat kemudian ganti teks "monosbit" 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.
  • Pastikan rss feed blog sobat sudah terdaftar di FeedBurner kemudian klik setting Publicize setelah itu klik BuzzBoost. Ubah Number of items to display: menjadi 5 atau sesuai dengan setingan yang sobat inginkan. Scroll ke bawah dan klik SAVE untuk mengaktifkan BuzzBoost feedburner blog sobat.


• Klik "Save" dan lihat hasilnya...

Oke sobat monosbit jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.