Add Animated Flying Twitter Bird Widget to Blogger

HOW TO INSTALL?

is Very Simple! just follow these steps…

1. replace "Bloggerspage" with your twitter username
2. Copy The Bellow Widget Code.
3. Go to Blogger Dashboard > Design > Edit HTML .
4. Search For </body> tag and Place Widget Code Just Before it.
5. Save your template.

<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "bloggerspage";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Way2blogging.Org' href="http://www.way2blogging.org" target='_blank'>Blogger Widgets</a></span>
<!-- Twitter Bird Widget for Blogger by Way2blogging.org -->

That’s All!

Follow me on Twitter and hope you Enjoyed 

Add Emoticons/Smileys in Blogger Comments

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together.

Now available for threaded commenting system too!

DEMO

How To Add Kolobok Smileys In Blogger Comments

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

 Step 2. Expand Widget Template (make a backup)

Step 3. Search (CTRL + F) for this tag:

 </body>

Step 4. Copy and paste just above it, this code:

• For previous commenting system (comments without reply option)

 <!--kolobok-smileys-->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>
<!--kolobok-smileys-->

• For threaded commenting system (comments with reply option)

 <script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

Note: ignore steps 5-8 if you are using threaded comments!

Step 5. Now find this code snippet:

 <b:loop values='data:post.comments' var='comment'>

Step 6. Paste the following code just above it:

 <div id='smileys'>

Step 7. Find the following code (look carefully, it should be somewhere below the code from step 5)

 </b:loop>

Step 8. Paste the following tag just after it:

 </div>

Step 9. Now find this code:

• For previous commenting system:

 <data:blogTeamBlogMessage/>

Note: if you'll find it like 4 times, stop to the 2nd one!

• For threaded commenting system:

 <div class='post-footer-line post-footer-line-3'>

