How to remove the dotted border from Blogger links

I’m sure that many of you have noticed the dotted border that surrounds links when you click on them. It’s actually an accessibility feature and in most cases it’s fine, but in some cases that dotted border surrounding active links can be quite annoying and ugly. There is a very simple and easy way to hide the dotted border from active links. All it takes is a few lines of CSS and you’re done.

Just Login To Blogger Go To > Layout > Edit Html and Find for

]]></b:skin>

And just place the below code before it.

a { outline:none; }

And save your template and you are done now.Now whenever you will click on any link in blogger no dotted lines will appear.

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:

• http://www.genfavicon.com/
• Favicon Generator (Blogger Buster) 
• FaviconGenerator.com (right click image and choose “Save image as”) 
• HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username 
  
  

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.

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:)