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)

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...!

Jejak Unik

Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com

Bagikan Artikel ini