In Blogger, widgets are small blocks of content that can be added to your blog's layout to enhance its functionality. These widgets can display a variety of content such as social media feeds, popular posts, search bars, etc., and they can be customized using HTML, CSS, and JavaScript.

Here’s a list of useful widgets for Blogger along with source code and guidelines on how to implement them.

A popular posts widget displays the most viewed or clicked posts on your blog. This can help drive more traffic to your best content.

<b:if cond='data:blog.pageType == "index"'>

    <b:section class='widget PopularPosts' id='PopularPosts1'
  maxwidgets='1' name='Popular Posts' showaddelement='no'>

    <h2 class='widget-title'>Popular Posts</h2>

      <b:widget id='PopularPosts1' locked='false' title='Popular
  Posts' type='PopularPosts' visible='true'/>

  </b:section>
</b:if>

1. This widget is typically available in Blogger’s default layout. You can add this widget directly from the Layout section.
2. Go to Layout > Add a Gadget and select Popular Posts from the list.

This widget allows you to display a list of your latest posts on the sidebar or any other section of your blog.

Source Code:

 

    <b:section class='widget' id='RecentPosts1' maxwidgets='1' name='Recent
    Posts' showaddelement='no'>
  
  
  <h2 class='widget-title'>Recent Posts</h2>
  

      <b:widget id='RecentPosts1' locked='false' title='Recent Posts'
    type='RecentPosts' visible='true'/>
  
  
</b:section>

Guideline:

Social Media Icons Widget

Source Code:

  
<div class="social-media-icons">
  

      <a href="https://facebook.com/yourpage" target="_blank"><img
    src="https://example.com/facebook-icon.png" alt="Facebook"></a>
  
  

      <a href="https://twitter.com/yourpage" target="_blank"><img
    src="https://example.com/twitter-icon.png" alt="Twitter"></a>
  
  

      <a href="https://instagram.com/yourpage"
    target="_blank"><img src="https://example.com/instagram-icon.png"
    alt="Instagram"></a>
  
  

      <a href="https://linkedin.com/yourpage" target="_blank"><img
    src="https://example.com/linkedin-icon.png" alt="LinkedIn"></a>
  
  
</div>

  
.social-media-icons a {
  
  margin: 10px;
  
  display: inline-block;
  
}
  
.social-media-icons img {
  
width: 30px;
 
 height: 30px;
}

Guideline:

Search Bar Widget

Source Code

  
<div class="search-bar">
  
  <form action="/search" method="get">
  

        <input type="text" name="q" placeholder="Search this
    blog..." required>
  
  
    <button type="submit">Search</button>
  
  </form>
  
</div>

  
.search-bar input {
  
  width: 80%;
  
  padding: 5px;
  
}
  
.search-bar button {
  
  padding: 5px 10px;
  
  cursor: pointer;
  
}