How to Design/Customize and Add Gadgets to Your Website Using Blogger Layout Tools
About Blogger Layout Tool
Blogger Layout Tool is a kit of tools provided by Google to Blogging platform users so that they can create their own unique style of blogging platform according to their tastes and skills.
This article intends to explain how to use the blogger layout tools available at Google Blogger platform for customizing the features and outlook of your blog/custom domain. This is not to be confused with the building and designing of your website using the google template designer.
Through this article, I am going to provide you with very simple and easy to follow instructions on how to customize the blog (or your linked website, in case you linked your blog to a custom domain) using the Layout Buttons and Layout Tools that are freely available to you on Google Blogger Platform.
Blogger Layout Page Image Displaying Layout Tools and Gadgets
Advantages of Using Blogger Layout Tool
- Blogger Layout Tool allows you to customise your blog appearance by defining the number of posts and comments to be shown on your main page and by adding the read more button for presenting short snippets of articles on the main page instead of full-length articles.
- It facilitates easy navigation and handling of your blog by adding features like popular posts, blog archives, reading list, etc.
- You can create pages and categories and menu buttons for your visitors to browse very easily on your blog and to find articles and content of their choice in lesser time.
- You can create sharing buttons also for the sharing of the articles easily on social media.
- There are many more features that can be incorporated with the help of this Blogger Layout Tool which is discussed in details below.
How to Design and Customize Your Blog Header and Menu Bar Using Blogger Layout Tools
When you click the "layout" button from your blog administration page, the layout format opens up and you can manage all your blog features from there (as evident from the above screenshots of Blogger Layout page). The above images show you the various features that are available for customizing your layout.
I will discuss here each one of the features that are available for managing the "layout" that is visible in the above images.
- The first one is for "allowing" or "switching off" of the 'navigation bar'. If you keep it "ON" your viewers can easily skip to other blogs with the help of it thereby, leaving your blog. So, you better keep it "OFF".
- Next is the 'Header' tool for customizing your header background with any nice background image with a good description of your blog theme. You will be customizing everything about this header in the layout, with the help of the edit buttons available to their right-hand side.
- The 'Cross Column' below the Header is better for incorporating your Adsense and the other cross column may be used for creating your page buttons and/or category buttons (these buttons, once incorporated, become the Menu Bar for your blog).
- In order to customize the Menu Bar, you first need to create pages and categories by clicking the "pages" button that is visible above the "layout" button as shown in the above image of blogger page tools.
- When you click the "pages" button below the "posts" button, (or say, above the layout button), a new page or screen opens up which tells you that there are "no pages". There is a highlighted text reading "create new page" to the side of that information.
- When you click the "create pages" button, a new blank page opens up which is similar to the posts page of any blog. In the top title bar, type your page name. Then, in the body of the page, you can type the contents to be included on your page.
- A page can be either a stand-alone page giving some specific information about your blog like "About" page or any "Welcome" page to welcome your audience. Or, it can serve as a reference to a particular category of your blog posts so that it can act as a category page.
- In case it is to be treated as a reference or link to a particular topic, you need to link all of your article URLs related to that particular topic or category by typing suitable titles for each of those articles on this Page. Thereafter, link the URL of each of those articles to each one of those typed titles. Whenever you post a new article, you need to simultaneously create the links on this Page.
- So, a Page thus created contains a list of all your related articles. When your readers click any one of the titles of their choice from that list, it will lead you to that particular article. I have described the whole entire process of creating pages or categories already in my another prior article titled "How to Create Pages on Google Blogger".
- You can create as many pages as are suitable for your blog. But, your menubar should not get clustered with too many buttons for these pages.
- After customizing your Header and adding the "pages" or categories to the menubar, your blog may look like the below-posted image.
Layout of a Blog Header and Pages/Categories in the Blog Menu Bar
Customization of Blog Posts (Main Body) Layout
How to Customize Your Google Blogger 'Main Body' Features
When you clicked on the edit button at the below right corner of the Main Blog Posts section (at the center of Layout Page as shown in the above topmost images), the "Configure Blog Posts" page opens up in front of you. In this configure blog posts screenshot as above, there are three parts - Main Page options, Post Page options, and Arrange Items options.
At the bottom of that screenshot is the save button.
- Under main page options, you can choose how many posts to appear on each main page and whether you want to insert the "read more" button or not after a snippet of each post. Otherwise, you can allow whole posts to appear on the same page without 'read more' enabled.
- Coming to post-page options, the first box is for selecting the style of the appearance of the posting date of your article.
- Next is the style of giving credit to author or writer. You can mention, for example, posted by/ contributed by or simply by and the name.
- Next is the appearance of the posting time - whether to show only hours, minutes or along with the date.
- Next option is for how many comments to show on the page.
- The other boxes are for enabling links to the post, for enabling labels, for enabling reactions by viewers of the post (interesting, funny,etc.).
- Then comes the option for enabling quick editing facility so that you can edit it from the published post itself without logging into editing mode from Blogger account.
- Then, there are options for showing email post links, for showing share buttons below post and location.
- You can further enable author profile to be shown below posts and also to insert ads in between posts.
- After choosing all above-mentioned options that you might want to incorporate into your blog pages, you can check the appearance of the main page.
- The 'arrange items" section is for reviewing your page configuration and to change its format (if you think it so) by dragging the items up or down to suit your tastes.
- When you are satisfied with the appearance of your page and decide it to be good, don't forget to click the "save" button below.
- When you click the save button (at the bottom of "Configure blog posts" page), the configuration page gets disappeared and all your settings options get saved on your blog.
Your opinion on building your own blog
Why do you like blogging?
Blogger Layout Tools for Sidebar and Footer Page Configuration
How to Customize Blogger Layout for Configuration of Sidebar and The Footer
Your blog or website layout for sidebar and footer space can also be customized using the blogger layout tools smartly. There are many types of gadgets and options provided by google blogger for this purpose.
The sidebar and footer are installed depending on your template design selection. You can choose either one sidebar only option or many sidebar options by clicking on the template designs provided at the time of creating your blog. Similarly, there can be more than one footer options as per your liking.
The above images are provided based on one sidebar and one footer options. The same procedure applies for incorporating the features - whether it is for one sidebar or multiple sidebars and whether one footer or many footers.
For incorporating the features, you should click on the button add a gadget each time you want to add a new feature. The button "+ Add a Gadget" appears there always on the Layout page of your blog.
Whenever you click the "add a gadget", a page opens up showing a list of all Gadgets available for you. (There are 28 gadgets on the list and some more will show up when you click the "more gadgets" option. Or you can add your own gadget using HTML).
In the above screenshot, I have used the following features.
- The first feature on my sidebar is a "featured post". I clicked Add a Gadget and browsed down to that particular button of Featured Post and then, clicked on the "Add" button opposite to it. A window opens up showing the URL titles of all your posts, and you need to select one among them to be featured at the top right-hand side of your blog.
- Next, I added the gadget that showcases My other websites, by selecting the 'Link list Gadget', to show a list of my websites to the viewers.
- Then, I added Follow me by email Gadget.
- Then, I added Adsense gadget, for showing ads in the sidebar.
- Next, I added Google+ followers gadget for showing my followers on Google Plus.
- Then, there is the Labels gadget to show Labels so that viewers can select articles by clicking a label. You can choose how many labels to show.
- Then, there is the Blog stats gadget to show page views, popular posts gadget to show most viewed posts, blog archives gadget (to show month-wise old articles) and the HTML gadget for incorporating Disqus code to show comments on Disqus platform.
- Coming to Footer of the page layout, I added another Adsense gadget to the footer.
- But, you can add as many gadgets as you want on multiple sidebars and at footer also to suit all your needs.
Salient Features of Blogger Layout Tools and Their Benefits
Uses and benefits
Template is for designing the main format of your blog and for designing it artistically
Layout is for customizing the body and appearnce of your blog and for incorporating various navigation and sharing features
Settings tool is for setting some definite norms and standards like no.of posts and comments to be shown on each page and for allowing rights to author or administrator to manage blogs and for linking custom domain with blog