Widget Daftar Artikel Blog Terbaru

Widget Daftar Artikel Blog Terbaru 1

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...

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/AVvXsEjChJ4ZL6o9Fax5UdI-UGk4alIGGm5bNHcDZbJlErOJJrOEQ563X0Zr5BVIJmRme6cXSvGZLqApLdF-I-NW89sQYIo3TLL_K1xjn1Vrc1-yFh6CIzk5tgJeS-DGPg0_3s_D81o1QMEOkx4/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/AVvXsEiuCOdPoY5bUCU1vBa3T2vmpZPnJ3StSXxySffTOgkgqWy5yh7y5beSVcoxvpcpuzSHpeDdh_PyB-nLtJPBbEihQeBy004vsDaoqoTXe3owg4Bk6bMDoD3i8DIPO2tQCC6AOXjd1JJGswA/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:60%;"><a href="http://monozcore.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 "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.
  • 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...

---

Widget Daftar Artikel Blog Terbaru 2

Widget ini akan menampilkan daftar postingan artikel terbaru dilengkapi dengan dropdown label post untuk men-sortir tampilan berdasarkan label tag postingan artikel. Widget ini umumnya digunakan untuk memudahkan pengunjung mengetahui postingan artikel terbaru blog apabila pengunjung blog tidak sempat membuka halaman utama blog.

Loading...

Powered by MonozCore

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> .slcOptionLabel{ width:100%; border:2px outset #5BA2E3; color:#1368A8; } .slcOptionLabel:hover{ border:2px inset #5BA2E3; } .mozlabellist{ width:100%; height:300px; padding:5px 5px 30px 5px; border:2px solid #008FEF; margin:0px; background-color:#D6D5D0; box-sizing: border-box; } .moztitlelabel{ font-weight:bold; margin-top:10px; } .moztitlelabel a{ color:#1368A8; text-decoration:none; } .mozcontentlabel{ text-align:justify; } .mozcontinuelabel a{ color:#A8136C; text-decoration:none; } #pbl_posts{ overflow:auto; margin: 5px 0 0px 0; padding:0 10px 0 5px; width:100%; height:100%; box-sizing: border-box; background: #D6D5D0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7Aq_9pSOgbKKbWgAOWwGfKMEvljX_TLr-2zOWYb7eVeqrEX_-TBh_SZ-LEtEkDxTQwcMbPj9tmcw1qRclOp-DJThIFy7e8PV8OACT6Q35NSoIIiUtaiKr6mA2axOODtI-TnIpUBlbWuq/s1600/nurse.png") no-repeat left bottom; } </style> <script type="text/javascript"> var jumlah_maksimum_post = 100; var dengan_ringkasan = true; var jumlah_karakter_ringkasan = 100; </script> <script> var numpost = jumlah_maksimum_post; var wsumm = dengan_ringkasan; var summlen = jumlah_karakter_ringkasan; var json; var labels; function entryHasLabel(entry, label){ if (label == "*") { return true; } var labels = getPostLabels(entry); return isExists(labels, label); } function getAllLabels(json) { var labels = []; var entries = json.feed.entry; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var categories = entry.category; if (!categories) { continue; } for (var j = 0; j < categories.length; j++) { var category = categories[j]; var label = category.term; if (!isExists(labels, label)) { labels.push(label); } } } labels.sort(); return labels; } function getContent(entry) { if (!wsumm) { return ""; } var content = entry.content ? entry.content.$t : entry.summary.$t; content = stripHTML(content); if (content.length <= summlen) { return content; } content = content.substr(0, summlen); if (content.charAt(content.length - 1) != " ") { content = content.substr(0, content.lastIndexOf(" ") + 1); } content += "..."; return content; } function getPermalink(entry) { var links = entry.link; if (!links) { return null; } for (var i = 0; i < links.length; i++) { var link = links[i]; if (link.rel == "alternate") { return link.href; } } return null; } function getPostLabels(entry) { var labels = []; var categories = entry.category; if (!categories) { return labels; } for (var i = 0; i < categories.length; i++) { labels.push(categories[i].term); } return labels; } function getRecentPosts(json, label) { var posts = []; var entries = json.feed.entry; var i = 0; while (posts.length < numpost) { if (i == entries.length) { break; } var entry = entries[i]; if (entryHasLabel(entry, label)) { var title = entry.title.$t; var href = getPermalink(entry); var content = getContent(entry); var post = { "title": title, "href": href, "content": content }; posts.push(post); } i++; } return posts; } function isExists(array, val) { for (var i = 0; i < array.length; i++) { if (array[i] == val) { return true; } } return false; } function onLoadFeed(json_arg) { json = json_arg; labels = getAllLabels(json); showLabels(labels); showLabeledPosts("*"); } function showLabeledPosts(label) { posts = getRecentPosts(json, label); showPosts(posts); } function showLabels(labels) { var s = ""; s += "<select onchange='showLabeledPosts(this.value)' class='slcOptionLabel'>"; s += "<option value='*'/>All Labels"; for (var i = 0; i < labels.length; i++) { var label = labels[i]; s += "<option value='" + label + "'/>" + label; } s += "</select>"; document.getElementById("pbl_labels").innerHTML = s; } function showPosts(posts) { var s = ""; if (!wsumm) { s += "<ul>"; } for (var i = 0; i < posts.length; i++) { var post = posts[i]; if (wsumm) { s += "<div class='moztitlelabel'><a href='" + post.href + "'>" + post.title + "</a></div>"; s += "<div class='mozcontentlabel'>"+post.content+"</div>"; s += "<div class='mozcontinuelabel'><a href='" + post.href + "'> [continue] </a></div>"; } else { s += "<li><a href='" + post.href + "'>" + post.title + "</a></li>"; } } if (!wsumm) { s += "</ul>"; } document.getElementById("pbl_posts").innerHTML = s; } function stripHTML(s) { var c; var intag = false; var newstr = ""; for (var i = 0; i < s.length; i++) { c = s.charAt(i); if (c == "<") { intag = true; } else if (c == ">") { intag = false; } if (c == ">") { newstr += " "; } else if (!intag) { newstr += c; } } return newstr; } </script> <script src="http://monozcore.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed"></script>
  
  
  Keterangan :
  • Perhatikan kode http://monozcore.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed ganti monozcore.blogspot.com dengan URL blog sobat.


• Klik "Save" dan lihat hasilnya...

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

.: Semoga Bermanfaat :.