How to add Widget in a Blogger Template?

add Widget in a Blogger Template

If you start making blogger templates then these beginning tutorials really help you. Adding widgets and sections in a blogger template are simple but it is quite difficult for beginners. In this tutorial, we are covered all the widgets and sections for making a blogger template. To start making a blogger template you need to have knowledge about HTML, CSS, and JavaScript.

While adding widgets and sections in a blogger template you need to provide id, class, type. Blogger only supports XML code so there is some important tag you need to know. 


List of Widget in Blogger

1. LinkList: LinkList is an important widget in Blogger. It is used while you can add a list item to your site. For eg: You can use ListItem in Header li, footer page links, etc. While adding this widget you need to add a type of widget.

<b:section id = 'LinkList'>

<b:widget id = 'LinkList1' type = 'LinkList'>

</b:widget>

</b:section>

2. Blog: It is one of the important widgets in blogger templates. You can be used to template for showing articles on your blogger site. After adding this widget with type, I'd, and class all the blog post has been shown. 

<b:section id = 'Blog'>

<b:widget id = 'Blog1' type = 'Blog'>

</b:widget>

</b:section>

3. Popular posts: Popular Post is the important widget for showing popular posts on blogger sites. It can automatically be shown popular articles. After adding this widget to the template you can manually control this widget from the layout menu.

<b:section id = 'PopularPosts'> 

<b:widget id = 'PopularPosts1' type = 'PopularPosts'>

</b:widget>

</b:section>

4. FeaturedPost: Featured Post is another important widget in a blogger site. It is important if you want to show your favourite post at the top of the Blog Post. You can simply add this widget type is FeaturedPost. While adding a widget on a site you need to provides the id of the section and widget. And there are no requirements to add classes in a section and widget. 

<b:section id = 'FeaturedPost'> 

<b:widget id = 'FeaturedPost1' type = 'FeaturedPost'>

</b:widget>

</b:section>

5. Page Header: After adding the Page Header to your site, the site title and description are shown on your site. This is the first and important widget on the blogger site. There are you can also add the site logo from the layout menu.

<b:section id = 'Header'> 

<b:widget id = 'Header1' type = 'Header'>

</b:widget>

</b:section> 

6. HTML/JavaScript: It is the important widget in a blogger site. It is used while you need to add some HTML and Script to your site. It is used to directly add your code to your site without going in XML code. Or it is also used for adding plugins and scripts to your site such as subscribe menu, plugins, share button, etc. 

<b:section id = 'HTML'> 

<b:widget id = 'HTML1' type = 'HTML'>

</b:widget>

</b:section>

7. Blog Search: Blog Search is important for users to search in your post. On the blogger site, you cannot work on the backend. So, you need to used Blogger Search Engine. For adding this widget to your site you need to type BlogSearch on an XML code. After adding this widget you need to custom style this widget. And if you want to toggle this search engine then you can paste the script on a site. 

<b:section id = 'BlogSearch'> 

<b:widget id = 'BlogSearch1' type = 'BlogSearch'>

</b:widget>

</b:section>


8.Profile: Profile is another important widget in a blogger site. It is shown author biodata on a blogger site. First, you need to edit your profile on a blogger site. There you can add a name, about, favourite, other sites, and so more.

<b:section id = 'Profile'> 

<b:widget id = 'Profile1' type = 'Profile'>

</b:widget>

</b:section> 

9. Page: Page is the core element in blogger. This element helps to add different pages you create to your blog. You can choose any page that you want to show on your website. These elements are also easy to use in your HTML code. Also, you can add any link list items.

<b:section id = 'Page'> 

<b:widget id = 'Page1' type = 'Page'>

</b:widget>

</b:section> 


10. Blog Archive: Blog Archive helps the users to navigate older posts on your site. It is also simple to add widgets to your site. Just provides id on widget and section. And type is Blog Archive.

<b:section id = 'BlogArchive'> 

<b:widget id = 'BlogArchive1' type = 'BlogArchive'>

</b:widget>

</b:section> 

11. Followers: It can display the users follow your blog. It is also an important widget provides by bloggers for users can easily get their blog updates. You can easily add this widget in blogger by adding the type is Followers.

<b:section id = 'Followers'> 

<b:widget id = 'Followers1' type = 'Followers'>

</b:widget>

</b:section> 

12. Images: You can add images to your computer or somewhere on the web in this widget. You can add your logo, images and so more to this widget. This widget is very simple to add to your site with Images Type.

<b:section id = 'Image'> 

<b:widget id = 'Image1' type = 'Image'>

