Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog ~ Download Tips Trik Gratis : Oke Reload™

Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog

Download Gratis, Info Unik, Tutorial Blog, Tips dan Trik Internet

Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog

Recent Post Bergambar 

Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog

Cara Membuat Recent Post Bergambar - Selamat datang dan terima kasih banyak saya sampaikan buat sobat sekalian yang sudah mau berkunjung ke blog ini untuk menambah wawasan atau hanya sekadar lewat seperti angin lalu. Senang sekali rasanya saya bisa kembali online dan bisa menulis artikel baru di blog ini dengan tujuan berbagi kepada sobat. Nah, kali ini saya ingin berbagi tips lagi, yaitu : cara mudah memasang widget recent post bergambar keren di blog. Apa itu widget recent post bergambar? Widget recent post bergambar atau recent post with thumbnail adalah widget artikel terbaru yang disertai gambar pada suatu blog. Seperti biasanya cara memasang recent post bergambar sangat mudah dan silakan simak langkah-langkahnya berikut ini :

Silakan sobat login atau masuk ke akun Blogger masing-masing.

Silakan klik tulisan Tata Letak dan kemudian klik tulisan Tambahkan Gadget pada sebelah kiri atau kanan tulisan Posting Blog.

Nanti akan muncul jendela pop-up bertuliskan Tambahkan Gadget dan klik tulisan HTML/Java Script.

Setelah itu, akan terbuka jendela pop-up baru lagi bertuliskan Mengonfigurasi HTML/Java Script dan isi pada kolom Judul dengan nama Recent Post atau Artikel atau Tulisan Terbaru. Lalu, silakan masukkan kode recent post bergambar berikut ini pada kolom bertuliskan konten:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:325px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOvTTb2DVY1TTkq6-rV3R1Ean4y9H9n5UDBHOjq9veFLMwTWxNjZUq4eZ6qxMLiwzsMgssihH7QRz6Wb1ysl9zMSNuqObU9MvBRVJ_BxP1aBsmYrrHLA5VajL2v4qQOUI2viDdkq2Jwl8/s200/Zhang+Xin+Yu.jpeg) repeat-x;
border:1px solid #ff0000;
}
#spylist li a {
text-decoration:none;
color:#FF0000;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#000000;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#000000;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://oke-reload.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script type="text/javascript" src="http://yourjavascript.com/32161236078/recent-post-bergambar.js"></script></div>

Keterangan:
Background:#fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOvTTb2DVY1TTkq6-rV3R1Ean4y9H9n5UDBHOjq9veFLMwTWxNjZUq4eZ6qxMLiwzsMgssihH7QRz6Wb1ysl9zMSNuqObU9MvBRVJ_BxP1aBsmYrrHLA5VajL2v4qQOUI2viDdkq2Jwl8/s200/Zhang+Xin+Yu.jpeg) adalah kode warna atau url background recent post dan silakan ganti dengan kode warna atau url gambar pilihan sobat. Jika ingin backgroundnya putih saja silakan hilangkan tulisan/kode url (url gambar sobat) sehingga menjadi background:#fff

Color:#FF0000 adalah warna teks judul recent post dan silakan ganti dengan kode warna lain misalnya #000000 untuk kode warna hitam.

Show Random Img = true artinya recent post bergambar akan ditampilkan secara acak dan jika mau berurutan sesuai tanggal ganti dengan kata false atau no.

boxwidth = 300 adalah luas kotak recent post dan bisa sobat ganti sesuai selera.

Show Post Date = true artinya tanggal recent post akan ditampilkan dan jika tidak ingin muncul ganti dengan kata false atau no.

Num posts = 5 adalah jumlah recent post yang mau diperlihatkan dan bisa diganti angkanya sesuai keinginan sobat.

Home_page = "http://oke-reload.blogspot.com/" adalah alamat blog ini dan silakan ganti dengan alamat blog sobat.

Bila sudah selesai mengeditnya, silakan sobat klik tulisan atau tombol Simpan. Lalu, silakan sobat lihat hasilnya untuk memastikan bahwa widget recent post bergambar sudah terpasang di blog sobat. Selamat mencoba dan semoga berhasil. Sekian dan terima kasih.

2 komentar

Mnrt hemat saya recent post dgn gambar lbh menarik dari pada mencantumkan judul saja

Saya ucapkan terima kasih kepada mbak yang sudah sudi berkunjung ke blog aneh ini. Benar sekali recent post bergambar lebih menarik tapi bikin loading internet atau blog menjadi lambat. Kalau lambat bikin makhluk hidup apalagi mbah Google ngambek dan kapok mampir ke blog kita. Hahahahaha !!!

2 Komentar untuk "Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog"

Aturan Berkomentar di Blog Ini:

1. Gunakan anonim bila tidak punya akun Google atau blog dan tidak ingin diketahui orang siapa Anda.

2. Gunakan akun Google atau nama dan url blog atau open id jika ingin mendapatkan kunjungan balik.

Back To Top