Membuat Recent Post With Thumbnails

Assalamu'alaikum wr.wb sobat !!! Apa kabarmu disaat-saat sedang menjalani ibadah puasa di Bulan Ramadhan ini ? Semoga puasanya berjalan lancar dan tentunya amal dan ibadah kita di terima oleh Allah SWT, AMIN ya Robbal A'laminn...

Apa Itu Recent Post With Thumbnails ?
Recent post merupakan suatu info dimana didalamnya memuat tentang sekilas tentang artikel yang baru dibuat di blog kita (update last post). Tujuan utama dari recent post yaitu untuk memberitahu kepada pengunjung tentang postingan yang baru kita posting !.

Dalam postingan saya kali ini, saya ingin memposting tentang 2 buah variasi atau bentuk dari recent post with thumbnail
1. Recent Post with Thumbnail (Original)
2. Recent Post with Thumbnail and a Simple Spy


1. How To Make Recent Post With Thumbnails (Original) ?
Ok, maksud dari tutor membuat Recent Post With Thumbnails Original yaitu dalam pembuatan Recent Post dengan Thumbnailsnya hanya sekedar info dari postingan dan gambar tanpa effect spy (bergerak dengan berganti-ganti)

Ok, Sebagai preview :

Bagaimana ? Menarik ?
Ok langsung saja bagaimana cara membuatnya !

Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan,

Cara Pertama :
- Klik Add Widget (lalu muncul add widget box)
- Pada Box tersebut, terdapat fasilitas searching widget (di pojok kanan atas) lalu  silahkan ketik "recent post" untuk mencari widget recent post.
- Setelah itu muncul hasil pencarian dari "recent post", klik widget tersebut untuk menambah. lalu muncul box configure gadget

- Lalu isilah data-data yang tersedia pada configure gadget tersebut.

- Lalu Klik Save/Simpan (dan lihat hasilnya)


Cara Kedua (Dengan Kode Javascript)
- Klik Add Widget, lalu pilih HTML/JavaScript

- Copy dan Paste kode dibawah, ke isian box html/javascript tersebut : 

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 250px; height: 450px; text-align: left;">

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;


float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>


<script style="" src="http://khamardos.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>


<script style="">


var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>


<script src="http://blogkamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Note : - Kode berwarna merah = Jumlah recent post yang akan muncul
         - Kode berwarna kuning = Ganti dengan alamat blog kamu (ex : khamardos.blogspot.com)

 - Lalu Klik Save/Simpan (dan lihat hasilnya)


2. How To Make Recent Post With Thumbnails and a Simpe Spy ?
kelebihan dari Recent Post With Thumbnails and a simple spy yaitu pada widget recent post thumbnails ini disertai dengan effect berganti-ganti.

Cara Membuatnya yaitu :
1. Login pada Blogger
2. Masuk ke bagian Rancangan, Klik Add Widget, lalu pilih HTML/JavaScript
3. Copy kode dibawah, lalu paste ke isian box html/javascript tersebut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
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:#0284C2;
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:#262B2F;
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 = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;

icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 10;
home_page = "http://khamardos.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://khamardos.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Note :           : Ukuran Lebar sidebar blogmu (bisa dibuat dengan kode 100%)
                    : Warna atau gambar Background
                    : Lebar dan Tinggi Gambar Thumbnails
                    : Jumlah Racent Post yang akan muncul
                    : Alamat Blog Sobat

4. Lalu Klik Save/Simpan (dan lihat hasilnya)

Selamat Berkreasi Sobat

Semoga Tutor ini Bermanfaat

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :