Cara memasang gambar animasi lucu di pojok blog (widget animasi blog gratis)

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat



Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>

2. Boring


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>

3.Tuyul ketawa


Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>

4.Boneka joget


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>

5. Panda main bola


Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget-Animasi-Blog</a></center></small></div>

6. Tuyul baring


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru



Script

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah



Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

9. Bunga




Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

10.Anjing laut


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

11.Lumba-lumba


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur



Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

14.Dragon


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

15.Ikan


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

16.Pinguin


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://chumhienk-mhienk.blogspot.com/" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog :

1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Rancangan - Elemen halaman

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript

Catatan:


Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog


Artis

1. Leonardo




Untuk widget animasi gambar artis bisa dilihat scriptnya disini widget animasi blog


Gambar di bawah ini belum sempat saya edit scriptnya.
.


9. Pintu



10.Teriak


11. Terkurung



12.

13. Sincerely


14.



15. Menangis




17. Piala



18. Sundul bola


19. Tawon


20.Kipas



21.





24.Telur menetas



25.Ayam bertelur



26.Beruang


27.



29. Kucing





source : http://www.komputerseo.com/

Cara membuat teks bergerak melingkar mengikuti gerakan mouse (Circling text trail)

Cara membuat teks bergerak melingkar mengikuti gerakan mouse atau dalam istilah bahasa Inggris dikenal dengan nama "Circling text trail". Teks tersebut akan bergerak melingkar mengelilingi pointer mouse disaat mouse sedang idle. Teks yang akan ditampilkan dapat diatur sesuai keinginan.

Yang perlu dilakukan adalah dengan memasukkan script di bawah ini ke dalam gadget html/javascript.

<style type="text/css">

/* Circle Text Styles */

/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #000;

/* End Optional */

/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type="text/javascript">

/* Circling text trail- Tim Tilton

   Website: http://www.tempermedia.com/

   Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

   Modified Here for more flexibility and modern browser support

   Modifications as first seen in http://www.dynamicdrive.com/forums/

   username:jscheuer1 - This notice must remain for legal use

   */

;(function(){

// Your message here (QUOTED STRING)

var msg = "Welcome to my blog!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

 e = e || window.event;

 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

 if(init.nopy){

  o.style.top = (b || document.body).scrollTop + 'px';

  o.style.left = (b || document.body).scrollLeft + 'px';

 };

 currStep -= rotation;

 for (var d, i = n; i > -1; --i){ // makes the circle

  d = document.getElementById('iemsg' + i).style;

  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

 };

},

drag = function(){ // makes the resistance

 y[0] = Y[0] += (ymouse - Y[0]) * speed;

 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

 for (var i = n; i > 0; --i){

  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

  x[i] = X[i] += (x[i-1] - X[i]) * speed;

 };

 makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

 if(!isNaN(window.pageYOffset)){

  ymouse += window.pageYOffset;

  xmouse += window.pageXOffset;

 } else init.nopy = true;

 for (var d, i = n; i > -1; --i){

  d = document.createElement('div'); d.id = 'iemsg' + i;

  d.style.height = d.style.width = a + 'px';

  d.appendChild(document.createTextNode(msg[i]));

  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

 };

 o.appendChild(oi); document.body.appendChild(o);

 setInterval(drag, 25);

},

ascroll = function(){

 ymouse += window.pageYOffset;

 xmouse += window.pageXOffset;

 window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

 window.addEventListener('load', init, false);

 document.addEventListener('mouseover', mouse, false);

 document.addEventListener('mousemove', mouse, false);

  if (/Apple/.test(navigator.vendor))

   window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

 window.attachEvent('onload', init);

 document.attachEvent('onmousemove', mouse);

};

})();

</script>

Keterangan:
Ganti teks Welcome to my blog! dengan teks yg anda inginkan

Hasilnya bisa dilihat di blog ini circling text


source : http://www.komputerseo.com/

Membuat teks animasi dengan efek neon light

