ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to design a website | How to add Google Gadgets using Blogger Layout Tools

Updated on May 1, 2016
Venkatachari M profile image

Venkat is interested in learning new things and keeps exploring websites to update himself on technology and web building gadgets.

What is Blogger Layout Tool?

Blogger Layout Tool is a kit of tools provided by Google for users of their blogging platform so that the users can create their own style of blogging platform suited to their tastes and skills.

This article intends to explain how to use the blogger layout tools provided by google blogger for customizing the features and outlook of your blog or your own custom domain. This is not to be confused with the building and designing of your website using the google template designer.

In this article, I am going to provide some simple guidance on how to customize the blog or your linked website using the Layout Buttons and Layout Tools that are available on Google 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 find articles and content of their choice in lesser time.
  • You can create sharing buttons also for sharing 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.

Blogger Layout Page image with all its tools and gadgets

When you click on the Layout tool, the above page is opened up on blogger blogspot.com
When you click on the Layout tool, the above page is opened up on blogger blogspot.com

How to customise your Blog Header and Menu bar with 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 screen shots of Blogger Layout page). The above images show you the various features available for customising your layout.

I will discuss here each one of the features that are available for managing the "layout" that are visible in the above images.

  • The first one is the 'navigation bar' which is not of much use as viewers can easily skip to other blogs with the help of it leaving your blog. So, you better keep it off.
  • Next is the 'Header' tool for customising your header background with any nice background image and a good description of your blog theme. You will be customising everything in layout, with the help of edit buttons available to their right-hand side.
  • The 'Cross Column' below the Header is better for incorporating your Adsense and another cross column for creating your page buttons and category buttons (which is also known as the menu bar for your blog).
  • In order to customise 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 above the layout button, a page opens up which tells you that there are no pages. There is a highlighted text reading "create new page" to the side of the information. When you click the create pages button, a new page opens up which is similar to the posts page. In the top title bar, type your page name and in the body of the page, you can describe contents to be included in your page. A page can be a stand alone page giving some specific information. Or, it can be relevant to a particular category of your blog posts so that it can act as a category page. In that case, you will link all of your article URLs with suitable titles related to that particular category to that page whenever you post a blog. So, pages are either stand-alone pages or categories. I have described the whole entire process of creating pages or categories already in my another prior article at this link. http://hubpages.com/technology/How-to-Create-Pages-on-Google-Blogger
  • 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 with Header and pages/ categories in the menu bar

The Header is customised adding a description and the Menu bar is showing up the stand alone pages and categories. Welcome and About are pages and others are Categories.
The Header is customised adding a description and the Menu bar is showing up the stand alone pages and categories. Welcome and About are pages and others are Categories.

Customising Blog Posts (main body) Layout

These images are the snippets of configure main body options that are available on blogger layout
These images are the snippets of configure main body options that are available on blogger 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 above top most 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 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 for 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 on 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 save button (at the bottom of "Configure blog posts" page) inside, the configuration page gets disappeared and all your settings options saved on your blog.

Your opinion on building your own blog

Why do you like blogging?

See results

Blogger Layout tools for sidebar and footer page

Above is the screenshot for blogger layout for customising Sidebar and Footer layout.
Above is the screenshot for blogger layout for customising Sidebar and Footer layout.

How to customize blogger layout for sidebar and 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 upon 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 click "more gadgets". Or you can add your own gadget with 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 clicked on the "Add" button against 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 HTML / Javascript feature by clicking on that Gadget in the list, for showing "Add This" buttons on my blog which are appearing at the extreme left side of my blog (social sharing buttons). I got a HTML code for it by registering with Add This site.
  • Next, I added the gadget of My other websites, by selecting Link list Gadget, to show a list of my websites to 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 at the footer.
  • But, you can add as many gadgets as you want on multiple sidebars and at footer also to suit all your needs.


Different features of Blogger Layout and their benefits

Blogger Tools
Uses and benefits
Template
Template is for designing the main format of your blog and for designing it artistically
Layout
Layout is for customizing the body and appearnce of your blog and for incorporating various navigation and sharing features
Settings
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

