Add Falling Stars Effect on Mouse Movement in Blogger

Now add simple falling stars effect when your mouse moves using a simple JavaScript trick, by just adding some lines of codes in your html section you can easily show stars fallings when ever your mouse makes some motion. This effect is compatible with all the modern browsers so you will not have any problems using this script.

Adding Falling Stars Script in Blogger

1. Login to blogger.com and navigate to Design > Template > Edit HTML.
2. Now press Ctrl + F and search for </head> tag and paste the below script right above it and press Save template.

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>

</script>

Editing the above JavaScript :

If you wanna make some changes to the above script you can easily do that by changing the values in red color, well there are more ways of editing the above script but that depends on your creativity level so try it out what ever works perfect for you fir it up and enjoy.

How to Embed Videos Uploaded on Facebook in Blogger

Facebook has all the means to share news or updates with your friends, you can upload an image and share that link or upload a video on Facebook and share that too by just clicking share option below every video or image. But what if you wanna embed that video in your blog or website for sharing it with your readers and unique visitors, well usually people use YouTube as their main video uploading platform but if you wanna embed Facebook videos on your blog than you can easily do that by choosing the embed button given below every video.
But if you are a regular uploader and video sharing freak than saving the embed code and just changing the video id would be much more convenient. You can use the below code for embedding purpose and change the blue xxxxxx with your video id that you can see in your address bar for every video you watch. Usually its like this : https://www.facebook.com/photo.php?v=129604143751756

<object width="624" height="450" ><param name="allowfullscreen" value="true" /><param name="movie" value="http://www.facebook.com/v/xxxxxxxxxxx" /><embed src="http://www.facebook.com/v/xxxxxxxxxxxx" type="application/x-shockwave-flash" allowfullscreen="true" width="624" height="450"></embed></object>

Now after replacing those xxxx with your video id you can paste the whole code right into your blog post and it will automatically be converted into your video. Well using this way you just need to change that video id everytime you wanna embed a new video in your blog post.

Add Twitter Follow Box in Blogger or Wordpress Blogs

Twitter follow box is somewhat similar too the facebook like box and gives your reader an easy option to follow you by just clicking on that small follow button. As you can see in the image on the right this is what your box will look like when you will apply the code in your blogger or wordpress blogs.
So now adding this box is really simple just add the below code as mentioned and you will have this box working out perfectly.


First see the demo:

How to add this?

1. Go to Blogger > Design > Layout.


2. Click on Add a Gadget and add a HTML/JavaScript Gadget.

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("durai50sankar50");</script>

3. Now just add the above code into that gadget and replace the red word with your twitter username and leave rest of the code as it is and click on Save.
4. Now just refresh your blog and check out this gadget, well now test it by clicking on the follow button and becoming a follower to your own name :)

Password Protect your Blogger or Wordpress Website Easily

Protecting your blogger or wordpress blogs from spammers, clickers and other frauds have always been a major key point in any website designer life. If you are a blogger you will try to make your website safe from people you do not want to enter in your website or you do not want anyone to comment on your website, well I simply mean stopping unauthorized access to your website.

• Automatically Add Attribution Link to Copied Text in Blogger
• Protect your Articles from Getting Copied Using CSS Trick
• Disable copy paste

Well today we are going to teach you how you can easily add a password to your blogger or wordpress blog and when ever a person pumps in your websites address he will be greeted with a password prompt dialog, where he have to enter the password kept by you if he fails to enter the password then he will be redirected to your desired website.

1. Go to Blogger > Template > Edit HTML

2. Now press Ctrl + F and search for the </body> tag and add below code above it or you can add it to specific post or page.

<script>
var password = 'Password-Here'
password=prompt('Please enter the password to enter this site:','');
if (password != 'Password-Here') {
location.href='Redirect-URL-Here'}
</script>

3. Now just press Save Template and refresh your blog to see the password asking popup.

Customizations :

You can change the password according to your wish, just change the letters in red color to your password. You can add any URL to which the visitor will be redirected if he enters the wrong password or cancel to add any password, just change the Blue line in the above code with your URL.

Protect your Articles from Getting Copied Using CSS Trick

Articles, content, images all contribute together in getting high organic traffics due to your lot of hard-word applied in creating that post article for your worthy readers, than comes another role of content scrappers copying your articles and getting higher in search engines. Well now you can protect your articles from getting copied easily using just a small CSS trick which is really compatible in every browser and works like a charm.

• Automatically Add Attribution Link to Copied Text in Blogger
• How to Disable Dragging in Blogger Website
• Disable copy paste

So now if you wanna use this CSS trick for making your content secure on blogger blogs, just follow the steps provided below and you will have your content protected.

Make your Blogger Content Theft Free :

1. Log in to your blogger account and navigate to your blog > Template > Edit HTML.
2. Now make a search for ]]></b:skin> and paste the below code right above it.

post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

3. Now just hit Save Template and refresh your blog, now try to drag your content with your mouse and see you will not be able to select any text.

Enjoy easy theft free blog from content scrappers, well there are still some problems which may force your to remove this code as if you provide any coding or scripts to your readers than they might not be able to drag and copy that code, so you can figure that out :)