Cara Membuat Widget Recent Posts atau Posting Terbaru

Assalamualaikum Sob, apa kabar di hari Senin yang cerah ini? Mengawali pekan ke-tiga di bulan Februari ini, ane mau berbagi tentang cara menambahkan border pada widget "Posting Terakhir" seperti yang terdapat di blog ini. Script widget "Recent Post" ini ane dapat dari folder BESTSEO-BLOGGER TEMPLATE.

Langsung saja, ane akan jelaskan sedikit tentang penambahan border di widget tersebut. Silakan disimak baik-baik Sob. Semoga mengerti dan bermanfaat.

1. Seperti biasa masuk dulu ke akun Blogger masing-masing.

2. Terus langsung saja menuju ke Rancangan >> Elemen Laman.

3. Klik Tambah Gadget yang ada di mana saja.

4. Selanjutnya, silakan pilih HTML/JavaScript.

5. Isikan judul sesuai keinginan Sobat di kolom "Judul"..

6. Kemudian copy dan paste kode di bawah ini di kolom "Konten".

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

7. Nah, agar widget tersebut mempunyai border serta background, maka ane menambahkan kode seperti di bawah ini.

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}

• Untuk mengatur warna latar belakang, silakan ubah kode #FFFFFF dengan kode warna lainnya.
• Selanjutnya, ubah tebal border, jenis border, dan warna border pada border:1px solid #4169E1; sesuai keinginan Sobat. Kalau mau melihat sekilas tentang border, bisa mampir di sini.

8. Di mana kode untuk border di atas ditempatkan? Ane menaruh kode tersebut sebelum tag </style> sehingga hasilnya akan menjadi seperti di bawah ini.

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}

</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

9. Langkah selanjutnya adalah mengeklik tombol SIMPAN.

10. Seret kotak widget tadi ke tempat yang Sobat kehendaki.

11. Jangan lupa untuk menekan tombol SIMPAN kembali.

12. Silakan lihat hasilnya. Mengenai parameter yang lainnya, Sobat dapat mengubahnya sendiri dengan mengutak-atik kode widget di atas.