Cara membuat Recent Post Slide Show

Cara membuat Recent Post Slide Show

Kali in saya akan share tentang bagaimana cara memasang slide show di blog. recent post sangat penting bagi blog kita karena di mana pengunjung dapat melihat artikel terbaru di blog kita!!!
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.

Lihat contoh gambar Recent Post tampilan Slide Show dibawah ini:


Cara untuk membuat Recent Post Slide Show ini sangat mudah.
Tutorial untuk membuat Recent Post Slide Show dapat anda lihat dibawah ini:
  1. Login ke akun Blogger anda
  2. Klik Rancangan kemudian klik Elemen halaman
  3. Klik Tambah Gadget
  4. Pilih tamabah HTML/Javascript
  5. 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://harinfo-blog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Keterangan:
  • Ganti tulisan yang berwarna merah isi sesuai keinginan sobar karena 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.
Previous
Next Post »

2 komentar

Click here for komentar
February 10, 2016 at 1:23 PM ×

mantap banget gan
terima kasih untuk berbagi info gan
semoga terus berkaya ya gan dan update terus....
thumbs up 4

Balas
avatar
admin

Terima telah berkunjung dan meniggalkan komentar di blog sederhana ini..!

NB :
1. Jangan berkomentar SPAM
2. Jangan meninggalakan LINK aktif karna otomatis akan terhapus.
Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment
Widget by