Skip to main content

Widget Recent Post Minimalis Tanpa Gambar

Selasa, 30 Maret 2021
Widget Recent Post Minimalis Tanpa Gambar

Widget Recent Post Minimalis Tanpa Gambar - Widget Recent Post atau Postingan Terbaru salah satu widget yang bisa kita manfaatkan dari fitur layanan blogger tersebut. Kita dapat dengan mudah menggunakannya tanpa harus menambahkan kode-kode, sebab blogger sendiri sudah menyediakan widget ini.

Sayangnya widget yang disediakan blogger.com tidaklah bagus alias kurang menarik untuk itu kita perlu sedikit modifikasinya guna mendapatkan tampilan sesuai yang kita inginkan.

Nah buat sobat yang ingin mencoba Widget Recent Post Minimalis Tanpa Gambar ini bisa langsung simak caranya dan demo widget ini bisa anda lihat pada sidebar blog ini, karena saya juga menggunakannya (jika masih ada)

Langkah pertama kita masuk ke dalam dasbor blogger dan perhatikan gambar ini (klik Perbesar)

Widget Recent Post Minimalis Tanpa Gambar

Pilih Tata Letak lalu Tambakan Gadget dan Pilih kemudian paste kode di bawah ini

<div class="recentpoststyle">
<script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 8;var posts_date = true;var post_summary = true;var summary_chars = 70;</script><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></script><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 16px;font-weight: bold;color:#fff;background:#5b86e5; margin:13px 5px 0px 0px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title {margin-bottom: 5px;padding: 0;}.recent-post-title a {color:#5b86e5;text-decoration: none;font: bold 16px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 12px;color: #aaa;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #5b86e5; color: #777; padding: 0px 5px 0px 20px;margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style>
</div>

Simpan dan lihat hasilnya.

Keterangan: var posts_no = 8; (untuk menampilkan jumlah post yang ingin ditampilkan silahkan ubah) perhatikan marking kuning.

Selamat Mencoba...!

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Judul: Widget Recent Post Minimalis Tanpa Gambar Silahkan berikan komentar Anda.
Buka Komentar
Tutup Komentar