Widget Recent Post Simple Dan Smart

Recent Post atau artikel terbaru adalah salah satu fasilitas yang diberikan oleh Blogspot pada semua template yang disediakan olehnya. Namun demikian kadang Recent Post tersebut kurang memenuhi selera Blogger dan membuatnya mencari alternatif untuk membuat Recent Post dengan tampilan lain yang menurutnya lebih enak dilihat dan sesuai dengan seleranya. Pertimbangan lain kadang juga menjadi dasar pemasangan recent post baru dan membuang recent post bawaan, seperti misalnya pertimbangan penghematan tempat dan posisi yang lebih relevan. 

 

 

Dalam posting sebelumnya saya telah memberikan Tutorial cara membuat Recent Post Full Collor yang juga tidak kalah menarik dengan Recent Post kali ini. Anda dapat mereviewnya kembali, siapa tahu recent post tersebut sesuai dengan selera Anda. Tutorial kali ini juga masih seputar widget Recent Post  yang tidak kalah menarik dengan widget Recent Post yang saya posting sebelunya. Widget Recent Post kali ini memiliki tampilan simple namun memiliki tampilan smart dan dipercantik dengan penambahan nomor di dalam lingkaran yang menunjukkan artikel paring baru yang Anda tulis. Saya sendiri lebih tertarik memasang widget ini dalam Blog favorit saya. Anda dapat melihat demonya DISINI dan melihat screenshootnya dibawah ini

Bagaimana menurut Anda? keren bukan..?
Tertarik ingin memasang di blog Anda? berikut ini tutorialnya

Caranya tidak terlalu sulit, bagi Anda yang sudah terbiasa dengan dashboard blogspot mungkin tidak perlu melihat gambar panduan dibawah ini, Anda tinggal meluncur ke kode HTMLnya dan langsung copy-paste. Tapi saya ingin siapapun yang berkunjung ke blog ini dapat memperoleh manfaat tanpa harus banyak bertanya (artinya gampang difahami) termasuk Blogger baru yang masih belum begitu faham tentang cara pemasangan kode HTML di Blognya, oooppss... banyak ngomong, langsung aja berikut ini "kronologi" pemasangannya:

1. Silahkan masuk ke akun Blog Anda
2. Pilih Blog yang Anda ingin tanamkan widget Recent Post dengan mengekliknya
3. Lalu... ikuti petunjuk di bawah ini:
4. Klik pada tata letak, dan silahkan perhatikan gambar dibawah ini untuk langkah-langkah pemasangannya

5. Klik Tamahkan Gadget, seperti gambar dibawah ini:

6. Akan terbuka halaman pop up dan pilih tambahkan HTML/Javascript seperti gambar dibawah ini:

7. Akan terbuka box tempat Anda meletakkan kode HTML, pada kolom judul silahkan Anda isi dengan judul sesuai keinginan Anda, tapi harus nyambung lho yaa judulnya, setelah itu copy kode HTML dibawah gambar ini, pastekan ke dalam box yang sudah disediakan.

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Sebentar, sebelum di save anda juga bisa mengcustom sesuai keinganan Anda, bagaimana caranya?

• Warna kuning untuk menampilkan jumlah artikel yang ingin ditampilkan

• Warna hijau untuk menampilkan komponen yang ingin ditampilkan, jika ingin ditampilkan ganti kata false menjadi true dan sebaliknya

• Warna ungu untuk menampilkan jumlah huruf untuk cuplikan (kalimat pertama dalam artikel Anda)

• Warna biru untuk untuk mengganti jenis font yang ingin Anda gunakan

Dalam gambar diatas, kode HTML sudah dimasukkan, langkah selanjutnya adalah SAVE atau Simpan.
Bagaimana, mudah bukan? Jika Anda belum faham silahkan Anda bertanya melalui kolom komentar yang saya sediakan dibawah artikel ini