Cara Membuat Animasi di Blog

102 views
Skip to first unread message

Ferly Asri

unread,
Jan 31, 2012, 6:22:02 AM1/31/12
to XIIPADUA
cara membuat animasi di blog, memasang ini termasuk cara mempercantik
blog kita.
baiklah sobat semua kali ini saya akan membahas mengenai cara memasang
animasi pada blogspot, Animasi merupakan suatu konten yang akan
membuat tampilan blog anda menarik di mata pengunjung, dengan animasi
blog akan lebih terlihat hidup dan terlihat aktif serta terlihat
dikelola oleh yang empunya blog, dengan cara memasukkan animasi ke
dalam blog kita, semoga pengunjung semakin tertarik dengan blog anda
dan menyempatkan diri mereka untuk datang dan berkunjung kembali ke
blog anda. Berikut adalah cara memasukkan animasi tulisan ke dalam
blog anda. Silahkan ikuti langkah2 berikut ini :

1. Masuk ke situs FLASHVORTEX.COM

2. Pada bagian Menu Di atas, silahkan anda pilih animasi yang ingin
anda buat... Baik itu Menus, Texts, Banners, Button, dll.

3. saya akan kasih contoh banner, Silahkan Pilih banner nya. klik
CLICK HERE TO EDIT THIS

4. Edit kata kata sesuai dengan yang anda inginkan, Lalu klik Generate
Animation..

5. setelah itu anda akan di berikan sebuah kode, copy paste kode
tersebut ke blog anda, baik itu di edit html, postingan, atau pada
gadget baru., siip
sekian tutorial saya mengenai Cara membuat Animasi di Blog, semoga
bermanfaat

Fitria Nur Hardiyanti

unread,
Jan 31, 2012, 7:24:45 AM1/31/12
to XIIPADUA
Cara Mudah membuat Animasi di Blog

cara membuat animasi di blog, memasang ini termasuk cara mempercantik
blog kita, hehehe.
bermanfaat.

Rino Purnomo

unread,
Jan 31, 2012, 9:20:18 AM1/31/12
to 11ipadua...@googlegroups.com
Cara Membuat Animasi di Blog. animasi yaitu membuat gambar yang mati dan menambahkan animasi agar terlihat hidup atau bergerak. nah, tutorial kali ini akan berhubungan dengan animasi yakni tentang cara membuat animasi di blog. sama seperti kekurang-kekurangan dari tutorial yakni membuat blog lemot sekali apalagi menggunakan animasi seperti ini. saran dari saya, sebaiknya sobat tidak perlu menggunakan animasi seperti ini karena selain membuat loading blog lemot, banyak pengunjung yang tidak suka dengan animasi karena menganggap dirinya terganggu. namun untuk yang tetap ingin membuatnya, silahkan ikuti tutorial di bawah ini   :

  • seperti biasa login dulu ke blog anda 
  • klik rancangan
  • pilih edit HTML
  • cari kode berikut : ]]></b:skin> 
  • kemudian copas kode ini :
#animasi_pojok { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  • kemudian cari kode <body> dan taruh kode di bawah ini tepat sesudah kode tadi
    <div id="animasi_pojok"><a href="Alamat blog anda"> <img src="Url gambar anda" border="0" /></a>
    </div> 
Keterangan : 
ubah warna biru dengan URL yang anda tuju, warna hijau ganti dengan lokasi URL gambar anda berada

Ini ada contoh bikin animasi gambar 'Loading' bisa di view ato donlot aje
Animasi Blog.docx

arief abdurachman

unread,
Jan 31, 2012, 9:31:10 AM1/31/12
to 11ipadua...@googlegroups.com

Bagaimana cara membuat animasi recent post dengan mudah

Design sebuah blog berperan penting dalam memberikan kesan pertama untuk pengunjung. Kesan pertama yang baik akan membuat pengunjung betah dan akan berkunjung kembali.

Nah, sekarang saya ingin berbagi dengan sobat yang ingin membuat recent post yang berupa animasi. Berikut cara membuat animasi recent post dengan mudah.

DEMO

1. Setelah sobat login ke blogger

2. Masuk ke menu Rancangan

3. kemudian sobat klik Add Gadget >> pilih HTML/JavaScript

4. Script berikut :

<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] = "https://lh3.googleusercontent.com/-KdP3RAeN7hQ/TsCt3mqIS_I/AAAAAAAAA5U/H4Q8wl_1hgY/s199/no_image.gif";
imgr[1] = "https://lh3.googleusercontent.com/-KdP3RAeN7hQ/TsCt3mqIS_I/AAAAAAAAA5U/H4Q8wl_1hgY/s199/no_image.gif";
imgr[2] = "https://lh3.googleusercontent.com/-KdP3RAeN7hQ/TsCt3mqIS_I/AAAAAAAAA5U/H4Q8wl_1hgY/s199/no_image.gif";
imgr[3] = "https://lh3.googleusercontent.com/-KdP3RAeN7hQ/TsCt3mqIS_I/AAAAAAAAA5U/H4Q8wl_1hgY/s199/no_image.gif";
imgr[4] = "https://lh3.googleusercontent.com/-KdP3RAeN7hQ/TsCt3mqIS_I/AAAAAAAAA5U/H4Q8wl_1hgY/s199/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://masterendi.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://masterendi.googlecode.com/files/animasi%20recentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://www.masterendi.com/2011/11/bagaimana-cara-membuat-animasi-populer.html" target="_blank">Dapatkan Widget Ini</a></small>
Keterangan :
  • Perhatikan kode berwarna merah http://masterendi.com, ganti dengan url blog sobat
  • Kemudian warna pink boxwidth = 255; bisa sobat rubah angka lebar sesuai dengan lebar sidebar blog sobat misal 300
  • Untuk borderColor = "#232c35"; (warna garis). bgTD = "#000000"; (warna background) bisa diganti dengan warna lain. Kode warna bisa dilihat disini.
5. Pastekan di dalam kotak script tadi


6. SAVE

Demikian cara membuat animasi populer post dengan mudah. Happy blogging..
Reply all
Reply to author
Forward
0 new messages