Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog

Penulis : Insan Biasa

Recent Post Bergambar 

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.

Anda sedang membaca artikel tentang Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog dan anda bisa menemukan artikel Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog ini dengan url http://oke-reload.blogspot.com/2013/06/cara-mudah-memasang-widget-recent-post-bergambar-keren-di-blog.html . Anda boleh menyebarluaskan atau mengcopy artikel Cara Mudah Memasang Widget Recent Post Bergambar Keren di Blog ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Tag : Tips Blog

Share :