</b:widget>

</b:section>

13. Labels: Labels is the tags of your article which helps to find the particular article. This element is important because it uses in the article card section. You can also easily create categories using labels. This will be helpful for any news and tech blog site. It is easy to use in your HTML code.

<b:section id = 'Label'> 

<b:widget id = 'Label1' type = 'Label'>

</b:widget>

</b:section> 

14. Logo: Logo is another useful element in bloggers. This element helps to show your pride by upload your logo in the header or page and article section. This is mainly used in the header site. You can use your blog title to make your header logo.

<b:section id = 'BloggerButton'> 

<b:widget id = 'BloggerButton1' type = 'BloggerButton'>

</b:widget>

</b:section>

15. Blog Lists: It is the show of what you read with a blog roll of your favourite blogs. It is also simple to add to a blogger site with BlogLists Type.

<b:section id = 'BlogList'> 

<b:widget id = 'BlogList1' type = 'BlogList'>

</b:widget>

</b:section> 

16. Text: This widget is used for adding some text to your site. Most of the time it is used in the hero section and sidebar. You can use this widget anywhere. You can simply add this widget in blogger with Text Type.

<b:section id = 'Text'> 

<b:widget id = 'Text1' type = 'Text'>

</b:widget>

</b:section>

 

17. Blog Stats: It can display the number of views on your blog. This widget is not used on blogger sites. You can directly get these features on a Blogger Site. But you can use this template by BlogStats Type on a widget.

<b:section id = 'Stats'> 

<b:widget id = 'Stats1' type = 'Stats'>

</b:widget>

</b:section>  

18. Feed: Using this feed widget on a site you can add content from an RSS or Atom feed to your blog. Just take an example, you have A and B Websites. You want to show A website recent article in B Websites. Then you can use the feed widget in blogger. You can choose the number of articles, dates, and authors. But there are not show thumbnails of the articles.

<b:section id = 'Feed'> 

<b:widget id = 'Feed1' type = 'Feed'>

</b:widget>

</b:section> 

19. Subscription Links: Using this widget on the blogger site, your users can easily subscribe to your site and easily get notifications from your blog post. You can change the title of subscription links.

<b:section id = 'Subscribe'> 

<b:widget id = 'Subscribe1' type = 'Subscribe'>

</b:widget>

</b:section> 

20. Translate: It is an important widget for your users. There are a lot of users in different countries. If your article is not understood in their language. Then they used this translate widget and easily covert all language in their own way.

<b:section id = 'Translate'> 

<b:widget id = 'Translate1' type = 'Translate'>

</b:widget>

</b:section> 

 

21. List: It is an important widget if you can show your favourite books, films or anything if you like. You can choose the title and add your list to this widget.

<b:section id = 'List'> 

<b:widget id = 'List1' type = 'List'>

</b:widget>

</b:section> 


22. Contact Form: Contact Form is the important widget in blogger. Using this widget, users can easily contact you. Their users can enter their name, email, and their query.

<b:section id = 'ContactForm'> 

<b:widget id = 'ContactForm1' type = 'ContactForm'>

</b:widget>

</b:section> 


23. Wikipedia:  Wikipedia is the unique widget in blogger. If users can visit your site and they cannot find answer in your site. Then you can embeeded wikipedia widget on your site. Then users can search on wikipedia on your site. It can also helps your site going up.

<b:section id = 'Wikipedia'> 

<b:widget id = 'Wikipedia1' type = 'Wikipedia'>

</b:widget>

</b:section> 


24. Attribution:  This widget is not used in a blogger site. Attribution means you can provides attibute to blogger because you can used free hosting and subdomain. In practical, it is not used in anymore.

<b:section id = 'Attribution'> 

<b:widget id = 'Attribution1' type = 'Attribution'>

</b:widget>

</b:section> 


25. Report Abuse: It is the danger widget, if your site has unappropriate content like sexual, based on race, religion, disability, etc. But it is also easy to add widget in your site.

<b:section id = 'ReportAbuse'> 

<b:widget id = 'ReportAbuse1' type = 'ReportAbuse'>

</b:widget>

</b:section> 

Sandesh Tandan

My name is Sandesh Tandan from Nepal. I am starting blogging 2 years ago. And now blogging is my full part profession.

2 Comments

  1. Hey friends, this article really helps you

    ReplyDelete
  2. Hi, I have researched a lot and discovered some awesome Blogger themes in 2021. Please have a look : Top 10 Blogger Themes of 2021.

    ReplyDelete
Previous Post Next Post