Awesome Rainbow animation Link Widget for Blogger

Posted by Unknown

This is a simple Blogger Blog Trick,Changing the color of Link when Mouse over it.7 colors are changing like animation when hover the link.
Follow the simple steps below..












If you are a beginner in HTML editing,Use our 1 Click Widget Below(Click Add to Blogger Button below)



Install Rainbow Animation Hover Effect manually.

Note:Remember that Back up your Template First.(How to Backup Template)

  • Sign In to you Blogger Account.
  • Go to Design->Edit HTML
  • Find <head> section and Place the below code inside it.

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

  • Save It and Enjoy. . . !

I think you enjoyed this post.Surely you will get excited after using this widget.
More aboutAwesome Rainbow animation Link Widget for Blogger

Use Search Bar to Find a code in Blogger

Posted by Unknown

find code in blogger
This article is very useful for Blogger beginners.This is a tutorial about how to find specific code in  webPages/Blogs/Websites.You may see many Blogger Tutorials on internet for the purpose of designing or to add gadgets to your blog,for eg: if you need to add some meta tags  inside <head> section.
 You go to
Design->Edit HTML
look for <head>

find <head> and place meta tags inside it. But,

It is not easy to find a code manually.So Use Ctrl + F to find.

Look the below picture
 

  • Hold Ctrl on the keyboard and press F,(Ctrl+F is the shortcut to reach Find Bar in almost all browsers)
  • A Find Bar will display, Type the code you want to search.
  • At once that code will highlight on the Page/Blog
  • Then you can edit/delete/modify highlighted code.
Please Leave Comments
More aboutUse Search Bar to Find a code in Blogger

Create an Official Google plus Page to drive traffic

Posted by Unknown

Google launched Google pages for Google plus.It is a business solution for promoting products,blogs,news,events etc.. to your fans.Another important feature is it will increase your blog's traffic.Now i am saying about how to create an official Google+ Fan Page for your Blog.You can share your blog posts,events,photos etc to your Google Official plus fan page.It is almost similar to Facebook Fan Page.
Lets see how to create it.(Description with images)
Follow the instructions

Create official Google+ page

You must have a Google plus Account to create Fan page.

  • Sign In to your Google account and go to this LINK
  • Click on Product or Brand
  • Give the name of page you need to create(Blog/Site Name)
  • Choose Website from the list
  • Make sure you check the box below it
  • Click on CREATE

  •  The give your blog title and upload your Blog LOGO, If you have no LOGO for Blog click HERE
  • Click on Continue
  • Page creation is almost finished.Now you can share your Google+ page by click on Share on Google+
  • Click on finish ..Done..your page has been created sucessfully.

How to add Google+ Badge to your Blog

After finishing creating page ,you can see a button Get the Badge, Click it
  • It will redirect to the page like following picture.
  • you can see your page link,you can share it.
  • Choose the style of your G+ badge
  • After that if you want check the box HTML5 valid syntax
  • Then Copy the code in  the text box
  • Go to your Blogger Dashboard
  • Select Design->Page Elements click on Add Gadget
  • A pop up window will appear look it carefully and find HTML/JavaScript
  • Enter gadget title(eg:Share in Google Plus) and Paste the code on the content textbox
  • Click on SAVE..,Done..
More aboutCreate an Official Google plus Page to drive traffic

Page Layout Algorithm Update by Google

Posted by Unknown


This algorithm update by Google is not only important for SEO’s but it’s important for Website Designer also.

With this update Google will penalize websites in which content appears below the fold. So, if the user/website visitor has to scroll down to see the content then it’s a bad user experience and Google will consider it as a negative factor.

So, SEO’s must take care that this doesn’t happen and website designer should make a layout which follows this guideline.

Have a great week ahead. J

For more details see Google Webmaster Blog: http://goo.gl/eQDum
More aboutPage Layout Algorithm Update by Google

How to Backup/restore Blogger template

Posted by Unknown


backup blog

This article is for absolute blogger beginners,about how to backup your blogger blog's template.This is very important thing that every blogger should beware of it. While adding or changing new features to your blog ,there may occur template crash.If you are not aware of this thing( backup template), it will affect your blogger blog's overall body language.So first you must know about backup your Blogger Blog Template.Follow the Steps 




Backup Blogger Blog template

It is a simple method to backup your template,follow the steps.
  • First Make sure you had Sign In your blogger account
  • Go to Design->Edit HTML
  • There is a link "Download Full Template" at right side,click it

  •  Save it,You finished..!
The file you downloaded now is in the .XML format,so if any crash made on your template you just upload the downloaded XML file.

Upload/Restore Blogger Template

If any problem persist to your blogger blog's template upload the XML file.
  • Select Design->Edit HTML
  • There is a button (Browse) below the "Download Full template" link.Click on Browse
  • Choose the XML file you downloaded
  • Then Click on Upload button right to Browse button.
You are done,you had studied how to backup and restore your template.
More aboutHow to Backup/restore Blogger template

Increase blog traffic using powerful meta tags

Posted by Unknown

This is a very useful article for all bloggers,every blogger had a dream that their blog got higher rank in Google or other search engines.Adding meta tags to your blogger blog help you to increase blog traffic.The meta tag helps the search engine to find appropriate results,This is a powerful Search Engine optimization(SEO) method used by popular websites and blogs.
Within a few steps you can add powerful meta tags by following the below steps


  • Sign In to your Blogger Account
  • Take Design tab in your blog dashboard
  • Select Edit HTML
  • Add the following code inside <head> section

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Place blogger description here' NAME='description'/>
<meta content='Place your blog's keywords here(seperated by commas)'
NAME='keywords'/>
</b:if>
Replace the Red text by your blog's description and keywords and place it inside <head> section.Now your blogger blog meta tags are placed.The Blogger description you placed in meta tag description will display as the description of your blog in Google search results(as shown in the figure).
Now day by day there are so many blogs are arriving on internet.This powerful meta tag technique will help you to go your blog success.
More aboutIncrease blog traffic using powerful meta tags

Remove Subscribe to posts (atom) from Blogger Blog

Posted by Unknown



#This is an article about how to remove Subscribe to:posts(Atom).
You must have seen that this Subscribe to:posts(Atom) at the bottom of your Blogger Blog.Blogger added it to every blogger blog for your visitors to subscribe atoms feeds.Do you thinks that it is quiet boring? Here a simple tip to remove it.
First of all 

  • Sign In to your Blogger Account and Go to Design->Edit HTML
 Important:You must tick the check box  Expand Widget Templates
  • Find the following and delete it
<b:include name='feedLinks'/>
 Or put inside this (<!-- -->) like this <!-- <b:include name='feedLinks'/> -->

Its done...
More aboutRemove Subscribe to posts (atom) from Blogger Blog

Start Blogging

Posted by Unknown


More aboutStart Blogging