How to Install a custom template in Blogger?

1.Download a template file (Zip / Rar) and unzip. (Screenshot 1)



2. Log in to Blogger.
3. Go to "Layout" under "Dashboard". (Screenshot 2)



4. Click "Edit HTML" under "Layout". (Screenshot 3)



5. Don't forget for backup your old template. (Screenshot 4)



6. Find and Upload the new Blogger template. (Screenshot 5)


6. If a warning: Your new template does not include the following widgets, click "KEEP WIDGETS". (Screenshot 6)



5. Finish, Enjoy your new blog design.

↑ Back to TOP


How to Show or Hide "Navbar Blogger"

Before erasing navbar blogger (Navigation Bar), it’s better if I inform that this method is one of the Blogger TOS violation. If you still want to erase it, you can use the script below:


Hide Navbar:
#navbar-iframe { display:none}

Show Navbar:
#navbar-iframe { display:block }

Auto Hide:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to do:
In the Edit HTML page, put the code above under the code <b:skin><![CDATA[/* and then save template.


↑ Back to TOP


How can I edit the Navigation Menu link of my template?

1. Most templates have a menu that can only be changed from the HTML (Dashboard → Layout → Edit HTML). In many cases the code to look for is:

Just find the similar code like this:

<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Post RSS</a></li>
<li><a href='#'>Comment RSS</a></li>
<li><a href='#'>Edit</a></li>

For set link on Menu, your just find a code like this href='#' and change symbol # with link what you want.

Or, if you find the similar code like this:

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>

There you can change the expr:href='#' with your own links: href='mylink'. Also see the instructions in your template for more information.


2. Some templates include a gadget to edit the menu directly from the Dashboard (Dashboard → Layout → Page Elements).


↑ Back to TOP


How to Set SEO for Meta Title, Keyword and Description

Find This Code:
<title><data:blog.pageTitle/></title>

And Change with this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | (example: ZoomTemplate)</title>
<b:else/>
<title><data:blog.pageTitle/> | (example: ZoomTemplate)</title>
</b:if>
<meta content='your description here' name='description'/>
<meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>



↑ Back to TOP


How to display the last Posts or Comments on the sidebar?

1. Enter the administrator page elements (Dashboard → Layout).
2. Add a new feed widget, with the following URL’s:



To show the recent posts:

http://BlogName.blogspot.com/feeds/posts/default


To display the latest comments:


http://BlogName.blogspot.com/feeds/comments/default

Posted in: Tutorial Blog