Add a Widget or Gadget Above a Blog Post in Blogger

If you want to add a gadget or widget to Blogspot that displays above the blog posts then read on as in today's Blogger tutorial I explain how to open up the main posts section of a Blogger blog so that more gadgets can be added. Despite involving a small change to the Blogger theme it is not difficult and will only involve less than 5 minutes to unlock the main section so you can begin adding gadgets and widgets to Blogger in the Main Section.

By default Blogger themes on installation do not have the main section open to allow additional gadgets or widgets like a message or a banner to be added. Older default blogger templates have the main section locked in most cases. Therefore, in order to add gadgets the main section needs to be opened manually by tweaking the template. Whether you have a default Blogger theme or a third-party template unlocking the main section will not affect any other function.

Follow this step-by-step tutorial if you want to start adding gadgets in the Blogger posts area like a banner or a welcome message or some other widget. I suggest you also take a look at my other in-related step-by-step Blogger tutorials that show you how to do the following:

Easy Way to Add Banners to Blogger
How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger

How to Add a Gadget to the Main Posts Section in Blogger

In order to add a gadget or widget like a banner above blog posts in Blogger so that it displays on the homepage and all other blog pages it must first be possible to add a gadget to the main post area.

Check if the Add a Gadget Option in the Main Blogger Posts Section is Displayed

Check whether the Add a Gadget option is available by:

1. From the Dashboard select the Layout menu from the left-hand side menu


2. Scroll down to the Main Section where you will see the Blog Posts gadget in place


3. Check whether the Add a Gadget option is available in the main section.




If the Add a Gadget option is available you can skip
to Step 12

or

If the Add a Gadget option is not available it needs to be unlocked by following the steps below that will first show you how to open the main section and then add the a gadget for affiliate banners, messages and more.





Steps to Open the Main Posts Section in Blogger to Add Extra Gadgets



4. From the Dashboard select Theme from the menu on the left-hand side


5. Click on the down arrow on the orange Customize button


6. Click Backup to back up your template before proceeding then return to the drop down menu under the customize arrow





7. Choose Edit HTML from the drop down list of options


8. Click anywhere in the Blogger template


9. Enter CTRL + F to bring up the search box


10. Enter the search term class='main'
    
    You are looking for these lines:
    
    

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>

    
    
11. Replace the no with yes to show add element and save.
    
    The code should now look like this:

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='yes'>

    
    
12. Click Save to save the change to your template.


13. Navigate back to the Layout menu from the Dashboard


14. You will now be see the Add a Gadget link in the main blog post section. If for some reason this still isn't showing up then go back to the template and check if there is a maxwidgets attribute in the same line of code. Make sure that the maxwidgets="1" is set a number greater than one eg maxwidgets="2" and then save and go back to Layout again.




Steps to Add a Gadget Above a Blog Post in Blogger



15. To display your message or banner or other widget click on Add a Gadget above Blog Posts


16. Choose the HTML/Javascript gadget or you could choose Text Gadget if no code is being added


17. Paste the code in the content box in the pop up window that appears for the HTML / Javascript gadget.





18. Click on Save


19. Arrange your new gadget in the Main Section by dragging and dropping so that it occurs above the blog posts gadget in the Main Section


20. Click on Preview (eye icon) in the bottom right corner to see your new banner.


21. Click the Save button to apply your changes to the layout

Depending on the gadget you want to add above the blog posts you may find the following Blogger tutorials helpful:

Easy Way to Add Banners to Blogger
How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger

Today I have shown you how to open up the main posts area in Blogger to accommodate extra gadgets. You have learned how to add an affiliate marketing banner to your Blogger blog (Blogspot blog) that displays just above the posts on every page.

Related Articles

How to Add a Welcome Message to Blogger
How to Add a Sticky Welcome Message to Blogger
Easy Way to Add Banners to Blogger

How to Change the Color of the Blogger Navbar Menu

This Blogspot tutorial shows you how to change the color of the Blogger Navbar which appears above the header in older Blogger themes when enabled. Changing the color of the Blogger Navbar so that it matches the color scheme of your Blogger blog takes less than a minute and is an easy trick that requires no change to the Blogger code as all changes are done in the Navbar Gadget. Updated April 2022

To go straight to the step-by-step tutorial on how to change the color of the Navbar or read on for details about the Navbar and its purpose.

What is the Blogger Navbar?

The Blogger Navbar is the colored or sometimes transparent search bar menu that appears by default at the top of older Blogger themes above the header. The Navbar provides quick navigation links that make it easy to jump to the Blogger Dashboard, start a new post, access Theme Designer or share a page directly from your live blog.

