English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Minggu, 22 April 2012

Cara Memperindah/Mempercantik Blok Kita

Label:

widget animasi blog


Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot
Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger
  • Klik Design > Page Element > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0rP1pJ6PV-LTwE0nuxSi57uFgTBWUJPVKtFBYCvMIfrVtMiBtSbKhyphenhyphen8-YI1t5bX8alBWhu5wiQdWSjbYiAAB4Chk4AqOnvQuLGFE1anHIP5nFXPdhEzTybVxqIkbD0hlAouQsP1Yno8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/@sagittario_";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>






  • Ganti kode yang berwarna biru dengan akun Twitter sobat
  • Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Rubah Warna Burung Twitter

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGLMtVFTrqMDF8LCHHuL5FkwjVHJ_z4eZpPxDc4GNIKOji3itWdWOJ4WQKhgFJntH2fTxv0eCpMgHdAnQVLBtyVOguBYfW8gXvqEmc6Xq1ulg91fN5aZoC3GJaT0VYJHURiEjNTDRv7Jc/s1600/yellow+bird.png
Warna Hitam
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBd_MhAXuLoPQM3tBg9kftEBYoQ4eudAfj9wZvbtGj4fISbD3nDcdK89Kz1vLxwFaWS7BJNXFF-_ezG9so34USpwgeKG-P4Z48Q0Dw9cqlATk_eq4O5T_4OcwEUsJuSE5gm0PzfT8t6w/s1600/black+bird.png
Warna Biru
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPXrZ37zS_oFwgrXzGeabIPfCpIaIYBL5wt_yxMiIndxUvVfVqh9zqPGjt-TmGPu9Iz-hMtWd9ZiX0WoEzsGACHi6A7fUS9kQCq4AaeDJLzPey9E1hdMk1t2J2RPoXj7JqWRXTWYKoecU/s1600/Blue+bird.png
Warna Coklat
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEQ6SGj7cG7HYoMKzHb_A-iJvJJffaRQEBLGYQ92H3P-dy0-3eC45j1EDOSovhyphenhyphenBtLP63UcgxglEG3hl1oWoBrWe-1cpN41N6ClCuPSTmD-gGF1fK47_71Tsr04zzyP7O7Drj7QwW_CHo/s1600/brown+bird.png
Warna Hijau
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzxJazWm-tEYhoetldvPyPwgJhPfq9d3NHFEbjCS1jXnPt5bnLhvjGB1hTGNSfYwoUyMnNG58kkTaeEjUEl7y56bsoPyebQZqWTX634ZC2lrb2iVy0-vWzSHXbicJoagPuvYjwZvCEBE/s1600/Green+bird.png
Warna Ungu
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWLvn2RK4R_DVUU93sL7qEt_HN4pM6egC2lfhgRaY0pEePZIjyx5KD02Se1PB2n_TNQAlBQCePuy9F-dopo8qDR4jgHdmpcZxp0KUV9shjJaLO-Ln_xafPrfnrvxn1eoigSsySaH9BQc/s1600/purple+bird.png
Warna Putih
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGdaEo-8yZghxzISLSwqTBossha47-YcmOPojHIhq-0v0uhxrOdWIRLBiRX9NDwzI2hkSewjOtlEdJs8SS4OH8sjKdrY2CKuzjtD6H4HGRoHDg0UGA2CXaURwzBfhM_DKYiBa9O1s34Y/s1600/white+bird.png
Warna Merah
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-a5bX_kTmnuBrmftEbWNE1EpOqjIjBBoQkHUHB1PL0AisQJitpKkQEx__yupypkM68IHjeIvtnyD-FPO6JDjUmnKWOti-JRETSWSCpBIlUw2_OGOaiJYppFlviShB17MH4PncylmrkI/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!


Cara Memasang Efek Salju Pada Blog - Efek ini menurut saya lumayan bagus untuk diterapkan. Bagi yang ingin blognya terlihat cool (baca: keren) disambut dengan hiasan-hiasan menarik mungking dapat membuat pengunjung blog anda menjadi betah (jika pengunjung itu suka dengan animasi menarik). Ukuran script efek salju ini 3.1 KB.

VIEW: [DEMO SNOW EFFECT]

Bagaimana cara memasang efek salju pada blog?

