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
image
    3.  Hit the Generate Favicon Button and you will be taken to this page,
image
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 :>>

Share/Bookmark

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.
back to top
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!

Share/Bookmark

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.
    split header 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.


Share/Bookmark

How to make great blog header

Yay! I did it. I changed the look of Blogger Sentral blog header. Now instead of boring, flat, amateurish looking title text, I’ve upgraded it to a 3D, polished look –more pleasing to the eyes than the previous one (at least I think so).
It’s not as hard as I thought. At one time I thought of using GIMP to make it, but the lack of good looking fonts stopped me half way. I know fonts can be imported into GIMP, but.. too much of a hassle just to pimp the title.
I was just about to give up with this make-my-blog-title-look-good thing, until yesterday that is.
Yesterday I found this cool site, appropriately named Cooltext.com. It’s a free online graphics generator, no need to sign-up or anything. I made mine with just a few simple steps.
So today I’m going to write about how to make or design a blog title and and then replace the existing title with it. Here are the steps:
  • Design the blog title using Cooltext.com.
    1. Choose your logo style, there are many styles available. Choose the one you think best for your blog. You’ll then transferred to Design-Your-Logo page
    2. Here you choose the font, text size, colors etc. You also need to specify the output file format.
    3. After specifying all the parameters, click on Render Logo button, wait for a while and then wallah, your text comes out.
    4. Download it. If you don’t like it you can edit it, over and over again.
  • Replace the existing title with the new one.
    1. Go to Dashboard > Design > Page Elements
    2. Click the Edit link at bottom right hand corner of Header widget box.
    3. Select Image > From your computer. Click Browse to select the file that you’ve downloaded. Under Placement, select “Instead of title and description” option.
    4. Click save, and then View blog.
    Hey, that’s it. Enjoy!

Share/Bookmark

Check blog speed, ranks, backlinks and broken links

Yes now you can check your blog page loading speed, Google Pagerank, Alexa rank, backlinks, broken links, reciprocal link and meta tags right here on Blogger Sentral. I have made a special page containing tools to help you check some of your blog SEO metrics. Click SEO TOOLS tab on the navigation bar to access the tools. Below is the list of available tools:
  1. Speed tester Check page size and loading speed.
  2. Rank checker Check Google Pagerank and Alexa rank.
  3. Backlink checker List out all backlinks to your domain or web page.
  4. Broken link checker List out all outbound links in your web page and identify the broken ones.
  5. Reciprocal link checker Check whether your link partner is still linking back to your site.
  6. Meta tag checker Extract your web page's meta information and tags.
Just enter your domain or your web page URL in the appropriate text box and click Check! button. Results will be displayed below the text box.
All tools are provided and hosted by iWEBTOOL.
Enjoy!

Share/Bookmark

Submit site/blog to DMOZ (Open Directory Project)

DMOZ is the directory of Open Directory Project (ODP), the largest human edited web directory of the Web. The ODP powers core directory services for some the most popular portals and search engines, including AOL Search, Netscape Search, Google, Lycos, and HotBot, and hundreds of others.

Being listed in DMOZ is like an endorsement of your website quality. From a SEO (Search Engine Optimization) point of view, a link from DMOZ brings more trust and authority than most sites. DMOZ is not as highly regarded as it used to be, but to have an inbound link from it is still considered good SEO nonetheless.
Getting listed is very difficult, it could take months, or even years. Blogger Sentral did pretty well actually, it only took us just a little over a month. Click this link to see Blogger Sentral on DMOZ. Update Apr. 2011: As it turns out this blog has disappeared from the list. I don't know why. I will get it re-listed, hopefully.
You can submit your blog too, submission is free. But going ahead with it, you might want to read the submission guideline and FAQS about suggesting your site to DMOZ first.
Here is how to submit your blog to DMOZ.
  1. Go to DMOZ.org and proceed to the category that you want to add your blog to.  
  2. Once inside the category, click the Suggest URL link. dmoz category-suggest url is on top right corner
  3. Enter your blog url, blog title, blog description and email address as required.
    submit dmoz-this is where you enter site url submit dmoz-submit dmoz-this is where you enter site name
  4. Enter the captcha and click Submit button.
  5. That’s it,  that was easy.
  6. Enjoy! hmm on second thought … Pray and WAIT (this is the hard part).
By the way, have you submitted your blog to search engines? Read Submit blog to Google, Yahoo and Bing if you haven’t.

Share/Bookmark
Related Posts Plugin for WordPress, Blogger...