Efek-efek untuk mempercantik blog

Semua Step Menggunakan :

Langkah-langkahnya :

1. Login ke blog kamu.
2. Klik Rancangan.
3. klik "tambah gadget".
4. Pilih dan klik HTML/javascript.
5. Simpan dan LIhat Hasilnya


Efek Salju
Salju wihh dingiiiiiiiinn.. tapi bagaimana jika dalam blog kita ada salju yang mengguyur hasil postingan dalam blog... wah pasti nambah keren.. dan nambah romantis... lihat langkah diatas posting 

<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/efek-salju.js" /></script>

Silahkan dilihat hasilnya.. moga berhasil Contoh Blog dengan Efek Salju : LPQ AL IMAN



Sumber : Disini




Efek Bubble




Bubble disini adalah gelembung-gelembung yang mengikuti cursor... nah banget pasti inget kan bentuk gelembung jika kita sedang diving didalam laut dan udara yang keluar... namun disini efek tersebut berwarna dan warnanya pun dapat kita ganti dengan sesukanya.. tinggal cari list kode warna dan silahkan ganti kode dalam scrip yang ada.... lihat langkah diatas posting

<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>

Contoh Efek Bubble pada Blog  http://rimnifamilies.blogspot.com/





Sumber : DISINI










Efek Petir

Petir ... geledek .. terbayang dibenak kita dengan sesuatu yang seram.. petir mengandung kurang lebih 1 juta volt per meternya... tapi bagaimana jika petir itu ada di blog kita.. nah mari kita pasang langsung saja kodenya... langsung ke TKP.. lihat langkah diatas posting

<style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style>

Silahkan dicoba

Sumber : http://teknik-blog-tutorial.blogspot.com/2012/04/cara-membuat-efek-petir-di-blog.html



Efek Meteor

Mendengar meteor langsung deh pada pemudi langsung inget dengan drama korea.. meteor garden... nah gimana kalo meteor tersebut berjatuhan didalam blog bukan di kebun atau dilapangan... mari kita pasang efek tersebut di blog kita... bagaimana caranya ? sok di copy aja kode berikut....lihat langkah diatas posting

<script language="javascript"> nd_mode="meteor"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_top"; </script> <script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js"> </script>

Silahkan dicoba dan langkahnya adalah sama seperti diatas efek salju Sumber : DISINI




Efek Kembang Api

Kembang Api..  terlihat biasanya dimalam tahun baru... flower basket kalo orang bilang jenisnya.... lalu bagaimana cara pasanga efek tersebut pada blog kita.. sok dilanjut copas kode dibawah ini...lihat langkah diatas posting

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

Sumber : DISINI


Efek Bintang


Bintang... ada dilangit.. ada dilaut .. ada di darat .....didarat ada dibuah-buahan yaitu belimbing heheh becanda... oh iyah untuk membuat efek tersebut langsung copas kode berikut dan cara memasangnya hanya tinggal tambahkan ... lihat langkah diatas posting

Berikut Kodenya

<!-- Star Fall effect by http://tips-mempercantik-blog.blogspot.com --> <script type='text/javascript'> //<![CDATA[ //Configure below to change URL path to the snow image var snowsrc="http://img254.imageshack.us/img254/9386/starspins.gif"; // Configure below to change number of snow to render var no =10; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = "0"; // Configure how much snow should drop down before fading ("windowheight" or "pageheight") var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 400; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>"); } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } //]]> </script>

Sumber : http://monaliasakwati.blogspot.com/2011/01/efek-bintang-berjatuhan-di-blog.html

Moga bermanfaat

Artikel Lain:

Tips dan Trik Bloging

• Membuat Tabel dengan Link
• Memasang Cursor Lucu - terbaru
• Pasang Marquee Unik
• Cara Memasang Real Time Statistik Melayang
• Memasang Cursor Lucu di Blog
• Pasang Google Translate Helper Model Dropdown
• Membuat textarea dengan border menarik
• Cara Membuat Mouse Clock
• Membuat Karkulator di Blog
• Membuat Gambar Mengikuti Cursor
• Cara Membuat Spoiler pada blog
• Membuat Banyak Gambar Berjalan
• Membuat Background dan Border Warna
• Membuat List dan Multilevel List
• Membuat Komentar Mengikuti Kursor
• Membuat Button Berhenti dan Mulai pada Marquee
• Cara Membuat Button Dengan Background Gambar
• Menambah Efek Suara Pada Blog