CARA MEMBUAT WIDGET RECENT POST RESPONSIVE PADA SIDEBAR UNTUK BLOGGER

BLOGGER

CARA MEMBUAT WIDGET RECENT POST RESPONSIVE PADA SIDEBAR UNTUK BLOGGER

Hai Sobat Ladangtekno,

Kali ini mimin ingin membagikan bagaimana cara membuat widget responsive sidebar blogger. caranya tinggal tambahin widget baru saja, kita tidak perlu utak-atik tema atau html temanya, hasilnya seperti gambar dibawah ini

recent post sidebar

Pertama silahkan login ke Dashboard Blogger

Masuk ke Tata letak dan kemudian buat sebuah widget baru pada bagian sidebar, bebas tergantung kebutuhan sobat

Pilih HTML/Java Script pada pilihan jenis widget

Masukan kode dibawah ini ke dalam kota yang sudah disediakan

<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(p){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/AVvXsEhSiVj2vpFhpQeAyV3VpLYn5jNdSRIXDPsgVhao5CSESXABeiE3Z3oosPUEIVIUvZEUboZFXUH17uX3yTBRJCAUYs53QyQLMEwm0V03rleCaWhFYCFBEQiW1WdNxl-aUV-r6SkHKF81Prc_/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="https://www.ladangtekno.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="https://www.ladangtekno.com"></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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}

.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover{color: #4DACE3;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}

.recent-post-title { margin: 5px 0px; }

.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}

.recent-posts-details a{ color: #888;}

a.readmorelink {color: #4DACE3;}

</style>

Silahkan ganti url https://www.ladangtekno.com/ dengan url blog sobat. tulisannya sudah dimerahkan pada bagian kode

Jika sobat ingin mengubah beberapa tampilan silahkan sobat bisa edit pada kode bagian

var posts_no = 5;
UNTUK MENGUBAH JUMLAH POSTINGAN YANG MUNCUL

var showpoststhumbs = false
UNTUK MEMPERLIHATKAN ATAU MENYEMBUNYIKAN GAMBAR PADA WIDGET YANG AKAN DIBUAT

var readmorelink = true;
MEMUNCULKAN TULISAN READ MORE

var showcommentslink = true;
MEMUNCULKAN KOMENTAR YANG TELAH ADA PADA POSTINGAN

var posts_date = true;
MEMUNCULKAN TANGAL POSTINGAN

Jika semua langkah sudah diikuti seilahkan klik simpan.

Tutorial untuk membuat widget recent post pada bagian sidebar sudah selesai, selamat mencobat sobat dan semoga berhasil. jika ada hal yang ingin ditanyakan silahkan tuliskan di komentar

Sekian tutorial dari mimin kali semoga bermanfaat. jangan lupa terus kunjungi ladangtekno dan dapatkan informasi menarik mengenai dunia teknologi. silahkan comement dibawah untuk mendapatkan informasi lebih lanjut.

Tags:
ladangtekno
bloggger