Adapun caranya dengan step by step adalah sebagai berikut:
1. Pastikan terlebih dahulu anda sudah login ke akun Blogger anda.
2. Kemudian klik/masuk ke halaman Layout.
3. Klik Add a Gadgets dan pilih widget HTML/Javascript.
4. Salin kode berikut dan letakan di kotak script.
<script src='http://anvity.googlecode.com/files/snow.js' type='text/javascript'></script>
5. Save widget.

Semoga Berhasil. ^^


Tip Membuat Efek Gelembung Bola Pada Kursor

Cara membuat efek Gelembung bola Pada Cursor
* Login ke blogger, lalu masuk ke Dasboard.
* Pilih > Tata Letak / Rancangan, lalu pilih > Tambah Gadget
* Pilih > HTML/JavaScript
* Kopi paste/masukkan kode berikut ini di kotak area konten html

<noscript></noscript><!– –><script type=”text/javascript” src=”http://www.freewebs.com/p.js”></script><script type=”text/javascript”>
    // <![CDATA[
    var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=100; // maximum number of bubbles on screen
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();
    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";
    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight=”1px solid “+colours[1];
    div=createDiv(“auto”, “auto”);
    rats.appendChild(div);
    div=div.style;
    div.top=”0px”;
    div.left=”1px”;
    div.right=”1px”;
    div.bottom=”0px”
    div.borderTop=”1px solid “+colours[0];
    div.borderBottom=”1px solid “+colours[2];
    div=createDiv(“auto”, “auto”);
    rats.appendChild(div);
    div=div.style;
    div.left=”1px”;
    div.right=”1px”;
    div.bottom=”1px”;
    div.top=”1px”;
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter=”alpha(opacity=50)”;
    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}
    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+”px”;
    bubb[c].top=(bubby[c]=y)+”px”;
    bubb[c].width=”3px”;
    bubb[c].height=”3px”
    bubb[c].visibility=”visible”;
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout(“bubble()”, 40);
    }
    function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+”px”;
    bubb[i].height=bubbs[i]+”px”;
    }
    bubb[i].top=bubby[i]+”px”;
    bubb[i].left=bubbx[i]+”px”;
    }
    else {
    bubb[i].visibility=”hidden”;
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }
    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)==”number”) {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    if (typeof(self.pageYOffset)==”number”) {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement(“div”);
    div.style.position=”absolute”;
    div.style.height=height;
    div.style.width=width;
    div.style.overflow=”hidden”;
    return (div);
    }
    // ]]>
    </script>

Keterangan
warna hijau adalah kode yang bisa diganti dengan kode warna yang lain
~ Simpan/save
Anda bisa klik pratinjau dahulu untuk memastikan hasilnya. Demikianlah temen-temen apa yang bisa kita sharing kali ini untuk tips membuat efek gelembung bola pada Kursor.


cara mudah membuat efek bintang bertaburan di blog

cara membuat efek bintang di blog ini yang kali ini di bahas oleh berry blog, cara mudah dan cepat untuk membuat efek bintang ini, dimana juga saya sebelumnya sudah membahas mengenai cara membuat efek berkedif, nah kali ini saya akan membahas Cara Membuat Efek Bintang Bertaburan di Blog juga berguna bagi yang ingin mempercantik blog, caranya :

-Login terlebih dahulu ke Blog Anda
-Kemudian masuk ke Pengaturan > Template > Edit HTML
-Jangan lupa backup terlebih dahulu template sobat -Setelah itu di halaman HTML, cari kode <head> di bagian atas,gunakan ctrl f
-Setelah itu copy kode berikut tepat di bawah tags <head>

<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>

nah demikian tutorial saya mengenai cara memasang efek bintang pada blog, semoga bermanfaat .

cara memasang gambar animasi di blog

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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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://www.komputerseo.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





Pasang widget welcome to my blog


Widget ini posisi adanya di sebelah pojok kanan atas
blog. Tampilannya seperti yang anda lihat pada gambar
yang ada di bawah. Bila anda ingin memasangnya,
cukup anda tambah gadget HTML/JavaScript dengan
judul yang dibiarkan kosong saja. Gadget ini anda
tambahkan di bagian mana saja atau bisa juga anda
satukan dengan gadget lainnya, dengan diberi spasi
bawah tentunya.Copy kode yang tertera di bawah ini
lalu anda masukkan dalam kontennya.


TAMPILANNYA SEPERTI INI :




Photobucket
Diposting oleh Arifn Sagittario Word's di 05.59

0 komentar

Posting Komentar