ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Design/Customize and Add Gadgets to Your Website Using Blogger Layout Tools

Updated on January 25, 2018
Venkatachari M profile image

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

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

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

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

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.

Customization of 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 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?

See results

Blogger Layout Tools for Sidebar and Footer Page Configuration

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 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 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 an HTML code for it by registering with Add This site.
  • 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

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 imageAUTHOR

      Venkatachari M 

      12 months ago from Hyderabad, India

      Truly, Jackie. It was a little bit tough job explaining it. I had to put up each step-by-step instruction with those images to make it clearly understandable to everybody, even a lay man. Thanks for your appreciation of my work.

    • Jackie Lynnley profile image

      Jackie Lynnley 

      12 months ago from The Beautiful South

      I sure need to earmark this! Great work you have done here, thank you so much!

    • Venkatachari M profile imageAUTHOR

      Venkatachari M 

      20 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 

      20 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 imageAUTHOR

      Venkatachari M 

      23 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 

      23 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 

      23 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 imageAUTHOR

      Venkatachari M 

      24 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 

      24 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years ago from Shelton

      Venkatach this is such a useful and helpful hub my friend

    • Venkatachari M profile imageAUTHOR

      Venkatachari M 

      2 years ago from Hyderabad, India

      You are welcome, Dear.

    • manatita44 profile image

      manatita44 

      2 years ago from london

      Thank you, Bro.

    • Venkatachari M profile imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years ago from California

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

    • Venkatachari M profile imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years ago from Dubai

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

    • Venkatachari M profile imageAUTHOR

      Venkatachari M 

      2 years 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ć 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 imageAUTHOR

      Venkatachari M 

      2 years 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 

      2 years 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 

      2 years 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 Richert 

      2 years 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...

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)