Cara Membuat Slide Recent Post Dengan Gambar



Hai sobat blogger.
Pada kesempatan kali ini Koisine Blog akan meluangkan waktunya untuk berbagi tutorial blogger yang mungkin berguna bagi kalian.
Tutorial Blogger yang akan kita bahas adalah cara membuat slide recent post yang dilengkapi dengan image pada sidebar blog.
Slide Recent Post ini sama dengan Recent Post Text, tetapi yang membedakan adalah tampilannya.
Untuk memasang Slide Recent Post ini cukuplah mudah dan tidak sulit, tetapi hanya mengeditnya sedikit.
Langsung saja tutorialnya.
  • Login Terlebih dahulu ke Blogger kalian,
  • Pilih "Rancangan" 
  • Lalu pilih "Tambah Gadget"
  • Pilih "Javascript/HTML" 
  • Selanjutnya Copy script di bawah ini dan Paste pada blog kalian,
<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:260px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:260px;
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] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESd1retwo38tJ3SSvosupbTGSF3PWPwOvxHSLnUj618gE_73BaQ65kjDu5Z3rYOrZ1ZX7y6pLg3Hn573OhbaDe7KdtJcjdfJvnTQP2ivnQccbJ1OPaH8asyHorCssdI76Q7841oc0pzM/s400/noimage.png";
imgr[1] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESd1retwo38tJ3SSvosupbTGSF3PWPwOvxHSLnUj618gE_73BaQ65kjDu5Z3rYOrZ1ZX7y6pLg3Hn573OhbaDe7KdtJcjdfJvnTQP2ivnQccbJ1OPaH8asyHorCssdI76Q7841oc0pzM/s400/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESd1retwo38tJ3SSvosupbTGSF3PWPwOvxHSLnUj618gE_73BaQ65kjDu5Z3rYOrZ1ZX7y6pLg3Hn573OhbaDe7KdtJcjdfJvnTQP2ivnQccbJ1OPaH8asyHorCssdI76Q7841oc0pzM/s400/noimage.png";
imgr[3] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESd1retwo38tJ3SSvosupbTGSF3PWPwOvxHSLnUj618gE_73BaQ65kjDu5Z3rYOrZ1ZX7y6pLg3Hn573OhbaDe7KdtJcjdfJvnTQP2ivnQccbJ1OPaH8asyHorCssdI76Q7841oc0pzM/s400/noimage.png";
imgr[4] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESd1retwo38tJ3SSvosupbTGSF3PWPwOvxHSLnUj618gE_73BaQ65kjDu5Z3rYOrZ1ZX7y6pLg3Hn573OhbaDe7KdtJcjdfJvnTQP2ivnQccbJ1OPaH8asyHorCssdI76Q7841oc0pzM/s400/noimage.png";
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://blogsobat.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script
src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js'
type='text/javascript'></script>
</div>
  • Simpan. 

Tambahan !

  • Silahkan kalian ganti alamat http://blogsobat.blogspot.com/  dengan alamat URL kalian.
  • Untuk angka 260 adalah lebar Slide Recent Post.


Kalian tertarik dengan Widget Slide Recent Post ini, jangan segan-segan Cepat pasang pada Blog kalian.
Sekian dulu tutorial yag dilampirkan dan dibahas Koisine Blog

Semoga artikel ini bisa bermanfaat bagi kalian.

Sumber : Koisine Blog

Selamat Mencoba ........

0 komentar:

Posting Komentar