0 How to add Favicon to a Blog

        You may have seen small image appearing on the leftmost side of your browser's address bar when you browse, and it is differing from site to site. That tiny image is termed as Favicon which is the short form of Favorite Icon. Look at the screenshot of the Google’s webpage. Find Google’s Favicon here.

        Now look at your blog, Did you see a Favicon there? Every Blogspot blog, by default recieves a Favicon as shown below.

        In fact, this Favicon belongs to the Blogger, on which your blog is being hosted. As part of giving more unique and professional look and feel to your blog, you may need to add your own Favicon. Today almost every web site has this distinguishing feature- Favicon

        Did you ever notice my Favicon? At least now you may be noticing the tiny animated icon appearing on the address bar. This blog also is a Blogger or blogspot blog; even then I am having my own Favicon. How is this possible? I will explain you in details about “How to add my own Favicon to my blog?”

How to add custom Favicon to a Blogspot Blog?

        It is very easy to add a Favicon into self-hosted web pages or Blogs. But in the case of free hosts like Blogspot blogs or BLOGGER blogs the procedure will be a bit tricky as you have access only to the blog layout but no file upload features.

I will explain the entire procedure in easy steps, so that even a newbie can add a Favicon to blog very easily.

1. Upload your image File and get the URL

        Hope you have uploaded your image file to some web locations and you have its URL. Otherwise learn how to upload files for blogs hosted in blogspot or blogger domain

2. Edit the layout of Blogger

From the blogger Dash board-->Layout-->edit HTML
<title><data:blog.pageTitle/></title> Find this code in the edit HTML page (refer screenshot). Just below this code add the code snippet given below according to your picture format.

1.ico pictures

In the case of .ico picture formats you can use either of the code snippets. But former is preferred as its having more number of browser compatibility

<title><link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/></title>

<title><link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/></title>

2.png pictures

For adding .png picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

3.gif pictures

For adding .gif picture format as your Favicon use the below given code snippet

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

On adding this script, please replace the 'URL of your icon file' with the correct URL of your Favicon.
Once you have this script ready, save the template and check your blog, your Favicon should be loading fine. When you refresh your blog site, you should see your nice little Favicon just before the blog address.

7 How do I hide the navBar of my Blog

        Did you ever notice a bar on the top of your blog as shown above? This is called the 'Navigation Bar' also known as 'Navbar'. Did you ever feel this NavBar of the blogger very irritating? Did you ever think of "How do I hide the NavBar of my Blog"
        Every blogspot blog by default recieves a Navigation Bar on the top, with buttons for switching to the next blog, searching yor blog and more. Some bloggers may find the Navigation Bar useful, But most of the bloggers may feel it irritating. If you feel that disabling the navigation bar would improve the layout of your blog then You may want to disable it.
        Blogspot is not giving you any options for hiding or disabling the so called 'NavBar', there is no menu entry to disable it, But you can still hide it.

Disabling the Blogger NavBar: Detailed Steps

Dashboard--> Layout--> Edit HTML
In the edit HTML text field, find the style defenitions( which is enclosed in { } brackets).
Then paste the below given code somewhere near other style defenitions.

#navbar-iframe {
height:0px;
visibility:hidden;
display: none !important
}

In this method, we are not particular about the position of the code pasting. Kindly refer the screen shot shown below.

In my personal experience this is a perfect hack. After these changes click on the save template button, reresh the page. If there is no navigation bar in the screen, then the Hack is perfect. Check out with all the leading browsers (atleast Internet explorer, Mozilla firefox, Safari and Google chrome).

Explanations

<style>...</style> encloses stylesheet instructions that define a page's layout. The actual layout instruction is now targeting the element of the ID navbar IFrame, which you define to not display. The !important tells the browser to override other layout defenitions for this element, if exists.

Exceptions

If there is still the navigation bar exists(hopefully it won't happen), perhaps Google has since adjusted the way their page design displays the navigation bar. If so you may need to read the HTML source code of you blog and adjust your stylesheet instructions accordingly.

Not For Newbies

The blogger navigation bar is also disabled when using FTP to transfer the blog pages to your own domain, because the navigation bar includes many elements that work only in the context of a blogger hosted blog.
However,FTP publishing(Dashboard-->Settings-->Publishing) comes with its own set of disadvantages, so a move must be carefully planned.
Please make a note that in order to switch to FTP uploading , Your blog must be public and use a classic template.
You can set your blog to be public via Dashboard-->Settings-->Permission
You can set your template to classic via Dashboard-->Settings-->Edit HTML

0 Tutorial Site Link to Us

Support Us, Link to Us. Help Us!!!

      If you like our reviews or Tips, kindly help us, we always need your support. You can support deknight.com by adding our link on your blog, here is the link code:

<a href="http://www.deknight.com/" target="_blank" title="Deknight: Tutorial Site- Java Tutorial, SQL Tutorial, HTML,CSS, JavaScript Tutorial</a>

Where to Place the Link?

You can place it anywhere on your sidebar. Go to Design -> Page Elements and paste the link code in a HTML/JavaScript gadget or a Blogroll gadget or a LinkList gadget.

Remember that, adding Links to the blogRoll will result in better search engine visibility which will in turn result in higher page rank.

0 Sitemap of Deknight Tutorial Site

SiteMap

0 Tutorial Site Write Tutorials For Us -Get Paid

           We’re looking for talented individuals to contribute Tutorials and articles to Deknight -Tutorial Site. If you’re skilled with technical writing, or Blogging, we’ll pay you $2 to $5 for each of your accepted Tutorials, Articles, Reviews. The amount will vary according to from $2 to $5 according to the quality and quantity of the article.

What will You Get?

That’s not all. Here’s what else you get:

• $2-$5 for every Accepted Tutorial
• Short Bio on every published tutorial for self promotion
• Link to Website on Every Post Published

How to Submit a Post

• We accept Tutorials, Articles, Roundups, and Freebies.
• You can send your post to deknighta[at]yahoo[dot]com
• We will not accept submissions that are posted elsewhere, or resemble content posted elsewhere.
• You may not republish the content posted on Deknight.com on any other website.
• Only use materials you own, or have permission to use in your submission. Use citation where needed.
• The submission should include an HTML document with the complete tutorial, and all of the assets (ie: images, documents, etc) archived together in a .zip file.
• Not all tutorials will be accepted. You may contact us with post concepts if you’d like our thoughts before writing a tutorial.
• If your tutorial is accepted, we will contact you for your personal information (Bio, URL etc) and Paypal information. We will only pay via paypal.
• We reserve the right to edit your submission