Step 10. And add this code just after it:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXEKUyy2Y60Uf_0m2gHcstJ_pGd0-xbbAA8L4cBysuwXjbGkZvqGxTlWglppLiUglgbE9ZT7MIxIt3OaQV4ceoNNi2luTQ2Gi1KUkUxGJLhiTEgXnWaV2oFhmpTZrpTlbNFr0qtoxzUc/s1600/smile3.gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCIqh_Wp1uSbrIPgvkHePt81CZMUxNW20xEXdDaXwR-pAZJBwHgcXkLUDTmtUr7BNlnHcIpfonxrErkzAOrSUXybAcGlYdZuqow28huDN3JtEJFyA-dq5ouYystXwI80Ao2g6nZFoLMoM/s1600/sad.gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2u5b7yde3uYyfCPzd4_b76MOSZ4kV_9q5Xwr1J02TvGeqUrT42UWefGn5_ne7tdi-5l_OY-SSnFxrn8J39ljZnSPGr3rfUuyaojzAb_wBCF0yXpr-ZTPl-aTmzFfu1phSXAHOMos-EvA/s1600/taunt.gif'/>:))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ddXqX4GT19Zgb9c4n1Caz4h8d97nSpA-6vlZmFnXmWp0XrsNHwAZfyVaVUnxw2YUibSccpckj_-JgX1OjA8p1LlA-IMpkcRqjBzZFXa3uURVHzZrbeQ9jCx5Ct2CuggaeLVMDJtpJs4/s1600/cry2.gif'/>:((
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-V7TuEA9t05uLE-oSCbKGPVDtQSLDqVUhkv-X5B8yjJh8qKjldoX6qUXHXo2swRFlJxdo4IgXkjGj_Lo3ZDG7_45bq6_ZcqY8zM2i3kPcMdlk-WoZXVGxNbVEV4hzgC9G46mRCM-MsfA/s1600/rofl.gif'/>=))
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6uPedgjUjb6Ae_tprVMzQg6NbujNualGZabdSI-TrvlnpfDPz06BfN0h2kQ4nymLni5H6KBCVMo2dvAIJqwoeTG23b-_ep3EDvKam1KCp7M8jKax0L81VYzTjXPl-ddJXKUhto5p5M8/s1600/suicide.gif'/>=D&gt;
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfgKeVGRH7wHPasS85naQZU3Tknfiq9s57SQbdn7op7lObhd9wf1QRJVMEfDMTDkGpC6BTxJT9bwgggwYQu_pHius312r384C8LN825P7N-0dsc4tfUeDOiLfMsG4BCAkwuVoxWgjys98/s1600/biggrin.gif'/>:D
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtpfF5vRXepJLSSjS8ejXmyLTqrpTmqRaxljFiKwxw3nSIr26uUZcZEOB2oLIajeEYlk1ncy0JW0XHVi0dxWsduh3Y10Hkm5lsoOQmU_Oluog9Jc4y6Egl-rcW37i9nZG8hFwrowaI5w/s1600/tongue.gif'/>:P
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSgMduPfJqpKq2dJutD-RRTwkdUwURZtRYq5Qlm1-OnHP4n6eZqi046yLAqqow10-CSmk9Gheyra__RTLLQcgbPsVEBUPcLlxAfDLgTPbPeIUbHoHN2hsoc6sTqrRBzNHUqurdV2CfgE/s1600/shock.gif'/>:-O
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpuxMnDPpnt9As2n2hlh0tfF541aViHCP_JrCSoHHtNnJ9RIwBULcZUrJ0EeA0TD2V8IeunjK8GfOZpfGJcEpZZgm6QgdcOvA64BxxEgcO5dSPtO7pbmd5TNac-o0tBe4ZnlewGa4dFU/s1600/think.gif'/>:-?
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnnsckfzDznsDqoeRG49_dT3zW0ms1pu4sQb05XM3lV_OwBpL_YUBSnFAobhgFIh1cends5_9MiAV5QyRHaP36Za6fxjOP9ZQa9b_Ku6pZCmDahvwkH7R_tI2xNs0UNfg_iS0f11wVH8/s1600/unsure.gif'/>:-SS
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9rVMWTF2u5tS4E3UM7hXGqU8kDq1dY0aIsdZPULFFjrvheCQyNFJ6H0sQNak0La7XNveg_hdzTbiPCOtL-yWNemooKSErnRor5jkTtqxYGIJJLwNnnBU1xrH0hoeILYQ6Lg1hrSzV0hc/s1600/flowers1.gif'/>:-f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXYscrlqEJC6ung4AK8AtbpJI3fF4M4fQ531Uo7rdXMtvwH9vRGBWu-7ilEaV-oPjOREcCPax1mWHql8JwWYziB__Xsdlkvj0APtjYpqS8FyDZ_QuGdw3U6TwCWd1VNpbUFs2mbMOB8E/s1600/doh.gif'/>d(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPnkAwRAWfMAAdf9H1vxJuau9524SrrZ-X2usmPmegif_YP-PCy6MCVo-iA-S2k8BaFjFkzIAPzfhDLRp2IqmJJhpYZkk3Wl7pKPirUG2bPkd9wkIeL2zrTZrupLUGXH89BprAEj6wfk/s1600/air_kiss.gif'/>:-*
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcIq9R6dXcmXlBy2DK_BEMGw-IVAXc-HpAuQz-nXqcPq4FR1ZjvLQyHiYuoONobFYzVqS5zMZurYC-2OooHwxerv5XGs7ayJ889YSYMb9FRg-eMg-vkyXlI-uoeFivBInXgndOgxqq-k/s1600/threaten.gif'/>b-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNbomHw8feSvditkEEsuOA8jS2I6kFgbHJzYnNhtdRGxXz2SJ2kXvDUGMaCFKY0jgxoIKxbDqkqR7KZaZP4H1YNmEx735x2lZccnuWck_z3bwfAEaGN1K1QXYVkQkeeyNtQ-_3NQjm_s/s1600/help.gif'/>h-(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6oPoW0gXCGsyo7OYrk99odpkkrI20cGInuQIdo7OmiC854kgSD1emYcwjbXe-5AneiM6kNEa2JtDT90kuksj29o-K9vg4u-K9cgYDCF2vYJnF8aY3RjSiwsn4vMaZ1J4DZ0fDcxcYpR8/s1600/good.gif'/>g-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdKSpPfYBOy2ifN8iLDvgh84uyurh8CVlGkiPCWv263FcM8XmiyM73qFdvfstpqhxpcNl4RDUUPsp7E_jdWs5jFpc_MTMqF02H8MiFG3hkMLi6OY3Io9iXDQokmjhD7Z2lzUUtK_yv-GI/s1600/beee.gif'/>5-p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5D5xSX1e87uhOmNNi6wX1_FEGh19zyndxauSCsPpbs_hCn3vU59MlBNaAcDaJuhjHBtJ_NIDW7ZUPz0Ubm-iT8N88EzzR6UnxSymq7QTVj2qs_y_9IvGP68dzXS444e9KVkyVkM1SQM/s1600/yahoo.gif'/>y-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNxfjFKi0yNv4llx-sDPWSH4ygwAxgclmXbtFIPP8go9sYK8D2uaWY6ToZqgfWfYrQg7zQo5SIapm4Y4oMD8A80bfDgji5a6jdEOpa9i6jOoUDQYFn_5XTfdIIXSRFERCaEfNTmvPhic/s1600/crazy.gif'/>c-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBIB-QTx05JVOu5f4PQekxW5tnS9tGomePHtH0kpfKXWUiOT8uqN06D8ttlxpj1fpwT-MZ0A6dVSBuXfCUGIOTrdtTRkqjKC3Uk9igt3yobM_iG04uoE4Vu-SEL1phmtBOPpAUiGVecKY/s1600/spiteful.gif'/>s-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGJRwPbsmtRSOzljdlo1YHI6vg-YQUjC1eIiOP49OE6ts4OIyWL03wb2b84GdBKMVZj_SQ2C4hqeWoN1etFBRV1N7U0oCMi6Sjx1uBICj-gYH6XtsTINzoD198AVoGd4xm0ExrB5v_Q8/s1600/drinks.gif'/>d-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhn4KHJVoePjUPoCqUIr9-xbNcdQyNRgNAMP3XJMtA2STFPYhZvPorxLgYSV4TlS9XAVAFQwYUA7CfOv9Mg2Fnbyn4lxcFZ59yz-OU1mukOiXSeSPuWcGKFcXaoeIs5UpiyFJ9BNSVreg/s1600/cheer.gif'/>w-)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTcbLUEm1ZCxgvKy97Okf_jBqCp1TMBsY-CVjrkvRNhas6dvLWDvu7314tYx4h1w2Qz277ayVbm2cQE-yiGSje88ue5tIT6MQtYcPbrDrrm03y5XkzRQxWJUOt-ptYWxsLeEciPkq9bA/s1600/hi+2.gif'/>:-h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRBcXkoI2UoWZO8kC56FzIQ_V51b4aywyxnoF_RTZ0-LsYzJkg42j4TZ3Jl1lPvsTIrfrL1nz4Z8K4BNO6eRTPVGASFp7bA0OVuhbD3YD2YwxZMhfXEPS8LXmqJdKymle_RDW8CKJqHQ/s1600/give_heart.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXEKUyy2Y60Uf_0m2gHcstJ_pGd0-xbbAA8L4cBysuwXjbGkZvqGxTlWglppLiUglgbE9ZT7MIxIt3OaQV4ceoNNi2luTQ2Gi1KUkUxGJLhiTEgXnWaV2oFhmpTZrpTlbNFr0qtoxzUc/s1600/smile3.gif'/></div></a></span>
</div></b:if>

Note: Ignore steps 11-12 if you are using threaded comments!

Step 11. Finally, find this code

 ]]></b:skin>

Step 12. Add this one below, just above ]]></b:skin>

 .emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Note: if you want to change the size of the emoticon container, edit the red code.

