Bayi dan Anak

More kode warna »
Headlines News :
Home » » Cara Membuat Widget Posting Terbaru dengan Sliding Gambar

Cara Membuat Widget Posting Terbaru dengan Sliding Gambar

Cara Membuat Widget Posting Terbaru dengan Sliding Gambar, merupakan salah satu cara untuk menampilkan posting terbaru disertai dengan gambar yang di posting. dan untuk lebih detailnya dapat dicoba sendiri.

Berikut langkah-langkahnya :
1. Login ke blog
2. Rancangan -> edit HTML -> tambah gadget (HTML/JavaScript)
3. Copy Script dibawah ini

Kode yang digunakan :

<script src="https://sites.google.com/site/epgstudiosite/javascript/postbaru.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:95%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:95%px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh3.googleusercontent.com/_1j80TgNqd_8/TWM-EhAZ9TI/AAAAAAAABxk/oFVWP0xWtvU/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://priyayialit.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/epgstudiosite/javascript/postbaru2.js' type='text/javascript'></script>
</div>

Nb :
  •  Kode dengan warna kuning dapat anda ganti dengan dengan tampilan yang anda inginkan.
  •  Jika belum memahami kode diatas, fokuskan pada kode ini : home_page = "http://priyayialit.blogspot.com/"; ganti urlnya dengan url blog anda.
  • Kode : limitspy=4; merupakan jumlah post baru yang ditampilkan dalam slide.
  • Kode : numposts = 10; merupakan jumlah postingan yang tampil pada slide yang tampilnya secara bergantian
  • Kode lainnya silahkan anda coba sendiri untuk mendapatkan tampilan terbaik.
Selamat Mencoba
Share this post :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Priyayi Alit blogger Karawang - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger