How To Add Animated Favicon In Blogger?

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many free services that help to create favicons for you but most of these services use still images. I have used an animated favicon for my blog as you can see in your address bar.  It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. So lets jump at the tutorial and create an attractive  cute favicon for your blog,

How To Create Animated Favicons?

1. Go To favicongenerator
2. And just at the bottom of the page upload your blog logo or any icon you wish to make as your favicon and also add your blog title as the scrolling text. You will find all the help at favicongenerator

    3.  Hit the Generate Favicon Button and you will be taken to this page,

Here you will see many images just right click the animated one and save it to your computer.
     4. Now upload the image to your Picasa album by reading this post –> Store Animated Images in Blogger and Learn how to get Image URLs

How To Add Your Favicon To Blogger Now?

1. Go To Blogger > Design > Edit HTML
2. And Search For <b:skin> and just above it paste the code below,

<link href='ADD YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>

     3.  Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
     4.  Save your template and you are done!
View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed :>>

How To Add Animated Favicon In Blogger?

Adding a floating “back to top” button

Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.

What I am going explain in this article is slightly different. The function is the same yet the location of the link/button is different. As the name suggests, we are making a floating (or is it static) button. The button will float at the bottom of your screen. It will stay there even if you scroll the page, and can be seen at all times. We will do this using only a short HTML code, with a little inline styling.
Note: This trick will not work in older versions of Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and it doesn’t float.
Here are the steps:

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Insert the following code immediately before the </body> tag in your HTML.
   
   
   

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="YourButtonUrl"/></a>

   Replace YourButtonUrl with the link to your button or icon.
   
5. If you prefer to use text instead of an image, use this code:
   
   
   

   1	<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">YourTextHere</a>

   Replace YourText with your own wording.
   
6. You can change the location of the button / link by changing the values of this code: bottom:5px; left:5px;
   

Enjoy!

Adding a floating “back to top” button

Add banner, Adsense or search box in header

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post.
Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how?
By simply adding a section in the header. A section is a widget container of sorts, indicated by a light colored box in Page Elements tab and usually comes with an Add A Gadget link thingy. Once you have the Add A Gadget added in there, the rest is easy.
Here we go:

1. Adding a section (in HTML)

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Make sure the Expand Widget Templates checkbox is UNTICKED.
5. Look for the following lines in your HTML code:

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
   <b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
   </b:section>

6. To add a section, insert the following code right under (after) it:

   <b:section id='header-right' showaddelement='yes'/>
   <div style='clear: both;'/>

7. So the final code should look like this:

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
   <b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/> 
   </b:section> 
   <b:section id='header-right' showaddelement='yes'/>
   <div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

2. Styling the section (in CSS)

Position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right.
To achieve that,

1. Locate this line of code (you are still on Dashboard > Design > Edit HTML page): ]]></b:skin>
   
2. Add the following CSS code right before (on top of) the line.

   #header, body#layout #header {width:50%;display:inline-block;float:left;}
   #header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
   #header-right .widget {margin:0;}

3. Installing the widget

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

1. Go to Design > Page Elements.
2. Click the new Add A Gadget link and add your widget.
   Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.
3. Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.
Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.

Add banner, Adsense or search box in header