Step 13. Save the Template and you're done. Enjoy!

If you have any problem and need help, please leave a comment below.

DCM Dark

DOWNLOAD

Features:

Instructions:	How to install a Blogger template
Template author:	Urangkurai
Description:	DCM Dark is a free premium blogger template with 2 columns, responsive design, left and right sidebars, gallery-styled, minimalist, exclusive design for Blogger, social bookmarking icons, posts thumbnails, tabs, infinite scrolling and well formatted threaded comments. Excellent layout for blogs about art, business, crafts, internet, news, a diary or photography. Download DCM Dark for free in BTemplates.
Rating

Sevim

DOWNLOAD

Features:

Instructions:	Template Settings / How to install a Blogger template To edit the slider you need to changes the images and urls directly in your template code. To edit the social icons links you need to search and changes the urls directly in your template code.
Template author:	PBTemplates
Designer:	New WP Themes
Description:	Sevim is a free blogger template adapted from WordPresswith 2 columns, right sidebar, rounded corners, ads ready, slideshow, social bookmarking icons, posts thumbnails and drop down menu. Excellent layout for blogs about any general topic. Download Sevim for free in BTemplates.
Rating

Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets. 

To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin:

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML

Step 2. Select "Expand Widget Templates" (make a backup first)

Step 3. Search for the following tag:

 /* Variable definitions
   ====================

Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F):

  <b:skin><![CDATA[/* 

...and should end up with this symbol:
 

  ----------------------------------------------- */

Step 4. Copy and paste just below/after this tag, the next code:

 <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

Step 5. Search for the following piece of code:

 ]]></b:skin>

Step 6. Just above/before it, add this code:

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Step 7. Now find the following code:

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

Step 8. Delete it until you reach at this tag (delete the </b:widget> also):

 </b:widget>

Note: Be very careful when removing it. The entire fragment of code should look like this:

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Step 9. After you have deleted the above code, paste the following in its place:

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIPA15Dhg4W7Z9hZ8wbwDM2uzGRyIgBggjnmZBs-E8dfKcJT6M7EV3J5a3sqloM2VUdBA64mcr7spYKqiBGCcT-t8O84ycTj5DUUSHpq3ahM9ROY47SuKwhM23xaBmzmNUiNIpR4bQ_c/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIPA15Dhg4W7Z9hZ8wbwDM2uzGRyIgBggjnmZBs-E8dfKcJT6M7EV3J5a3sqloM2VUdBA64mcr7spYKqiBGCcT-t8O84ycTj5DUUSHpq3ahM9ROY47SuKwhM23xaBmzmNUiNIpR4bQ_c/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

Step 10. Save template.

Settings

- Go back to Layout  and click on the edit link of Popular Posts widget.

Select to "display up to 5 posts", then Save the widget.

- You can easily change the background color of the popular posts widget, going to Template >>Customize  >> Advanced >> PopularPostsBackground and there you can select any color you want.

You're done!

If you are enjoying reading this blog, please like & subscribe for more tutorials. 
For any questions or suggestions, leave a comment below.