Cara Membuat Widget Artikel Terbaru dan Perlabel

Info [K-moe] - Widget artikel terbaru ataupun Recent Post merupakan hal yang penting dimiliki oleh setiap blogger, karena dapat menjadi navigasi yang memudahkan pembaca ataupun pengunjung blog melihat langsung artikel terbaru di blog anda, tanpa melihat ke halaman beranda. So ketika pengunjung membaca salah satu posting di blog sobat, mereka dapat melihat langsung judul-judul posting terbaru baik semua posting ataupun perlabel. Seperti contoh pada gambar di bawah ini.


Dengan membuat widget artikel terbaru/recent post seperti gambar di atas, para pengunjung dapat melihat update postingan terbaru anda baik semua posting ataupun dapat melihatnya perlabel

cara membuat widget artikel terbaru/recent post

1. Masuk ke akun blogger sobat
2. Pilih Tata Letak
3. Pilih dimana anda akan meletakan widget artikel terbaru
4. Lalu tambahkan gadget
5. Kemudian pilih HTML/Javascript
6. Copy dan paste code dibawah ini di gadget yang sudah sobat pilih tadi.

Code widget artikel terbaru, recent post

<div style="background:#F2F2F2;overflow:auto;width:100%px;height:200px;padding:10px;border:1px solid #ccc">
<span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script type="text/javascript">
//<![CDATA[
var num=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<num){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)'>";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+="<p>";s+="<b><a href='"+post.href+"'>"+post.title+"</a></b> <br/>";s+=post.content;s+="<br/><a href='"+post.href+"'> continue » </a>";s+="</p>"}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}
//]]><a href="http://www.pabk-4you.com"></a>
</script>
<script src="http://Blog anda.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed"></script></div> 
7. Ganti alamat web/blog yang berwarna merah dengan blog/web sobat. 8. Simpan
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar