Wednesday, June 24, 2009

How to add the Glitter Effect Mouse Pointer to your Blog

The code for this tweak is javascript. All you need to do is to add the javascript code to your template but only within the head (<head></head>) tag.

The Head Tag


The head tag begins with this tag: <head> and ends with this tag: </head>. Go to Layout->Edit HTML.



Locate for end head tag (</head>) and paste your javascript code above it, then save.




The Code:


<script type="text/javascript">
// <![CDATA[
var colour="#666666";
var sparkles=40;

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="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
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>

View Demo

Sunday, June 21, 2009

Glitter Effect Mouse Pointer: Falling Glitters From Your Mouse Pointer

While I was hopping from one blog to another, I happened to notice the pointer of one of the blogs I had visited. It is very interesting because as you move the mouse pointer there is a character, a plus sign, which falls like glitters on the screen. What's more interesting to this glitter effect is that the glitters fade away like a stardust on your blog.




I have already extracted the code from that blog and the next post will be how to add the glitter effect mouse pointer to your blog.

Monday, January 26, 2009

Watching Yakitate!! Japan

One of my hobbies, if I am tired of doing nothing, is to watch anime series. Now, I was watching this baking anime series Yakitate!! Japan. It is a very nice anime. It is about a boy who is talented in baking and possesses the solar hands. This anime was already completed last year and it has about 60 episodes. Now, I am in the 21st episode, so I still have to watch 39 episodes.

Perhaps starting today I will be posting the episodes of this anime. So, you could watch it, too.

Have a nice day!

Friday, January 23, 2009

Adding Nuffnang's Alternate Code in Single Post Only in XML Blogger Template

My previous post is about adding AdSense only in single post in XML Blogger Template. Now, Patsy, a blogger friend who visited my blog, commented on that post and asked about adding nuffnang ads instead of AdSense.

I remembered that I have a Nuffnang account and I still haven't tried using there ads. So, I tried changing the AdSense code to Nuffnang. Nuffnang provided to code, the default and the alternate. First, I tried using the default code and it worked properly. However, when I tried using the alternate, it had resulted to an error.

Now, this tutorial is mainly on how to add Nuffnang's Alternate Code in XML Blogger template without an error in relation to my previous post.



Inserting directly the default Nuffnang code would not result to an error. But if you use the alternate code, an error will appear. You still need to convert a few characters into html entities to make it work.

I said only few characters because you only have to change 2 characters repeated twice in the alternate code, the < and the >. Now here's the thing, you need to change "< to &lt;" and "> to &gt;" in the document.write syntax.

It would look like this one: (click image to enlarge)

After modifying the code, you may now proceed with Step 3 of the my previous post.

I would recommend that you just use Nuffnang's default code to make it easier.

That's all folks... Happy Friday to all!

Tuesday, January 20, 2009

Adding Adsense Code Inside Single Post Only in XML Blogger Template

A page element is applied to the general blogs layout. Adding a page element for AdSense above or below the `Blog Post` section doesn't allow you to limit the display of Google ads on a single post only. However, there is a solution to this problem.

This technique is for advance blogger but it doesn't mean the beginners couldn't do it also. Every tutorial must be understandable to beginners also, so as possible as I can, I have made simple steps to make it easy for beginners to follow. I have included useful images to make it more understandable. Lets start.

Step 1: Generate your AdSense Code

Since our concern basically is with AdSense and Blogger, we'll start by generating our AdSense code. It looks like this one.


Step 2: Cleaning your AdSense Code

Cleaning your adsense code is very important to errors. As you have observed, there are some highlighted text on the image above. These highlighted text must be remove like this image below.

Though we have already done removing the highlighted text, the code is still now clean. We still have to replace the double quotations with the single quotations. After doing it, the clean AdSense code would look like this one.


Step 3: Inserting the Adsense Code to our XML Template


To understand more clearly the thing I am going to discuss in this step, please refer always to the highlighted parts of image above.

Before you insert the code, you need to add a conditional tag to your adsense code to make it appear only on the single post. You need to insert your adsense code in between this conditional tag.

Conditional Tag:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Your AdSense Code here
</b:if>
On the `Edit HTML` section in your Layout, enable the `Expand Widget Template` to view the complete code of your template. Locate the tag "<p><data:post.body/></p>" and insert the final code above it. It should look like this image below. After inserting the code, you may now save your template.


Isn't that easy enough for beginners? If in any case there is something you don't understand or an error has appeared, feel free to comment here and I will gladly answer you the best that I could.

Monday, January 19, 2009

Cool Favicons

Looking for favicon for your blog? Why don't you try using one of the coolest favicon ever made. These icons were collected by DTB.



If you don't know how to put it in your blog, try this one.

I hope you like it. Have a nice tuesday!
Related Posts Plugin for WordPress, Blogger...