Blogger Navbar Example

Currently Blogger offers the choice of 6 different Blogger Navbar colors: blue, tan, black, silver, transparent light and transparent dark. Transparent light and transparent dark are the most recent additions. It is uncertain how likely it is that Blogger will continue to offer more color options for the Navbar in the future as Google has announced that it will not be developing the Blogger platform anymore.

The Blogger Navbar Gadget Can be Customized to 6 Different Colors
along with the option to turn it off

Which Blogger Themes Have a Navbar Enabled?

Historically Blogger had the Navbar enabled by default on all blogs however these days the Navbar only displays at the top of a blog on some of the older themes like Simple, Picture Window and Awesome Inc. If you are using a newer theme or have a third party theme it will not show up automatically and would need to be enabled. If you want to know more about how to turn on the Navbar keep reading as this Blogger tutorial covers this too.

If you would like to learn how to remove the Blogger Navbar to stop it showing up I touch on this in this tutorial but for more in-depth coverage of the topic I discuss several methods in my Blogger Tutorial on How to Remove or Disable the Blogger Navbar

How To Change the Color of the Navbar / Search Bar / Menu Bar on Blogger

Below is a step-by-step walkthrough of how to change the color of the menu bar above the header in Blogger.

1. Sign in to Blogger and select the blog you wish to change


2. From the Blogger Dashboard go to Layout Menu


3. Find the Navbar section in Layout typically found at the top in the Blogger Layout Designer.


4. Click the Edit link which appears on the right side of the Navbar Gadget.






Click on the Edit Link to Open the Navbar Gadget
in the Layout Page of Blogger








Former Blogger Navbar Layout Circa 2009
Showing Position of the Edit Button




5. Select the color of your choice by clicking on the radio button on the left side of each color in the pop up Navbar Configuration window that appears.
   
   If you want to turn off the Navbar altogether click on the off radio button found at the bottom of the menu of choices in the Navbar configuration window.





Turn Blogger Navbar Off By Clicking on the Radio Button
at the Bottom of the Navbar Configuration Pop-up Window





6. Once you have made your selection click on the Save Button to save your changes


7. Click View Blog to see the effect of changing the color of the Blogger Navbar to more closely match the design and style of your blog.
   
   Or if you have turned the Blogger Navbar off you will see that the Navbar has disappeared from the top of your blog.

Summary

In today's Blogger Tutorial I have discussed what the Blogger Navbar is, its uses and what Blogger themes have it by default. I have shown you how to change the color of the Blogger Navbar on your blog via the Navbar Gadget to one of six custom choices so that it matches the color and design of your blog.

Related Links

How to Remove or Hide the Blogger Navbar with HTML
How to Change Image Sizes in a Blogger Blogspot Blog
How to Change Image Sizes in Own custom Dimensions in a Blogger Post
How to Add a Print Friendly Button to Blogger
How to Change the Date of Blog Posts in Blogger
How to Remove Blogger Labels Counter
Add a Follow Me Twitter Icon Button to Blogger
Easy Ways to Put Banners on Blogger
How to Add a Welcome Message to Blogger Homepage
How to Unlock or Delete Locked Widgets in Blogger

How to Remove the Date Header From Blogger Posts in Blogspot

How to remove or delete the date header from Blogger posts in Blogspot is a question that comes up frequently especially for beginner bloggers. If you want to stop the date header from showing then there is a simple tweak in Blogger to hide the date. Read on as I show you how to switch off the date header at the top of posts via the Blog Posts gadget.

Why Remove or Hide the Blogger Post Date Header

When you first create a blog, Blogger displays a date header at the top of Blogger Posts by default. Depending on the settings of your blog and the template you are using, Blogger displays the day, month and year of all your Blogspot blog posts so that your readers can know when the article was posted. In some cases the date header provides useful information but in many cases it can be a deterrent especially if some of your content was published a number of years ago.

Another reason that you may choose to turn off the date header is because you have crafted your posts for longevity and they are what is typically called evergreen. In this case it is immaterial when the post was first published and therefore dating it is unnecessary. Keep in mind though that even if you do turn off the date header your readers will still be able to tell the date a particular post was published by referring to the URL.

Toggling the date header on and off is one of many Blogger settings that can be configured according to a blogger's own preferences. To switch off the date header or turn it back on again is an easy fix that only takes a couple of minutes to perform. Please note that all past and any future blog posts will have the date removed.

Steps to Remove or Hide the Date Header from Blogger Posts

1. Log in to Blogger


2. At the dashboard choose Layout from the menu at the left


