News Update :

Membuat Animasi Recent Post

Wednesday, July 20, 2011

Memiliki design web yang bagus merupakan keinginan semua. Selain enak dilihat dan membuat pengunjung menjadi betah. Untuk saat ini saya akan share beberapa widget agar blog kita kelihatan menarik. Namun bukan pada setting SEO akan tetapi bagaimana Membuat Animasi Recent Post.

Animasi ini merupakan animasi postingan yang sering di baca oleh pengunjungnya, namun tidak diam alias monoton gitu aja...tetapi bergerak seperti slide. Oke..deh langsung aja kita praktekan ya....

Pertama login ke akun blogger anda,

Lalu klik design dan add gadget, pilih HTML/javascript. Copy dan paste script di bawah ini kedalam gadget anda tadi.

<center><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://bebasbekarya.blogspot.com/2011/07/membuat-animasi-recent-post.html" target="_blank">Dapatkan Widget Ini</a></small>



Ganti tulisan URL Blog yang berwarna merah dengan URL blog Anda.

PERHATIAN: tidak semua template blog dapat menjalankan dengan widget ini. Kemungkin sebahagian besar saja yang dapat menggunakan widget ini. Oleh karena itu silahkan coba dahulu di blog anda untuk memastikan ianya berfungsi atau tidak.

Semoga blog anda dapat menjalankan widget ini.
Selamat mencuba.

Baca juga tutorial mengenai cara Membuat Animasi Salju Dalam Blog


Share this Article on :

1 comments:

bayyu said...

seru artikelnya sob...saya juga ada artikel ttg recent post sob,bila ingnin berbagi http://bayyu-mct.blogspot.com/2012/02/cara-membuatanimasi-recent-post-versi-2.html

Post a Comment

 
© Copyright Yahessa Tutorial 2010 -2015 | Design by Yahessa | Powered by Blogger | Search Powered by Google.