rss

Friday, May 21, 2010

How to add a favicon in Blogger

 favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or web page.Most of the people use 16*16 pixel favicon with ".ico" format.But,you can also use gif,png(image formats) aswell.

There are plenty of sites out there that generates a favicon for you when you upload an image.Do a Google Search for "free favicon Generator" and plenty of sites would come up or use one of these free services:

Then upload it to a free image hosting site like ImageBoo .After uploading the file select the direct link given at the very bottom which should look like "http://www.imageboo.com/files/m06hie3vf8gdban6cuq1.ico", add that as the "favicon url" given in the below instructions.

Now,go to your blogger dashboard>layout>Edit html and look for this code which at the top the template:
<title><data:blog.pagetitle/></title>
Just after that line add the following codes, substituting 'favicon url' for the URL where your favicon is hosted:
<link href='favicon url' rel='shortcut icon'/>
<link href='favicon url' rel='icon'/>
Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address.


Saturday, May 15, 2010

How to add Scrolling text to your blog

This time I like to explain you how to add  marquee (also called as Scrolling text)to your blog sidebars,blog posts,etc. This will definitely bring the attraction of readers.You can give a welcome message or any sort of warning message in this scrolling text widget anywhere that accepts marquee code.Please take care not to avoid or change any part of the code.

So,Here is the code to add a simple scrolling text from right to left side
<marquee>Your text here</marquee>

The output will be like this:
Your text here

How to add a background color to the text
<marquee bgcolor="#2E2EFE">Your text here</marquee>
The output will be like this:


 Your text here

You can choose your background colour by replacing the hexadecimal code(#2E2EFE).
Click here to see the codes of the different colors.

Here are some mode attributes
direction="left"

direction="right"

direction="up"

direction="down"
The above attributes tells the text which direction to scroll.

How to scroll in the 'right' direction:
<marquee direction="right" bgcolor="#80FF00">Your text here</marquee>
The output will be like this:

 Your text here

How to scroll in the 'up' direction:
<marquee direction="up" bgcolor="#F7FE2E">your text here</marquee>
The output will be like this:

 your text here

 How to scroll in the 'down' direction:
<marquee direction="down" bgcolor="#FF0000">your text here</marquee>
 The output will be like this:

 your text here

How to alternate the text
<marquee behavior="alternate" direction="left" bgcolor="#81F7F3" scrollamount="2">your text here</marquee>
The output will be like this:

 your text here

 You can also change the speed of the text
scrollamount="2"

example 1 for scrollamout =2
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="2">your text here</marquee>
The output will be like this:

 your text here

example 2 for scrollamout =4
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="4">your text here</marquee>
The output will be like this:

 your text here

example 3 for scrollamout =6
<marquee behavior="alternate" direction="left" bgcolor="#FA58F4" scrollamount="6">your text here</marquee>
The output will be like this:

 your text here

 How to Paus the text when mouse is over the text:

<marquee behavior="alternate" direction="left" bgcolor="#ACFA58"   onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50">your text here</marquee>
 The output will be like this:

 your text here

How to add hyperlinks in the scrolling text :
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.

Here is how I do
<marquee behavior="scroll" direction="left" bgcolor="#FE2EF7" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">    <a href="http://royalinfograbber.blogspot.com/">Royal Info Grabber</a>  <a href="http://royaltutor.blogspot.com/">Royal Tutor</a>  <a href="http://html-color-codes.info/">HTML color codes chart</a>  </marquee>

The output will be like this:

      Royal Info Grabber  Royal Tutor  HTML color codes chart 

If you want to put this in sidebar,then sign in to your blogger account>click the add a page element> and paste the code in html/javascript and save the changes .
Happy Blogging:)


 

Recent Posts

Followers

Recent Comments