3. Find the Blog Posts Widget under the Main Section in the Blog Layout


4. Click on the Edit link or pencil to bring up the Configure Blog Posts pop up window





5. Under the option to Show Date Header move the slider to the off position to remove the date header. The switch will turn clear. The toggle switch is blue-green when on and clear when off.


6. Click on Save to commit your changes. The Save Button is positioned at the bottom right of the pop-up window.


7. Now click on the View blog link in the side menu and you will see that the date header has been removed from your blog posts.

#bloggertutorials #blogspottutorials #bloggertips

Summary

In this Blogspot tutorial you have learned how to turn off or hide the date header from posts in your Blogger blog by configuring your preferences in the Blog Posts gadget. The Show Date Header option is activated or deactivated by sliding the toggle switch. The main advantages of deleting or removing the date header is for blogs with evergreen content or blogs with older content.

Related Articles

How to Add a Welcome Message to a Blogger Homepage
How to Change the Color of the Blogger Nav Bar
Why Blogger is a Better Blogging Platform than Wordpress
How to Choose a Great Topic for a Blogger Blog Tips
How to Add a Copyright Notice to a Blogger Blog
How to Remove or Turn Off the Labels Counter in a Blogger Blog

How to Add a Blog Welcome Message to a Blogger Homepage

A blog welcome message is a great way to greet your visitors when they arrive on your Blogger blog. By adding a blog welcome message you will immediately engage your readers and they will get more information about what your blog is about. In this Blogger tutorial I not only show you how to add a welcome message to the homepage of a Blogger blog, but I also discuss what to say and where to place your welcome message on your blog.

Fortunately adding a blog welcome message to your Blogger homepage is easy to do with the text gadget and you can customize the look of the text, links, video and more.

What to Say in a Blogger Blog Welcome Message

A welcome message that greets visitors as they arrive on your blog can be placed on a Blogger blog with the intention of letting readers know more about your blog than they can glean from looking at your blog title and blog description. A welcome message typically says something about the purpose of your blog, may include something about you, what you do, what makes your content different and most importantly how you can help them solve a problem.

Your blog welcome message is an opportunity to engage your visitors so it is important to think about the flavor of the message you want to convey. For instance do you want to promote friendliness or trustworthiness, or both? Perhaps you want to include a message that promotes you as an authority on a subject so for example you might say I have 10 years industry experience in blogging or something like that to evidence your knowledge of the niche topic of your blog.

Take a look at this example of a simple Blog Welcome Message below that sets the tone for the visitor experience. The object is to encourage repeat visits and to let the visitor know you are there to help:

Welcome! Thanks for stopping by. This blog provides information on blogging and resources to customize your blog. I look forward to helping you create a successful blog. Please consider following me so you don't miss out on any new posts.

If you are interested in learning more about crafting a welcome message for your Blogger blog watch out for my upcoming blog post in which I give more examples of welcome messages and what to say to engage visitors.

Where to Position a Welcome Message on the Blogger Homepage Guide

Before we discuss how to add a blog welcome message it is a good idea to consider placement of your welcome message. There are three primary spots to place a welcome message: just below the header, above the post area or at the top of the sidebar.

Below the Header
A well crafted blog welcome message just below the header can be a good way to draw the eye to the hotspot below the header. If you have a banner or an Adsense unit there already you will need to be sure that the welcome message adds visual appeal and does not conflict with existing Adsense units or banners.

In the Sidebar
At the top of sidebar can also be a great place for your Blogger welcome message. If eye catching, the blog welcome message will grab a reader's attention in that spot.  Further a welcome message there is less likely to conflict with other widgets like banners or Adsense units.

Above the Post Area
Another option is to put a blog welcome message often called a sticky message above the posts in the main post section of Blogger. The benefits of this position for a blog welcome message is that it will not detract from any other widgets in place and will always display whenever a visitor lands on your Blogger homepage.

For detailed instructions on how to add a welcome message above blog posts in Blogger check out my companion article: How to Add a Sticky Welcome Message to Blogger

Steps to Add a Welcome Message to the Sidebar of a Blogger Homepage Guide

Follow the steps outlined below to quickly and easily add a welcome message to the sidebar of a Blogspot blog that greets your visitors no matter what page they land on. If you would prefer to place your message above the header or :

Step 1
Login to your Blogger account at Blogger.com

Step 2
From the Blogger Dashboard click on Layout from the menu on the left-hand side

Step 3
Find the Sidebar section. Click on the Add a Gadget link

Step 4
From the pop-up menu scroll down to select the Text gadget.  If you want a sophisticated welcome message that includes video and third-party scripts then choose the html/javascript widget instead from the same menu.

