Cara Membuat Recent Post Slide Show Paling Keren
Recent post atau sering disebut dengan postingan artikel terbaru. Recent Post sangat penting bagi blog kita, dengan recent post maka pengunjung blog dapat mengetahui artikel-artikel terbaru di blog kita. Maksimalkan tampilan blog anda untuk mendapatkan pengunjung yang banyak.
Recent Post bisa ditampilkan dengan banyak ragam, salah satunya dengan Recent Post Slide Show. Recent Post Slide Show ini menggunakan tampilan thumbnail atau gambar, sehingga pengunjung blog kita bisa tertarik dengan artikel terbaru di blog kita.
Saya sertakan gambar Recent Post Slide Show.
Lihat contoh gambar Recent Post tampilan Slide Show dibawah ini:
Tutorial untuk membuat Recent Post Slide Show dapat anda lihat dibawah ini:
- Login ke akun Blogger anda
- Klik Rancangan kemudian klik Elemen halaman
- Klik Tambah Gadget
- Pilih tamabah HTML/Javascript
- Terakhir masukan kode dibawah ini dan simpan. Lihat hasilnya
<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:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
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://gamebloginf.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:245px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:280px;
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://gamebloginf.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
Tambahan:
- Ganti tulisan yang berwarna merah sesuai selera anda, kode merah itu merupakan lebar dan tinggi kolom.
- Ganti tulisan yang berwarna biru dengan Url Blog anda.
- Untuk tulisan yang berwarna hijau adalah jumlah artikel yang muncul dalam Slide Show, anda bisamengantinya dengan keinginan anda.
Semoga tutorial cara membuat recent post slide show ini bisa membantu anda..!
nice info
ReplyDeleteoya,blognya dah aku follow sob.
follback ya :)
rumahkomputerku.blogspot.com
wah berguna banget gan :)
ReplyDeleteafikaohafika.blogspot.com
Bang,.. Itu untuk 4 tampilan recent post Slide Show! Kalau mw bikin lagi atau tambah lagi! Jadi 5,6,7,8 recent post Slide Show! Gimana caranya, Bang! Mohon petunjuk ilmunya bang?
ReplyDeleteuntuk jumlah recent post yang di tampilkan, agan bisa ngrubah di numbpost nya. di situ di tulis numbpost:10..nah tinggal diganti 12 atau 20.
ReplyDeletekalau untuk tampilan thumb atau gambarnya..agan bisa main lebarnya gan..
thanks sob...atas caranya
ReplyDeletewww.arenatekno.web.id
Thanks 4 sharing. Aku dah cba, tapi kok slider yg sudah ada jadi macet, solusinya gimana ya?
ReplyDeleteApa yang anda edit? Pasti ada yang di edit..
ReplyDeleteMantab solusinya gan, langsung kepake... thanks
ReplyDeletewah artikelnya bermanfaat gan
ReplyDeletekeren artikelnya gan...
ReplyDeletefollow back gan ya!!!
http://melajah182.blogspot.com/
makasih atas bantuannya broo, sangat membantu sekali
ReplyDeletekalu cuma text aja bisa ga sob...
ReplyDelete