Jika tertarik mencoba efek neon pada text ini , silahkan copy script di bawah ini kemudian masukkan ke dalam gadget html/javascript atau ke dalam postingan,
Scriptnya bisa dilihat di bawah ini :

    <h2><script language="JavaScript1.2">
    //Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
    //visit http://www.beta-cc.de
    //Visit http://www.dynamicdrive.com for this script

    var message="Sharing Information and Knowledge in All Things"
    var neonbasecolor="blue"
    var neontextcolor="green"
    var neontextcolor2="#FFFFA8"
    var flashspeed=100 // speed of flashing in milliseconds
    var flashingletters=3 // number of letters flashing in neontextcolor
    var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
    var flashpause=0 // the pause between flash-cycles in milliseconds

    ///No need to edit below this line/////
    var n=0
    if (document.all||document.getElementById){
    document.write('<font color="'+neonbasecolor+'">')
    for (m=0;m<message.length;m++)
    document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
    document.write('</font>')
    }
    else
    document.write(message)
    function crossref(number){
    var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
    return crossobj
    }

    function neon(){
    //Change all letters to base color
    if (n==0){
    for (m=0;m<message.length;m++)
    crossref(m).style.color=neonbasecolor
    }
    //cycle through and change individual letters to neon color
    crossref(n).style.color=neontextcolor
    if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
    if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
    if (n<message.length-1)
    n++
    else{
    n=0
    clearInterval(flashing)
    setTimeout("beginneon()",flashpause)
    return
    }
    }
    function beginneon(){
    if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed)
    }
    beginneon()
    </script></h2>

Keterangan :
Ganti teks "Sharing Information and Knowledge in All Things" dengan teks yang ingin ditampilkan
Pada var neonbasecolor="blue" bisa ganti gray dengan warna lain
Pada var neontextcolor="green" bisa ganti yellow dengan warna lain
Pada var neontextcolor2="#FFFFA8" bisa ganti #FFFFA8 dengan warna lain
Pada var flashspeed=100 bisa ganti 100 dengan speed yang diinginkan


source : http://artikelkomputerku.blogspot.com/

Cara Membuat Fan Pages di Facebook

Tips dan trik membuat fan pages di facebook - Facebook yang kita kenal merupakan salah satu situs jejaring sosial yang sangat banyak penggemarnya. Banyak orang mendaftar di facebook karena keamanan, terkenal, dan juga banyak fitur tambahan yang bisa kita dapatkan secara gratis.

Salah satunya adalah fan pages. Fan pages adalah salah satu media di Facebook yang bisa digunakan sebagai media tempat "fans kita" berkumpul. Dalam artian lain, sebagai tempat mangkal para fans kita . Jika anda seorang yang terkenal, anda bisa membuat fan pages di facebook.

Nah, bagaimana membuat fan pages di facebook? Mari kita belajar bersama:
1. Login dulu ke account facebook anda. Lihat cara mendaftar di facebook
2. Ketik di addreass bar: www.facebook.com/pages/create.php
3. Selanjutnya, akan ada form isian untuk menjadi 'kartu pengenal' fan pages kita.

4. Setelah semua form di isi, kemudian Klik Create page
5. Selesai.

Dan inilah tampilan fan pages yang baru saja dibuat. Fan pages ini adalah fan pages dari info berita terbaru.

Gampang bukan? 

sumber : http://infoberitaterbaru.blogspot.com/

Cara Memasang Widget Alexa

Untuk para blogger baru, ada kalanya kita ingin mengetahui bagaimana kepopuleran blog kita. Nah, buat anda yang ingin mengetahui rangking blog kita secara internasional, ada widget blog bernama alexa rank yang fungsinya mengukur kepopuleran blog berdasarkan informasi dari komputer yang browser internetnya memasang alexa toolbar. Semakin bagus rangking blog kita, maka akan semakin semakin kecil nilai rangking blog kita.

Bandingkan rangking alexa ketiga blog dan website berikut:

Dari ketiga traffic rank di atas, maka situs yang paling kanan adalah yang paling bagus alexa rank nya dibandingkan yang di kiri . Ini berlaku untuk semua situs atau blog. Semakin kecil nilai alexa dari sebuah blog, maka akan semakin populer juga blog kita, sehingga pada akhirnya akan berimbas pada jumlah pengunjung ke blog atau website kita.