Add a Blog Welcome Message to a Blogger Homepage
sing the Text Gadget

Step 5
Click on the plus+ icon at the right of the Text gadget to create your welcome message.

Step 6
Enter a title for your message in the pop up window that appears. Name the gadget something meaningful like welcome message so you will be able to easily identify it later.

Step 7
Add the text of your Blogger welcome message into the text box. See an example of a welcome message in the image below for ideas. Using the Rich Text Editor icons you can add some simple styling by changing the text color, adding blockquotes, bold and italics. For more sophisticated styling click on the Edit HTML button which allows you to add specific HTML style code around your text. If you are not sure how to add HTML styling to your welcome message check out my other post on adding styling to a Blogger welcome message.

Use the Text Box Gadget to Create a Blog Welcome Message in Blogger

Step 8
Click Save to save your welcome message gadget.

Step 9
Click on Preview (bottom right-hand corner eye icon) to view your welcome message.

Step 10
Once you are happy with the message you can move on to repositioning it the sidebar. Use drag and drop to arrange the welcome message alongside other gadgets in the sidebar.

Step 10
Click Save by clicking on the save button bottom right-hand corner once you are satisfied with the positioning of your Blogger welcome message in the sidebar.


In this Blogger tutorial you have learned how to add a blog welcome message to Blogger. Also discussed were examples of what to say in a welcome message and where to place your message for best effect. Please feel free to comment about adding a blog welcome message if you would like to.

Related Articles

Basic Blogger Tutorials to Customize a Blogger Blog for Beginners
Advanced Blogger Tutorials to Customize a Blogger Blog
How to Add a Sticky Message Above Blogger Posts
How to Schedule Blog Posts in Blogger for a Specific Future Date and Time
How to Add a Copyright Notice to a Blogger Blog
How to Delete a Blogger Blog

Add a Print Friendly Button to Blogger to Print Out Blog Posts

Attention Blogspot bloggers I have found a really easy way to allow visitors to my Blogger blogs to print out my articles. Today I am going to share with you this very easy trick which is absolutely free. It only takes a few minutes to install a printer friendly button at the foot of your Blogger posts or in the Sidebar and you will be adding a lot of functionality to your blog. (Updated as at 18 February 2022).

Advantages of Adding a Print Friendly Button to Blogger

• The Print Friendly button is absolutely free
• It creates an attractive print friendly version of your blog article that is print optimized.
• There is an option to print in PDF format or save in PDF format
• Removes unwanted content such as Google ads
• Provides flexibility to remove unwanted text and only print out what is important to the reader
• All images can be removed leaving only the text thus saving paper and ink
• Minimizes the risk of readers copying and pasting your material because they don't know how to print out

The PrintFriendly button is a very handy gadget. When a visitor clicks on the button it will take them to an article preview screen and offers some printing and sharing options. There is the option to print out the article directly with or without images. Alternatively the article can be downloaded as a PDF file or a link to the article emailed. PrintFriendly even lets you share the article via a Twitter Tweet button.

How To Add a Print Friendly Button to your Blogger blog

There are two ways to add a Print Friendly Button to Blogger.

1. The first and by far the easiest way is to add a Print Friendly button to the sidebar or below your Blogger posts using an HTML / Javascript widget.
2. The second is to hard code the Print Friendly button directly into your blog which will give you much greater flexibility in terms of placement.

Method 1 - To Add a Print Friendly Button to Allow Readers to Print Your Blog Posts

1. Sign in to Blogger and select the blog you want to add the printer friendly button to.
2. From the Blogger dashboard go to the Layout menu
3. Decide where you want your gadget. The sidebar is an easy choice. Scroll down until your find the Sidebar section of your template
4. Click on the Add a Gadget link in the sidebar
   
5. Choose the HTML/JavaScript gadget





6. Open a new window in your browser and navigate to the PrintFriendly website.
7. Scroll down to the bottom of the page and click on the Blogger icon
8. Select the HTML radio button at the top left of the page
   
   
   
   
9. Choose a PrintFriendly button by selecting the radio button beside it. Print Friendly offer at least 12 different buttons.
10. Select the features you want from the Features Menu or go with the default settings displayed. You may decide to turn off email as a way to have more control of how your article is shared on the internet.
11. Once you are happy with all the features settings copy the code that is displayed below the features.
12. Now return to the HTML gadget and paste the code into the gadget
13. Select Save
14. Scroll to the bottom of the Layout Menu and click on the Preview Button
15. You will now see your PrintFriendly Button as it will appear on your live blog.
16. Click the back button of your browser to return to the Layout Menu
17. If you are satisfied with the location of the button click Save at the bottom right-hand corner. If not you may need to play around with the positioning to get the optimal place in the sidebar.
    
    

