Add More Widgets Under Header


In default Blogger templates, you can't add another widget under Header widget. A lot of people would like to add Adsense, a search box, a translator or a horizontal menu under header, so you need to change some default code to do that.

This is a typical view of Layout | Page Elements section.

How to Add More Widgets Under Header


To create Add a Gadget option under Header widget, follow these steps:

1- Go to Layout | Edit HTML.

2- Find the following code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>

Tip: You can find this code some lines after <body> tag.

3- Now make two changes in the above code, change maxwidgets='1' to maxwidgets='3' and showaddelement='no' to showaddelement='yes'. Now, the code should look like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Copy Mafia Template (Header)' type='Header'/>

Info: I've changed maxwidgets='1' to maxwidgets='3' which means you can add 3 widgets in Header section. A Header widget is there by default so actually 3 means 2 more widgets.

4- Save your template and go to Page Elements tab to see the changes.

Blogspot How to: Add Image as Sidebar Background

Some time ago I posted an article How to Add Image as Sidebar Background Heading Similarly you can also add an image in the whole sidebar. Just follow these simple steps and if you feel any difficulty at any step, feel free to ask:

How to Add Image as Sidebar Heading Background

To add an image as background of your sidebar heading, follow the simple steps.

1- Go to "Layout" and then "Edit HTML" section.

Remember: In "Edit HTML" section, always click "Download Full Template" before making any changes to your template, this is your backup.

2- Find the following code...

Blogspot Trick: How to Change Width of Body, Posts and Sidebar


Why to increase the width

1- You can have bigger images in your blogs.

2- Good result in old browsers like Internet Explorer 6.

3- Sidebar in perfect position.

4- It gives your blog an overall clean look.

Beginner's Guide to Customize Blogger Header


What We'll Do?

Our objective is to change the outlook of our header as well as play with the header widget itself.

The Default Code

In your Blogger CSS, the header is defined by the following piece of code:

Ways to Fix/Remove bX Errors in Blogger


How to Fix or Remove Blogger bX Errors

Some days ago, I tried to install a widget in one of my custom templates and then I got this error (bX-xxxxxx). I tried to solve the issue by myself by doing some random things and I was finally able to solve the problem. Some people also face this problem when trying to upload a custom Blogger template. Here are the techniques you can try.

Blogger Help: How to Delete My Blog

How to Delete a Blogger Blog

Alright, if you are really tired of blogging or just want to delete a test blog then here is the simplest way to do that. Before moving further, let me tell you that you can recover a deleted blog within 90 days with all posts.

The Right Way to Copy from Microsoft Word to Blogger

No comments:
When you want to post some data compiled in Microsoft Word to your Blogger post editor, you might get an error i.e. Your HTML cannot be accepted: Tag is not allowed:

Actually Microsoft Word automatically apply some meta tags to the documents which are illegal (not allowed) in Blogger posts. These tags are like these:

A Recent Comments Widget to Display Last 5 Comments in Sidebar

Recent comments widget will display last 5 comments on your blog. To setup this widget follow these simple steps:

1- Go to Layout and on the sidebar, click on Add a Gadget.

How to Change Sidebar Title Font, Size & Color

Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

How to Add Image in Header Background



Blogger default templates don't have images in the header background. You can add one that suits your taste by changing some style sheet elements in your "Edit HTML" tab between <b:skin> and </b:skin>.

Remove Firefox Dotted Border Links

1 comment:

you might have noticed that Firefox automatically creates dotted border around links. You can prevent this by telling Firefox what you want to do.

How to Post Links in Comments

How to Post Links in Blogger Comments

Let's get started

Ever wondered how to post links in Blogger comments??? Let me tell you a very simple way to do that. A basic HTML link is like this:

How to Change Header Title Font, Size & Color


This is a simple Blogger tut to tell you how to change the header title font. First of all, you should know which CSS code is responsible for your header title appearance:

Blogspot How to: Change Post Title Font, Size & Color

The default Blogger-Blogspot layouts (like Minima) don't allow you to change or customize the look of post title font through Fonts & Colors tab. An HTML/CSS expert can easily change the post title font from the Edit HTML tab but that's not easy for a non-technical person. In this tutorial, I'll tell you how to fully customize the post title font by going to Design -> Template Designer -> Advanced.

Blogger/Blogspot SEO (Search Engine Optimization) For Dummies

Make Blogger-Blogspot SEO Friendly

