Cara Membuat Efek Hujan Salju di Blog
 |
| Cara Membuat Efek Hujan Salju di Blog |
TENLIBRARY - Cara Membuat Efek Hujan Salju di Blog - Banyak berbagai macam cara untuk mempercantik tampilan blog kita. Salah satunya yaitu dengan cara memberikan efek-efek tertentu pada blog kita agar terlihat cantik dan rapih. Dan pada postingan kali ini, saya akan sharing tentang cara membuat efek hujan salju di blog. Dengan adanya efek ini, pasti pengunjung blog kamu akan lebih betah dan lebih sering untuk mengunjungi blog kamu. Mau tau cara membuat efek ini, langsung aja ikuti tutorialnya.
IKUTI LANGKAH-LANGKAH BERIKUT
- Login ke blog kamu.
- Masuk ke menu dropdown > Tata Letak.
- Kemudian pilih Tambah Gadget > HTML/javascript.
- Copy kode dibawah ini dan taruh di kotak isi HTML/javascript.
<script type="text/javascript">
//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSSGcD5C96qOh45Y43x-lALhy2DfNRVqaUp8RBC4yF2FDt2RwZ_BUkEbyUJUQKxhfoA3atySR1GtOvI0q1Umr0XkEZj8V_0aoyygucWlt4qWCqTt8S68CA2OyA8UKyInx_7uc4JD2SvI/s400/snow.gif"
// Configure below to change number of snow to render
var no = 15;
// 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)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSSGcD5C96qOh45Y43x-lALhy2DfNRVqaUp8RBC4yF2FDt2RwZ_BUkEbyUJUQKxhfoA3atySR1GtOvI0q1Umr0XkEZj8V_0aoyygucWlt4qWCqTt8S68CA2OyA8UKyInx_7uc4JD2SvI/s400/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://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 (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
- Kemudian Simpan, setelah itu Drag pada posisi paling atas atau dekat header. Setelah itu Simpan Setelan.
Bagaimana ? keren bukan. Sekarang tampilan blog kamu sudah keren dan lebih menarik. Selamat mencoba !
Kamu sedang membaca artikel tentang Cara Membuat Efek Hujan Salju di Blog dan kamu bisa menemukan artikel Cara Membuat Efek Hujan Salju di Blog ini dengan url http://tenlibrary.blogspot.com/2013/04/cara-membuat-efek-hujan-salju-di-blog.html. Kamu boleh menyebarluaskan atau mengcopy artikel Cara Membuat Efek Hujan Salju di Blog ini jika memang bermanfaat bagi kamu,namun jangan lupa untuk mencantumkan link sumbernya. Terimakasih.
Jika kamu menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu kamu akan mendapat kiriman artikel setiap ada artikel yang terbit di TENLIBRARY
terimakasih sob buat tutorialnya, sangat membantu..
BalasHapus