Sunday, July 14, 2019

CARA MEMBUAT WIDGET RECENT POST RESPONSIVE PADA SIDEBAR UNTUK BLOGGER

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
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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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

2 comments:

  1. Untuk menyembunyikan nomer postingan gimana ya

    ReplyDelete
    Replies
    1. nomor postingan itu bagaimana maksudnya ya gan? nomor dimananya?

      Delete

komentar dengan bijak ya :)
please write comments wisely :)
EmoticonEmoticon