You can Easily Add To Snow To Your Blog to Make Things More Festive!

It is that time of year again! Time to prep your blog for the Holidays and Winter time. What better way to make your blog feel festive then adding snow to your blog! It’s quite easy in wordpress – there is a plugin to do all the work for you. (I had previously published a similar BB101 – bu the code was outdated. I figured might as well update!)

To add snow on your blog can be easy if you have WordPress, they make a plugin, the Snowfall WordPress Plugin.

For blogger things are a little more involved

My favorite is a little non image javascript coding that I found by searching the net. It will require code. It was created by: Rainbow Arch

Part I – Editing your HTML

BACK-UP your template before you begin!

The javascript dosn’t copy into Blogger properly anymore, Blogger keeps giving errors. The easiest way I found was to just add it as a widget. But the problem is it will start where ever you have the widget. So if you have it at the bottom, the snow starts falling at the bottom of your blog. You want to add the widget by your header. Blogger has it automatically set up that you can only have one widget up there and that is your Header. So you need to change this.

Step 1: Go to your Blogger Dashboard

Step 2: Go to Template > Edit HTML

Step 3: Click on the code, type Ctrl/Command-F and search for header1

Step 4: Click on the black triangle next to the code it highlighted.

Step 5: Above the header1 you will see a string of code, within that code will be the words maxwidgets=’1′, change the ‘1’ to a ‘2’. This is telling Blogger that you want to be able to add another Gadget to that Header1 area. Click on screencap to enlarge.

Blogger__Template_Tester_Time_-

 Part II – Adding the Gadget

Step 1: Go to your Blogger Dashboard

Step 2: Go to your LAYOUT

Step 3: Click on Add a Gadget

Step 4: Scroll down to HTML/Javascript

Step 5: Copy the following code into the Gadget and hit save.

Step 6: Pull the gadget above the Header area. Voila!

Blogger__Template_Tester_Time_-_Layout

See the Snow Fall live here. This is the standard code here. It does take a bit of time to start.


<SCRIPT type=”text/javascript”>
// Set the number of snowflakes (more than 30 – 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array(“#aaaacc”,”#ddddff”,”#ccccdd”,”#f3f3f3″,”#f0ffff”)

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array(“Times”,”Arial”,”Times”,”Verdana”)

// Set the letter that creates your snowflake (recommended: * )
var snowletter=”*”

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}

function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById(“s”+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+’px’;
snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].style.zIndex=1000
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx+’px’;
snow[i].style.top=snow[i].posy+’px’;
}
movesnow()
}

function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+’px’;
snow[i].style.top=snow[i].posy+’px’;

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout(“movesnow()”,50)
}

for (i=0;i<=snowmax;i++) {
document.write(“<span id=’s”+i+”‘ style=’position:absolute;top:-“+snowmaxsize+”‘>”+snowletter+”</span>”)
}
if (browserok) {
window.onload=initsnow
}

</SCRIPT>


There are a few things you can configure in this javascript.

Set the number of snowflakes, look for the code in red “snowmax=35″ and set it between 1 – 40

Set the color of the snow, search #aaaacc”,”#ddddff”,”#ccccdd”,”#f3f3f3″,”#f0ffff” and change it to the hexadecimal you would like.

There are a bunch of things you can set, and the creator of the code set it up nicely and easy to use. Speed of sinking, size of snowflakes, fonts you can use, etc. You can even center, or all over snow. It is a pretty handy set of javascript.

Happy Thursday Everyone! Stay safe. Talk Less. Read More. Blog with Integrity. Have a question? Ask it here.