My experiences to make Blogger-Blogspot Search Engine friendly. Get more traffic by using these simple techniques. A lot of people think that Blogger-Blogspot is owned by Google so they would have an advantage in search results. That's not true at all. If you have a personal blog then SEO (Search Engine Optimization) might not be appealing to you but a professional blog must be search engine friendly.

Blogspot How To: Remove "Subscribe to: Posts (Atom)" Text


Where does this text appear?

This text appears by default on all Blogger templates under the posts. It is normally annoying for most of the users but you can easily remove it.

Translate Blog in Other Languages with Google Translate Widget

No comments:
Translate Blog in Other Languages with Google Translation Widget

Google translation widget allows your blog readers to translate your blog in their language without leaving the page. This widget is powered by Google Translate technology and can be easily installed to any blog.

Blogspot Tutorial: How to Change Default Blogger Favicon


A good favicon means good brand
In this tutorial, I'll tell you how to change the default favicon present in every Blogspot/Blogger blog. A favicon is usually a 16x16 .ico file and it is displayed with the title of a blog in a browser. So, we can add our own favicon to make our blog more personal.

Ready? Lets Add a Custom Favicon

1- Search for a free custom favicon on Google and you'll find a lot of them.

2- Blogger doesn't allow to upload .ico files so you need to upload your favicon on Google Sites. Just log in there with your Blogger account, create a site and upload your favicon there.

3- Go to Design then Edit HTML tab.

4- Find this code in your template:


4- Paste the following code right below above line like this:

<link rel="shortcut icon" href="YOUR FAVICON URL" />
<link rel="icon" href="YOUR FAVICON URL" />

4- Just change the YOUR FAVICON URL with the URL or address of your favicon uploaded in step 2.

5- Save your template and enjoy.

Blogspot Tutorial: Add StumbleUpon Button in Posts

Add StumbleUpon Button in Blogger for Traffic

StumbleUpon is a popular social bookmarking site where users share their favorite web pages. You can add StumbleUpon button in the footer of each post. This button would make it easy for readers to share your blog content with the rest of the world. This can drive more traffic to your blog.

Blogspot Tutorial: Add a Twitter Retweet Button in Posts

How to Add a Twitter Retweet Button in Blogger-Blogspot Posts
You can easily add retweet buttons on your Blogger-Blogspot blog. Such buttons allow blog readers to share content on Twitter with others. When people will tweet about your blog, you'll get free marketing and traffic for your blog.

How to Add Your Own Image as Blog Background in the Template Designer

Add Your Own Image As Background in the Template Designer

The most special thing about Blogger-Blogspot is personalization and ease of use. People love to have a personal image as their blog background. You can see my previous tutorial which makes it fairly easy to add an image as blog background in the older Blogger-Blogspot templates (also called layouts). Now, you can design your very own templates with the new Template Designer. But you can't add your own image as background without knowing HTML and CSS. So, in this tutorial, I'll try to make it very simple to add your own image as blog background.

10 Most Popular Blogger (Blogspot) Templates

10 Most Popular Blogger-Blogspot Templates

People are doing amazing thing with Blogger-Blogspot these days. One of them is to convert Wordpress themes to Blogger-Blogspot with full compatibility. I've compiled a list of most popular Blogger-Blogspot templates. Check it out and feel free to add your suggestion as well.

Blogger Template Designer For Beginners

1 comment:
Blogger Template Designer for Dummies
Some days ago, Blogger announced a new feature Template Designer through which users can easily design and customize layouts. The Template Designer was only available as a beta feature to Blogger in Draft users. From today, this awesome feature is available to everyone. Just log in to your Blogger account and you'll see a new option Design on your dashboard. In this guide, I'll try to explain everything you need to know about the Blogger Template Designer.

How to Remove Header Borders in Minima Blogger Template

How to Remove Header Borders in Blogspot/Blogger

This is a really quick and easy trick. Whenever, someone creates a new blog, Blogger automatically chooses Minima Blogger Template by default. I really love this minimal template but the border lines around header doesn't make any sense. So, in this tutorial, Ill tell you how you can very easily remove the border lines around header.

What Are Custom Fonts & How to Use Google Custom Fonts in Your Blog

Add Beautiful Fonts in Blogger Blogs Using Google Fonts

Google has recently launched a new service which lets you easily use amazing fonts in any blog. These fonts are powered by JavaScript code which is hosted by Google so you don't have to worry about it. Currently, only 18 fonts are available but we can expect that number to grow. For example, this text is written in Lobster font. These fonts are search engine friendly and work in all browsers.

How to Add Facebook Share or Like Button in Blogger Templates


Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook Share or Like button in each of your posts. This button will allow users to quickly share a post on Facebook.