Method 2 - To Add a Print Friendly Button to Allow Readeers to Print Your Articles

(Note: Before you attempt this make sure you have backed up your Blogger Template)

1. Log in to Blogger and select the blog you want to add the printer friendly button to.
2. From the Blogger dashboard click Theme from the side menu
3. Select EDIT HTML from the drop down menu





4. Click in the code box and then use CTRL + F to find the following code:
   

   <div class='post-footer'>

5. Open a new browser window go to the PrintFriendly website
6. Scroll down the home page until you see the Blogger icon, then click on it.
7. Make sure the HTML radio button is selected at the top of the Button page
8. Select the radio button for the PrintFriendly Button that you think will integrate best with your Blogger blog. (There are at least 12 to choose from).


9. In the Features menu select the features that you want your PrintFriendly button to have or go with the default. I suggest you think about whether you want readers to be able to email your posts.
10. Copy the code snippet for your chosen button
11. Then go back to your open Blogger window and find the code you identified in Step 4 of these instructions.
12. Paste the code directly after the <div class='post-footer'> tag
13. Save your changes to the Blogger template
14. From the Dashboard click View Blog to see your PrintFriendly button beneath each post.

Summary

Today I introduced you to the PrintFriendly button - a completely free button that print optimizes your Blogger posts and allows readers to print directly from the post. I discussed some of the main advantages of adding the printer friendly button to Blogger and I provided you with comprehensive instructions to add the button to your Blogger template by either using an HTML/ Javascript gadget or by hard coding it into your Blogger HTML code.

If you found this article helpful please let me know by commenting below. I would be interested in your experience.

Related Links

How to Add a Welcome Message to a Blogger Homepage
How to Change the Color of the Blogger Navbar or Remove It in Layout
How to Unlock or Delete Locked Blogger Widgets
How to Put a Twitter Icon on Blogger Next to Blog Post Title
How to Delete a Google Blogger Blogspot Blog in 2022
How to Add a Copyright Notice to a Blogger Blog

Remove Blogger Labels Counter or Turn On Counter in a Blogspot Blog

Until recently the only way to turn off, disable or remove the counter of the labels widget in Blogger was to use a Blogger hack. Luckily Blogger has now added a new feature so that Blogspot bloggers have a choice about whether to show or not show a post count next to the corresponding tag when using the Blogger labels widget. (Updated as at 18 February 2022)

How to Turn Off  / Remove / Delete the Blogger Labels Counter?

If you already have a Blogger labels widget installed and you are using an older template then Blogger shows a count of the number of posts with that label or tag next to each label by default. If you want to turn off the label counter you will need to disable it.

Removing the Blogger labels counter is easy and only takes a minute. Switching off the labels counter can be useful sometimes for instance when establishing a new blog where a limited number of posts may deter visitors. Fortunately Blogger has listened to users and now installs a new blog with the Labels Counter turned off.

Conversely you may find that your Blogger label counter has been disabled and you want to reinstate it. In this case you would navigate to Blogger and follow these steps except that you would reverse Step 4.

1. Log in to Blogger
2. At the Dashboard go to Layout Menu
3. In the Blogger sidebar click on the pencil or click the edit link to edit your Labels Gadget
4. Use the toggle button to switch between on (blue-green) and off positions (white) in the Show Number of Posts Per Label heading.
5. Click on Save
6. View your Blogger blog without the number of posts shown next to the labels tag

#bloggertutorials #blogspot #bloggergadgets

Summary
Today you have learned how to turn off the Blogger labels counter so that no count of the number of posts is shown next to the label in a Blogspot blog. Disabling this feature only takes a minute and can be a useful feature for new blogs with few posts. If you are new to Blogger and blogging you can learn more useful tricks and tips for customizing your blog at Blogspot Blogger Guide. Watch out for more Blogger tutorials in this series of Blogspot Tutorials for Beginners.



Related Links
How to Put a Copyright Notice on a Blogger Blog
How to Add a Print Friendly Button to Blogger
How to Change the Date of Blog Posts in Blogger
Add a Follow Me Twitter Icon Button to Blogger
Easy Ways to Put Banners on Blogger
How to Add a Welcome Message to Blogger Homepage
How to Unlock or Delete Locked Widgets in Blogger
Making Money From Affiliate Banners and Links with Blogger
How to Get More Adsense Clicks with Blogger
Easy Ways to Put Affiliate Ad Banners on Blogger