DUNIA BLOG kali ini berbagi tips-trik blogging tentang membuat animated recent post (with thumbnail). Dikatakan animated recent-post, karena widget ini dapat bergerak ke bawah atau ke atas tergantung cara setting kita. Tips-trik ini DUNIA BLOG dapatkan dari sahabat blogger abdu-green, yang telah terlebih dahulu mempostingnya.
Animated recent-post (with thumbnail) ini bermanfaat untuk menginformasikan kepada para pengunjung tentang kontent atau artikel-artikel yang ada dalam blog kita secara lebih dinamis, karena model widgetnya yang dapat bergerak secara otomatis.
Beginilah cara membuatnya :
1. Dari dashboard > Rancangan > add a gadget > HTML/javascript
2. copy code berikut dan paste di ruangan HTML/javascript
2. copy code berikut dan paste di ruangan HTML/javascript
<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:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff 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://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
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://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://abdu-green.blogspot.com/2011/08/menambahkan-animated-recent-post-widget.html" target="_blank">get this widget here</a></small>
Note: gantikan URL BLOG dengan url blog anda..
3. Save dan lihat hasilnya.
Demikianlah tips-trik tentang membuat animated recent post (with thumbnail) ini, semoga dapat bermanfaat bagi anda sekalian.
Sumber : http://abdu-green.blogspot.com/2011/08/menambahkan-animated-recent-post-widget.html
0 komentar:
Posting Komentar
Berkomentar yang baik dan sopan adalah cermin pribadi anda, isikan komentar anda tanpa spam, No Porno, No Promosi, No SARA, jangan menggunakan Anonimous dan jangan OOT.
Mohon maaf bilamana ada keterlambatan balasan komentar.