Untuk memasang widget alexa rank, pertama-tama kunjungilah, situs www.alexa.com. Kemudian pilih menu for site owners yang terletak pada pojok kanan atas situs

 Kemudian pilih menu "get traffic widgets"

Akan ada 3 site widgets yang akan muncul, tapi saya menyarankan hanya 2 yang paling sering dipakai, yaitu yang saya beri tanda panah

Silahkan pilih tampilan alexa rank yang anda inginkan kemudian masukkan alamat web atau blog anda di kotak yang telah disediakan. Jika sudah, akan muncul tampilan seperti di bawah ini:

Terakhir kopikan kode HTML tersebut ke add gadget di dashboard blog anda, caranya klik disini

sumber : http://wahw33d.blogspot.com/2010/01/cara-memasang-widget-alexa.html#ixzz1DTEKl5f6

Etika ngeblog

Memang benar blog itu dapat membuat kita menjadi eksresif dalam menuangkan gagasan-gagasan yang ada dalam pikiran kita. Memang benar blog memberikan kebebasan untuk berkomentar, bercuap-cuap dan berinteraksi antar sesama pengguna blog. Namun, di luar itu tetap juga ada batasan-batasan normatif yang sebaiknya jangan kita langkahi agar tidak dianggap kurang ajar dalam memanfaatkan blog.

Seperti yang diutarakan Rebecca Blood, si master blogger, "The weblog greatest strength - its uncensored, unmediated, uncontrolled voice - is also its greatest weakness. Kekuatan blog sebagai sarana berekspresi sebebas-bebasnya justru dianggap sebagai titik terlemah dari blog itu sendiri. Maka dari itu dibuatlah buku "The Weblog Hadbook: Practical and Maintaining Yout blog" yang isinya membahas seputar etika ngeblog itu sendiri.

Adapun garis besar kode etik ngeblog, diantaranya:

1. Tulislah Fakta.
2. Hargai sumber tulisan.
3. Koreksi tulisan.
4. Tidak menghapus tulisan.
5. Tidak mengganti alamat postingan.
6. Keterbukaan terhadap konflik kepentingan.
7. Tidak menghapus komentar.
8. Tahu batas pribadi dan publik.
9. Tidak kopi-paste.
10. Tidak memicu kerusakan.
11. Menampilkan identitas.

Contoh diatas merupakan hal yang lumrah jika kita sudah berada di area blogging, maka dari itu camkan daftar diatas sebelum anda memulai ngeblog...

sumber : http://wahw33d.blogspot.com/2010/01/etika-ngeblog.html#ixzz1DTDmRjU8

Memasang Kode HTML pada Postingan

Buat kawan-kawan blogger sekalian yang baru mengenal dunia blog, mungkin masih agak sedikit kebingungan untuk memasukkan kode HTML pada blog. Kalau kita memasukkan secara langsung script html ke dalam postingan, maka ketika kita terbitkan entri akan muncul nilai dari script yang kita pasang itu. Seperti contohnya, jika kita memasang script di bawah ini secara langsung ke dalam blog:

<center><script type="text/javascript" src="http://widgets.amung.us/colored.js"></script><script type="text/javascript">WAU_colored('ji9kvu9qwlk2', '2e3192fff200')</script></center>

maka jika kita terbitkan postingan, yang akan muncul bukanlah kode diatas, melainkan hasil dari pengkodean diatas. Dan hasilnya adalah seperti yang anda lihat di bawah ini:




Nah, untuk yang ini, kita perlu memparse/mengencode kode html yang akan kita posting. Untuk memparse kode, kita pergunakan HTML ENCODER, klik disini, masukkan kode html yang ingin anda pasang, kemudian klik encode. Setelah itu pasang hasil dari encode nya maka akan tampil kode yang ingin anda posting.

SELAMAT MENCOBA............

sumber : http://wahw33d.blogspot.com/2010/02/memasang-kode-html-pada-postingan.html#ixzz1DTDFw5Li