Jumat, 06 Desember 2013
Membuat Widget Artikel Terbaru Dengan Slide di Blog
Bikin Blog Artikel Terbaru memang sudah banyak kita jumpai Tutorialnya di blog lain.
Tapi yang saya akan jelaskan di artikel ini adalah Membuat Artikel Terbaru Dengan Slide seperti pada sidebar saya di sebelah kanan itu.
Terlihat sangat Menarik bukan?
daripada terlalu banyak basa-basi cuma bikin penuh postingan Langsung aja Masuk ke Cara Pemasangannya
Membuat Artikel Terbaru Dengan Slide
1. Pertama Login ke blog
2. Rancangan - Elemen Laman
3. Pilih Tambah Gadget - HTML/JavaScript
4. Lalu Masukan Kode di bawah ini
<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:285px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:273px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#6d6666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4c4848;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#6d6666;
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://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[1] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[2] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[3] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[4] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
showRandomImg = true;
boxwidth = 290;
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 = 15;
home_page = "http://www.blogger.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>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:285px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:273px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#6d6666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4c4848;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#6d6666;
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://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[1] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[2] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[3] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
imgr[4] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
showRandomImg = true;
boxwidth = 290;
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 = 15;
home_page = "http://www.blogger.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>
5. Save
Keterangan:
- http://img339.imageshack.us/img339/8822/71411271.jpg Bisa anda ganti dengan alamat gambar anda yang ingin di tampilkan pada Daftar postingan yang tidak memiliki gambar.
- http://www.blogger.com/ Ganti dengan Alamat Blog anda
Tentunya itu juga akan Membuat Blog anda terlihat semakin menarik.
Anda pun bisa merubah ukuran dan warna agar menyesuaikan pada Template Blog anda dan tenetunya makin mempercantik Tamplian blog anda.
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar