Learning Education and Bussines

June 04, 2009

Onmouse Over Link Effect

Author: Desta | Posted at: 1:10 PM | Filed Under: Trick For You

Onmouse Over Link effect, ini merupakan salah satu cara untuk sobat dalam membuat tampilan teks yang merupakan Text Link atau Hyperlink yang memiliki efek tambahan saat mouse menunjuknya (onmouse over). Sekarang coba sobat tunjuk judul pada salah satu posting pada blog ini, atau pada bagian Categories, Recent posting, pada sisi kiri blog ini.
Saat sobat tunjuk menggunakan mouse perhatikan bagaimana perubahan pada teks link tersebut. Secara sederhana seperti pada gambar berikut ini :

Sebelum di tunjuk mouse

Setelah di tunjuk mouse

(bukan perubahan ukuran gambarnya, tetapi tampilan teks tersebut secara nyata)dimana terjadi perubahan ukuran teks, dan warna background, saat mouse menunjuk teks link tersebut.Ok deh kita lanjutkan caranya ....

Untuk membuat efek pada teks link tersebut ikuti langkah berikut ini :
1. Login ke blogger sobat, masuk ke Tata Letak / Layout - Edit HTML
2. Copy script berikut ini dan Paste - kan setelah <head>

<style>
a:hover{color:red; font-weight:bold; font-size:18; background-color:black; }
</style>

3. Klik Save / Simpan Template

Sobat dapat memodifikasi script diatas pada color, font-weight, font-size, background-color sesuai dengan keinginan sobat.
atau
Jika ingin membuat sendiri silahkan sobat klik Disini

ikuti langkah-langkahnya yang pada akhirnya sobat akan mendapatkan Script-nya.

ok mudah bukan Selamat Mencoba ....!

catattan :
Semua Teks yang merupakan Hyperlink pada blog sobat akan mendapatkan efek ini.

June 03, 2009

Membuat Text Marquee

Author: Desta | Posted at: 7:35 AM | Filed Under: Trick For You

Trik ini saya posting untuk menjawab pertanyaan dari sobat Tiar, yaitu bagaimana tampilan menu yang baik berupa teks atau pun image yang memiliki link nya bergerak seperti ke atas, ke kiri, ke kanan, bahkan ke bawah. Seperti pada tampilan berikut ini (image yang memiliki link)

atau seperti ini (teks yang memiliki link)

Artikel Hakikat Pengabdian
Tutorial Pengenalan Internet
Tutorial Membuat Logo WMP
Tutorial_Flash 4
Tutorial Ms. Excel
Tutorial Ms. Access
Tutorial Membuat Animasi

Silahkan lanjutkan dulu membacanya ...

untuk membuat tampilan tersebut ikuti langkah-langkah berikut ini :
1. Copy kode berikut ini

2. Paste -kan kode tersebut dimana akan ditampilkan (kolom kiri, kolom kanan, bahkan pada posting artikel sobat)

3. Silahkan pada bagian .......... sebelum </marquee> sobat tambahkan URL baik itu untuk image maupun teks yang memiliki link ke tempat lain seperti untuk Download maupun link banner, advertiser dengan image dll.

4. Simpan atau Terbitkan Entri jika pada posting blog, silahkan lihat hasilnya.

Penjelasan kode diatas

scrollamount : untuk mempercepat atau memperlambat gerakannya, dengan mengubah nilainya ("2", "3", "4", ..) semakin tinggi angkanya semakin cepat gerakkannya.

direction : untuk mengubah arah gerakkannya "up" (ke atas), "down" (ke bawah), "left" (ke kiri), dan "right" (ke kanan).

width dan height : untuk ukuran lebar dan tinggi penempatan URL yang anda tampilkan

align : posisi dari URL pada tempat tersebut "left" "right" "center".

Ok saudara tiar semoga bermanfaat...silahkan mencoba...!

June 01, 2009

Floating Top Bar

Author: Desta | Posted at: 9:19 AM | Filed Under: Trick For You

Floating top bar merupakan tampilan sebuah baris yang terletak pada bagian atas (head) dari sebuah tampilan jendela browser yang aktif serta memiliki content (isi) hasil preview dari kode-kode HTML yang kita buat sendiri atau kode yang berasal dari sebuah web penyedia feature yang sering sobat gunakan untuk penghias blog.
Secara sederhana dapat sobat lihat seperti pada gambar berikut ini (tunjuk agar gambar membesar):

Tepatnya pada bagian kotak berwarna yang berisi Your content here dan sebuah tombol

diatas. Keunikan dari bar ini adalah …??

jika user menggulung mouse untuk melihat isi dari layar browser pada bagian bawah maka secara otomatis bar tersebut akan turut serta mengikuti hingga dapat terus terlihat oleh user, akan tetapi dengan menekan tombol

pada sisi kirinya maka bar tersebut akan menutup dan hilang dari pandangan user, atau sebaliknya jika sobat ingin pesan pada bar tersebut tetap ada dan user tidak dapat menutupnya, sobat hanya sedikit membuang / menghapus beberapa script kode pembentuknya.(sobat lihat sisi kiri atas blog ini / " Wellcome in my blog " teks dibuat pada glittermaker)

Ok jika sobat ingin mencoba membuatnya ikuti langkah-langkah berikut ini :
1. Login pada blog sobat, kemudian masuk ke Tata Letak / Layout – Edit HTML
2. ENCODE terlebih dahulu Script berikut ini :
untuk melakukan ENCODE klik Disini Jika sudah Copy dan Paste kan script tersebut (yang sudah di ENCODE) setelah tag <head> pada template layout sobat.
Kode yang harus sobat ENCODE :

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- Â© Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

3. Copy Script berikut ini dan Paste – kan setelah tag <body> , untuk Script ini tidak perlu sobat ENCODE
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>
Your content here.
</div>

4. Silahkan sobat ganti pada Your content here dengan teks yang berupa kode HTML- nya.
Misalnya kode HTML seperti ini :
<font face="Arial" size="3" color="blue">Selamat Datang di Blog Saya</font>

5. Klik Save / Simpan Template

Catattan :
Pada Langkah 2 diatas Dapat sobat ganti warna background (lightyellow) dan ukuran lebar Top Bar (width) yaitu pada bagian ini :
background-color: lightyellow;
width: 620px;

Jika menggunakan Text dari glittermaker atau lainnya untuk Your content here maka Scriptnya di ENCODE dahulu.

Jika sobat tidak ingin ada tanda

pada bar tersebut maka sobat harus menghapus Script berikut :

<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>

Pada langkah 3 diatas.

Silahkan sobat lihat hasilnya…….!!

May 30, 2009

Image Viewer in Your Blog

Author: Desta | Posted at: 11:38 AM | Filed Under: Trick For You

Adakalanya sobat bingung bagaimana baiknya meletakkan dan mengatur gambar pada blog sobat. Jika semua gambar ditampilkan pada bagian kolom kiri atau kanan dan terus ke bawah rasanya itu merupakan bentuk yang kurang efektif. Menggunakan script Slideshow yang banyak disediakan oleh web-web gratis juga merupakan salah satu alternative bagi blogger untuk menampilkan gambar-gambar pada blog sobat, bahkan secara otomatis gambar berjalan dan berubah secara bergantian,Jika demikian pengunjung rasanya tidak akan berlama-lama di blog sobat.
Bagaimana jika gambar-gambar pada blog sobat kita buat berjalan secara manual, secara tidak langsung pengunjung akan membuka satu persatu menggunakan tombol navigasi yang disediakan, dan mereka sedikit berlama-lama nongkrong pada blog sobat. Seperti pada beberapa bentuk berikut ini ……

Bentuk 1

Pada bentuk 1 di atas pengunjung akan menggunakan tombol > untuk ke gambar berikutnya dan tombol < untuk kembali ke gambar sebelumnya, atau langsung memilih nama gambar yang ada (castle, park, harvest).

Bentuk 2

Pada bentuk yang ke 2 ini sedikit berbeda dimana jelas terdapat tombol Next dan Previous, tetapi nama gambar diwakili oleh angka sebagai urutan gambar yang muncul.

Bentuk 3

Pada bentuk yang terakhir ini juga sedikit berbeda dari ke 2 bentuk sebelumnya. Pada bagian tengah dari navigasi terdapat drop down nama gambar yang dapat dipilih untuk ditampilkan.

Semua bentuk diatas dapat sobat letakkan pada sisi Widget pada blog, sehingga dapat menghemat ruang pada kolom yang digunakan.
Oke ……!! jika sobat ingin mencoba silahkan ikuti langkah-langkahnya berikut ini :
1. Silahkan Login pada blog sobat kemudian masuk ke Tata Letak/Layout – Edit HTML
2. Copy dan letakkan kode berikut ini setelah <head>

<script type="text/javascript" src=" http://www.hotlinkfiles.com/files/2573973_g78sy/virtualpaginate.js ">
/***********************************************
* Virtual Pagination script- Â© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type="text/css">
/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/
.paginationstyle{ /*Style for demo pagination divs*/
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}
.paginationstyle select{ /*Style for demo pagination divs' select menu*/
border: 1px solid navy;
margin: 0 15px;
}
.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}
.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}
.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */
border: 0;
padding: 0;
}
.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}
.paginationstyle a.imglinks a:hover{
background: none;
}
.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/
color: #000;
background-color: yellow;
}
</style>

3. Simpan / Save Template
4. Klik Tata Letak – Layout – Add Widget / Tambah Gadget
5. Pilih Java/Script

Berikut ini sobat Copy terlebih dahulu salah satu Script untuk masing-masing Bentuk (1,2, atau 3 sesuai dengan yang di inginkan) dan Paste kan pada tampilan langkah no. 5 diatas.

Untuk Bentuk 1 :


<div style="width: 300px; height: 230px;">
<div class="virtualpage4 hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>

<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">
var gallery4=new virtualpaginate({
piececlass: "virtualpage4",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
persist: true
})
gallery4.buildpagination(["galleryalt"], ["castle", "park", "harvest", "country"])
</script>
<hr style="margin-top: 35px; color: red" />

6. Klik Tambah Gadget / Add Widget / Simpan

Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>
Juga pada bagian kode berikut : ………….., ["castle", "park", "harvest", "country"] sesuai dengan teks nama gambar yang akan ditampilkan.

Untuk Bentuk 2 :



<div id="gallerypaginate2" class="paginationstyle"></div>
<div style="width: 300px;">
<div class="virtualpage hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>

<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
<a href="javascript:gallery.navigate(2)">Go to 3rd page within "gallery"</a>
<hr style="margin-top: 35px; color: red" />

Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>

Untuk Bentuk 3 :


<h3>Demo 5 (shows "SELECT" pagination interface with custom text defined):</h3>
<div style="width: 300px; height: 230px;">
<div class="virtualpage5 hidepiece">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>
<div class="virtualpage5 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>
</div>

<div id="galleryselect" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <select style="width: 120px"></select> <a href="#" rel="next">Next</a>
</div>

<script type="text/javascript">
var gallery5=new virtualpaginate({
piececlass: "virtualpage5",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
persist: true
})
gallery5.buildpagination(["galleryselect"], ["castle", "park", "harvest", "country"])
</script>

Catattan :
Silahkan diganti pada masing-masing tag <img src="URL gambar sobat"/>
Juga pada bagian kode berikut : ………….., ["castle", "park", "harvest", "country"] sesuai dengan teks nama gambar yang akan ditampilkan.

oh ya hampir lupa untuk ketiga bentuk viewer image diatas sobat dapat menggunakan gambar dengan ukuran maksimal 300 x 230 pixel, agar tepat dengan kotak viewer masing-masing bentuk.

Baiklah sobat …….. Silahkan mencoba dan lihat seperti punya saya disamping.

May 28, 2009

Flashing Links

Author: Desta | Posted at: 9:52 AM | Filed Under: Trick For You

Hallo sobat blogger ... sekarang ada tips lagi nih cukup sederhana dan mungkin bermanfaat tuk sobat semua.
Flashing links ini berkenaan dengan tampilan teks yang rekan berikan tautan (Link) untuk mengarahkan kemana lanjutan teks tersebut atau pun penjelasan selanjutnya.
Banyak sudah bentuk Links yang sobat pasangkan pada blog sobat, baik itu berupa teks links referall atau pun bentuk teks Links lainnya. Coba sobat lihat teks Links berikut ini :

Bisnis Online atau seperti ini Bisnis Online

Ya itulah yang saya maksud Flashing Links cantik bukan ..? Jika sobat berminat mari lanjutkan membacanya ...

Untuk membuat efek tersebut pada link sobat, silahkan Copy terlebih dahulu script kode berikut ini :

<script type="text/javascript" src=" http://www.hotlinkfiles.com/files/2569698_q8i1l/flashinglinks.js ">

/***********************************************
* Flashing Link Script- Â© Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Kemudian sobat Paste kan setelah kode <HEAD> pada template HTML sobat dan Save / Simpan Template.

Langkah selanjutnya sobat tinggal membuat Link text nya dengan dua bentuk (gunakan yg sobat suka dua-duanya juga bisa) seperti contoh diatas, dengan Format pengetikkan Link sobat seperti berikut ini :

Format 1 :
<a href="test.htm" rel="flashfg[colorvalue]">Example 1</a>
Contoh pengetikkan Link nya :
<a href="http://www.berbagibisnis.net" rel="flashfg[yellow]">Bisnis Online</a>
Hasilnya : Bisnis Online

Format 2 :
<a href="test.htm" rel="flashbg[colorvalue]">Example 2</a>
Contoh pengetikkan Link nya :
<a href="http://www.berbagibisnis.net" rel="flashbg[yellow]">Bisnis Online</a>
Hasilnya : Bisnis Online

Pada Format 1 sobat akan mendapatkan text link yang berubah warna pada teks, sedangkan pada Format 2 sobat akan memberi warna pada text link tersebut sebagai background.
untuk mengganti warna yang di sukai silahkan ganti pada [colorvalue] baik dalam teks english untuk warna maupun kode hexa warna yang sobat ketahui.

Bagaimana mudah bukan ... selamat mencoba..!!

May 27, 2009

Snow Effect In Your Blog

Author: Desta | Posted at: 12:08 PM | Filed Under: Trick For You

Snow effect pada halaman blog maksudnya ya ada efek salju yang turun pada halaman blog sobat seperti pada blog saya ini.

Kalau sobat berminat untuk menambahkannya pada blog sobat ikuti terus ceritanya.
Selain efek salju sobat juga bisa menggunakan efek daun yang berguguran seperti pada musim gugur gitu...?
Gimana kita lanjutkan.....!

Berikut ini ada 3 image yang dapat sobat gunakan untuk efek pada halaman blog sobat beserta URL image tersebut

URL : "http://i647.photobucket.com/albums/uu191/admincoy/snow.gif"

URL : "http://i647.photobucket.com/albums/uu191/admincoy/snow2.gif"

URL : "http://i647.photobucket.com/albums/uu191/admincoy/snow3.gif"

atau sobat memiliki image sendiri, juga dapat digunakan tapi untuk lebih jelasnya kita lanjutkan terlebih dahulu cerita ini OK..?

untuk memberikan efek tersebut langkahnya adalah sebagai berikut

1. Copy terlebih dahulu kode berikut ini :

<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="snow.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 = 600;
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 (ie4upns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><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 (ie4upns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

2. Kode yang anda Copy tersebut harus anda ENCODE terlebih dahulu, Jika sudah di ENCODE pastekan pada HTML blog sobat setelah <BODY>

3. Pada kode diatas yaitu var snowsrc="snow.gif" anda ganti "snow.gif" dengan URL Image yang akan digunakan, jangan lupa URL image harus di ENCODE seperti sebelumnya.

4. Simpan / Save Template

Silahkan sobat lihat hasilnya.

Untuk melakukan ENCODE pada script kode diatas sobat klik Disini