Thursday, January 26, 2017

Blogger Tips:How To Add Dynamic Pages in Blogger?

Today in this blog we will be showing you following Customization on Blogger which helps in presenting and organizing your individual blogs in separate pages with the help of Labels.These tips are some of the basics HTML implementations which most of the bloggers implement during their blogger setup. I hope this basic tips will help you somehow.
  • Adding Labels in your Menubar
  • Removing the Status Message from your code which displays the Label Info 

One disadvantage of hosting your blog in blogger is that, you cannot submit your post in separate pages. You can add as many page as you want too. These pages are labeled as domainname.com/p/pagename and are static. If you want to customize them, it will take a great effort and technical expertise. But instead of adding pages which are static, you can use Labels.
Labels are words that identifies as article falls under which category. So with the use of Labels you can have bunch of articles under a category. Then you can add your categories in the Menubar. Adding categories in the menubar acts like new pages in your blog.Below are the steps which will illustrate how to add search labels in menubar:

Adding Labels in your Menubar

  1. Load your Website in a web browser
  2. Inspect the Element of your menubar
    (Right Click + Inspect Element)
  3. You can see that menubar is wrapped inside the division with id menu-wrapper in the HTML. 
  4. Now go to your Blogger Dashboard
  5.  Click Template  and click Edit HTML
  6. Click inside the code and find the element menu-wrapper
    (CTRL + f)
  7. Below the menu-wrapper you can find the lists of items like Menu or Home listed. Below these sections add your lebel like shown below:
  8. This way you can add search label to your blog in the menubar.
Now that you have added the menubar, blogger still has one drawback that is it displays a message saying "Showing All posts with Lebellabelname. Show All Posts". A screenshot of the blog aakarpost.com is shown beblow which displays same message for its labels:

Removing the Status Message from your code which displays the Label Info

We can remove this message as well by removing modification of your template. Find for the class "status-msg-wrap" in your template like you located menu-wrapper earlier. Now remove the class status-msg-wrap from the code.


That's all you need to take care about. You need not change the css propertied defined for that class because the css is inactive after it does not find any id or class.


About Me

authorHello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
Learn More →