Cara Menambahkan Widget Recent Post Super Keren
Assalamualaikum wr.wb
Pada postingan kali ini Haikal share Cara Menambahkan Widget Recent Post Super Keren. Widget Recent Post yaitu salah satu widget Blogger yang berfungsi untuk menampilkan Postingan Terbaru pada sebuah blog
Bagi kaum blogger tentunya widget ibarat ini penting banget kan ? kan dapat berfungsi sebagai media penunjang trafik blog atau media semoga pengunjung semakin kepo dengan blog kita. Dan tentunya recent post widget ini mempunyai Style yang menarik semoga blog mas/mbak dapat lebih terlihat waw, Yuuk eksklusif aja kita simak tutorialnya :
2. Lalu Tambahkan Gadget sesuai cita-cita mas/mbak mau taruh dimananya, recomended sih taruh di sidebar aja biar lebih terlihat widgetnya
3. sesudah itu copy-kan semua instruksi 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEv6yfiwCCxvTeZO8cGcUdqfUkIhuZdoDzZgmuV_-FVHPEc_qMYlPuN5SosEAZr0W18oILBLJZZG-icMtcvHTvyUA-FqlmSkWSowHpbfva3Z36JQr_TI7-40rBGxQfRMOiSCQp7vOd-Wn/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+'" sasaran ="_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" sasaran ="_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+'" sasaran ="_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="https://bhonciel.blogspot.com/search?q=cara-menambahkan-widget-recent-post" 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 simpulan semua tinggal klik Save dan cek diblog anda
NOTES :
- var numpost = 5 : yaitu 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"
Cuman segitu aja teman postingan yang dapat Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya semoga blog aku dapat mempunyai kegunaan bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya
Wassalamualaikum wr.wb
Pada postingan kali ini Haikal share Cara Menambahkan Widget Recent Post Super Keren. Widget Recent Post yaitu salah satu widget Blogger yang berfungsi untuk menampilkan Postingan Terbaru pada sebuah blog
Bagi kaum blogger tentunya widget ibarat ini penting banget kan ? kan dapat berfungsi sebagai media penunjang trafik blog atau media semoga pengunjung semakin kepo dengan blog kita. Dan tentunya recent post widget ini mempunyai Style yang menarik semoga blog mas/mbak dapat lebih terlihat waw, Yuuk eksklusif aja kita simak tutorialnya :
Baca juga : Cara gampang menciptakan Salam Pembuka di Blogger
1. Login ke Blogger , kemudian pada dashboard Blogger pilih Tata letak atau layout2. Lalu Tambahkan Gadget sesuai cita-cita mas/mbak mau taruh dimananya, recomended sih taruh di sidebar aja biar lebih terlihat widgetnya
3. sesudah itu copy-kan semua instruksi 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguEv6yfiwCCxvTeZO8cGcUdqfUkIhuZdoDzZgmuV_-FVHPEc_qMYlPuN5SosEAZr0W18oILBLJZZG-icMtcvHTvyUA-FqlmSkWSowHpbfva3Z36JQr_TI7-40rBGxQfRMOiSCQp7vOd-Wn/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+'" sasaran ="_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" sasaran ="_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+'" sasaran ="_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="https://bhonciel.blogspot.com/search?q=cara-menambahkan-widget-recent-post" 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 simpulan semua tinggal klik Save dan cek diblog anda
NOTES :
- var numpost = 5 : yaitu 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 dapat Haikal informasikan kepada kalian.
JANGAN LUPA Like dan Komentar nya ya semoga blog aku dapat mempunyai kegunaan bagi anda
SEMOGA BERMANFAAT ^_^
Terima Kasih atas kunjungannya
Wassalamualaikum wr.wb