Cara Mudah Membuat Recent Post Warna-Warni

Kadang Anda perlu berimprovisasi untuk membuat tampilan blog lebih menarik dan membuat pengungung blog jatuh cinta dengan Blog Anda. Namanya orang jatuh cinta ya pengennya bersama-sama terus, kalau blog Anda cantik dan menarik pasti akan membuat pengunjung betah mengexplore apa yang Anda miliki dalam Blog tersebut.

Salah satu cara mempercantik blog adalah dengan menambahkan widget Recent Post yang berfungsi untuk mendisplay posting terbaru Anda, seperti widget ini. Kelebihan dari widget ini adalah memiliki penampilan warna-warni dengan perpaduan thumnail berbentuk lingkarandibagian belakang judul , tampilannya lumayan elegan dan cocok buat Anda yang demen dengan genre blog yang rame. Hebatnya lagi Anda dapat meng-custom warna sesuai selera Anda dengan merubah kode warna yang ada di dalamnya. Anda juga dapat meng-custom jumlah artikel yang ingin Anda tampilkan, jumlah huruf dan lain sebagainya. Mau tahu seperti apa tampilannya, monggo.... silahkan dilihat tampilannya dibawah ini:

[caption id="" align="aligncenter" width="597"] Tampilan recent post[/caption]

Bagaimana? keren bukan..?
Tertarik ingin Recent Post memasang di blog Anda? kalau iya, berikut ini tutorialnya

Recent Post Warna-Warni

Caranya gampang, 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 letek, silahkan perhatikan gambar dibawah ini:

 

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.

 

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></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>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

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 putih untuk merubah background warna masing-masing judul artikel


• 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 yang saya sediakan dibawah artikel ini