Cara Menambahkan Widget Recent Post Super Keren

17.35
Assalamualaikum wr.wb

Pada postingan kali ini Haikal share Cara Menambahkan Widget Recent Post Super Keren. Widget Recent Post adalah salah satu widget Blogger yang berfungsi untuk menampilkan Postingan Terbaru pada sebuah blog

Cara Menambahkan Widget Recent Post Super Keren

Bagi kaum blogger tentunya widget seperti ini penting banget kan ? kan bisa berfungsi sebagai media penunjang trafik blog atau media agar pengunjung semakin kepo dengan blog kita. Dan tentunya recent post widget ini mempunyai Style yang menarik agar blog mas/mbak bisa lebih terlihat waw, Yuuk langsung aja kita simak tutorialnya :

Baca juga : Cara mudah membuat Salam Pembuka di Blogger

1. Login ke Blogger , lalu pada dashboard Blogger pilih Tata letak atau layout
2. Lalu Tambahkan Gadget sesuai keinginan mas/mbak mau taruh dimananya, recomended sih taruh di sidebar aja biar lebih terlihat widgetnya

Cara Menambahkan Widget Recent Post Super Keren

3. setelah itu copy-kan semua kode dibawah ke Widget HTML-nya :

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://mustofahaikal.blogspot.com/2017/01/cara-menambahkan-widget-recent-post.html" rel="nofollow">Recent Posts</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

4. Setelah selesai semua tinggal klik Save dan cek diblog anda

Cara Menambahkan Widget Recent Post Super Keren

NOTES :
- var numpost = 5 : adalah jumpal post yg akan ditampilkan
- var showpostthumbs : untuk mengatur gambar thumbnail dipake atau tidak
- var showcommentslink : untuk menampilkan link komentar dan jumlah komentarnya
- var posts_date : untuk settingan tanggal postingannya
- var post_summary : untuk menampilkan cuplikan isi postingan
- var summary_chars : untuk mengatur jumlah karaker awalan summary-nya
- kalo tidak menampilkan menunya ubah "true" menjadi "false"

Baca juga: Cara mendaftar dan menghasilkan uang dari AdfFly

Code Source : http://helplogger.blogspot.co.id/

Cuman segitu aja teman postingan yang bisa Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya agar blog saya bisa berguna bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya


Wassalamualaikum wr.wb

Artikel Terkait

Previous
Next Post »