Comments

    0 of 8192 characters used
    Post Comment

    • Venkatachari M profile image
      Author

      Venkatachari M 6 months ago from Hyderabad, India

      Carb, I am sorry to say that there is no such option available in a blog. There are only "jump breaks" that can be made but no page breaks. The whole post will appear only on a single page with no breaks. I have googled it and it also confirmed there is no such feature available for Google blogger.

      But, your followers can still print your photos by editing the pages after taking a screenshot of the page. A screen shot captures only that much of page which is visible on your screen. Thereafter, you can edit it using photoshop or any other tool and save the photos in your files.

    • Carb Diva profile image

      Linda Lum 6 months ago from Washington State, USA

      I sincerely appreciate all of the time you have spent to create this hub. So very helpful for those of us who are also trying to work in environments other than Hub pages. I too have established a blog on blogger.com and have a technical question for you.

      Is there any way to create a "page break" in an individual post? For example, I am thinking of the way in which Word documents (in Microsoft) are created. One can easily insert a page break in Word documents.

      Many of my posts are sharing patterns for quilts, banners, and such. If I scan a pattern and paste it into my blog as a "photo", it would be nice to know that my followers could print that pattern without problems.

      Do you have any information on this, or perhaps know someone else who does this type of sharing on their blog?

    • Venkatachari M profile image
      Author

      Venkatachari M 9 months ago from Hyderabad, India

      Thank you, Glenn, for appreciating my work. Really, Blogger is a good platform for anyone who wants to have his free web presence. It provides all the features in so simple a way that you need not put enough efforts to build it. Thanks for the nice comment.

      And, thanks for putting that additional clarification to FlourishAnyway's question above.

    • Glenn Stok profile image

      Glenn Stok 9 months ago from Long Island, NY

      FlourishAnyway, in reference to your question in your comment above, about comparing traffic between HP and Blogger: It's not related to using Blogger, per sé. Traffic is dependent on the quality and usefulness of the content. You also need to create a good description and complete the search preferences under settings.

    • Glenn Stok profile image

      Glenn Stok 9 months ago from Long Island, NY

      Excellent detailed explanation of using Blogger's layout tool. This is one of the most useful features of Blogger because it lets one quickly add sections to their site by use of "gadgets" and then move things around to redesign a layout without losing data.

      By the way, your table at the end is a nice touch. It clearly puts all the pieces into perspective.

    • Venkatachari M profile image
      Author

      Venkatachari M 10 months ago from Hyderabad, India

      Very glad to see you like my article and save it for future references. I am blogging since 2012 and have 5 blogs. I didn't get views, though.

      And, thank you for following me back.

    • Nadine May profile image

      Nadine May 10 months ago from Cape Town, Western Cape, South Africa

      Wonderful article and I have saved your post in my blogs folder. I do have 4 google blogs but every time I have to add a post ( which is not often ) I almost have to relearn how to do it!

    • Venkatachari M profile image
      Author

      Venkatachari M 10 months ago from Hyderabad, India

      Thanks for the visit and nice comment. And thanks for following back.

      You can have one which is free on Google Blogger. I receive some good traffic for some articles on it.

    • FlourishAnyway profile image

      FlourishAnyway 10 months ago from USA

      I've never tried Blogger but I wonder how it would compare to HP traffic. I'm encouraged to know about the option. You present an excellent tutorial here.

    • Venkatachari M profile image
      Author

      Venkatachari M 12 months ago from Hyderabad, India

      Thank you, Chitra. I am glad that it will be of some help to you as well as many others who may be looking for using the Blogger Gadgets. I agree that blogger platform is nice as we can blog on whatever we like even in fewer words.

    • ChitrangadaSharan profile image

      Chitrangada Sharan 12 months ago from New Delhi, India

      Very nice and informative article ! I will follow your advice on my blogger site. I love writing there because I can write my thoughts freely there and some times even in very few words.

      Thanks for sharing and pinning it for future reference!

    • Venkatachari M profile image
      Author

      Venkatachari M 12 months ago from Hyderabad, India

      Thanks for the visit. I am glad that it helps people in designing their websites or blogs.

    • Frank Atanacio profile image

      Frank Atanacio 12 months ago from Shelton

      Venkatach this is such a useful and helpful hub my friend

    • Venkatachari M profile image
      Author

      Venkatachari M 12 months ago from Hyderabad, India

      You are welcome, Dear.

    • manatita44 profile image

      manatita44 12 months ago from london

      Thank you, Bro.

    • Venkatachari M profile image
      Author

      Venkatachari M 12 months ago from Hyderabad, India

      Can you send a mail to me to my mail id vnktchari@gmail.com with a link to your website? I will look into it and then see what can be done.

    • manatita44 profile image

      manatita44 12 months ago from london

      Well, I need one badly, but don't know how to start. Surabhi tried for me, but it was not mobile friendly, and so it was left unfinished. God bless your noble Heart.

    • Venkatachari M profile image
      Author

      Venkatachari M 12 months ago from Hyderabad, India

      Thank you, Manatita. If you like, I can try to clear all your doubts and help you in designing and customising your website, if any.

    • manatita44 profile image

      manatita44 12 months ago from london

      Very nice try, but for me still mystifying. I suppose some things are more difficult for me. Great effort on your part.

    • Venkatachari M profile image
      Author

      Venkatachari M 13 months ago from Hyderabad, India

      True, Audrey. I can understand as I myself get confused with it on many occasions. But, it's a good platform for blogging or building a nice website.

    • AudreyHowitt profile image

      Audrey Howitt 13 months ago from California

      Excellent article! I love Blogger, but it mystifies me a bit

    • Venkatachari M profile image
      Author

      Venkatachari M 13 months ago from Hyderabad, India

      I am glad, Nitya, to know that it is much helpful. Thanks for the visit and encouraging comment.

    • Vellur profile image

      Nithya Venkat 13 months ago from Dubai

      A helpful hub on how to use the blogger layout tool, thank you for sharing.

    • Venkatachari M profile image
      Author

      Venkatachari M 14 months ago from Hyderabad, India

      Devika, this is another article in the same series of building your website. There are total 3 articles on this topic. One is for creating and building the website, another for creating pages or categories, and the third one is for customizing the layout with gadgets and buttons.

    • DDE profile image

      Devika Primić 14 months ago from Dubrovnik, Croatia

      Hi I made a comment on this hub a few days ago and don't know what happened, can't see it now. The title caught my eye and a very helpful hub indeed.

    • Venkatachari M profile image
      Author

      Venkatachari M 14 months ago from Hyderabad, India

      Alicia, I am glad to see you are interested in it and are aware of using these tools. I feel happy if my guidelines are of help to you. Thanks for the nice comment.

    • Venkatachari M profile image
      Author

      Venkatachari M 14 months ago from Hyderabad, India

      Thank you, Bill, for your visit and bookmarking it. There are total 3 articles on this subject of building and customizing your website using Google Blogger tools. You may need to look at all the tips given there to build a good website. I shared only my experiences as far as known to me in all these articles.

    • Venkatachari M profile image
      Author

      Venkatachari M 14 months ago from Hyderabad, India

      Ruby, I am sorry to say you got confused. This one is another hub describing how to use the Layout tools on Blogger. The previous one you commented was about creating and building a website with Google Templates. So, both deal with separate features. There are total 3 articles on this subject. Now, I hope you got cleared.

      Thanks for visiting and commenting.

    • AliciaC profile image

      Linda Crampton 14 months ago from British Columbia, Canada

      This is an excellent reference source. Some of it I knew, but you've taught me some new things about Blogger. Thank you!

    • billybuc profile image

      Bill Holland 14 months ago from Olympia, WA

      I will bookmark this for later reference. I definitely need the instructions you gave here...thank you!

    • always exploring profile image

      Ruby Jean Fuller 14 months ago from Southern Illinois

      I don't know what happened to my comment that I made yesterday? I will try again. This is a great tool for anyone wanting to set up a website. I an sure it will help others. Thank you for sharing...

    Click to Rate This Article