Skip to main content

Customize Popular Posts Widget For Blogger With Thumbnails

Learn how to Customize Popular Posts Widget For Blogger With Thumbnails to make your blog popular post attractive or stylish popular post widget for blogger or blogger popular posts html code or beautiful popular post widget for blogger or horizontal popular posts widget for blogger or featured post slider widget for blogger or blog archive widget for blogger or featured posts widget blogger or how to show popular posts in blogger or blogger popular posts html code or beautiful popular post widget for blogger or horizontal popular posts widget for blogger or how to show popular posts in blogger or featured post slider widget for blogger or css widget blogger or sidebar widget for blogger or blogger popular posts widget thumbnails

Popular Posts Widget For Blogger With Thumbnails


There are lots of things you should do to engage your visitors so that bounce rate would reduce and page views increases to your blogger blog.

Blogger provides us to add a Gadget to display a list of the most Popular Posts from your Blogger blog.

However, this default widget does not look professional and eye-catching to attract your blog readers. With the help of CSS codes, we can change the default style of popular posts widget.

I will provide you step by step procedure and method for how to add a popular post widget in blogger templates and how to customize default popular post widget in blogger blog.

How To Add Popular Post Widget In Blogger Blog

Step 1: Login to Blogger Dashboard.

Step 2: Go To Layout

Step 3: Click on Add a Gadget.

Step 4: Choose Popular Post gadget from the list and Click on Save button.

Step 5: Save Layout arrangement.

Now you are done.

How to Customize Default Popular Post Widget with CSS 

Step 1: Go to Theme → Edit HTML

Step 2: Click anywhere inside code area

Step 3: Press CTRL+F, A search box will be appear

Step 4: Search </b:skin>

Step 5: Copy below CSS code and Paste just above </b:skin>

Popular Posts CSS Style 1: 

.PopularPosts h2{background:#2a3542 !important}
.PopularPosts h2:before{content:" \f087" ; font-family:FontAwesome; font-size:22px; background:rgba(0,0,0,0.2); padding:10px 12px; margin:0 10px 0 0; border-radius:4px 0 0}
.PopularPosts ul{list-style-type:none; padding:5px}
.PopularPosts{color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0;}
.PopularPosts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.PopularPosts a{color:#fff}
.PopularPosts a:hover{color:#fff} .PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} .PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
.PopularPosts ul li{padding:3px 20px; border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}

Popular Posts CSS Style 2:

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Step 6: Save your Template.

Now you are done everything,.

I hope you find this post is useful to you so don't forget to share this post with your social network.

Comments

  1. You share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
    Visit my blog here

    ReplyDelete
  2. Your File 100% Working... Brother.. Thanks For Uploading....

    Please Visit Our Website, Mobile flashing Tools, Cracked Box, Frp Remover Tool, Country Unlock Tools, iPhone Unlock tools, Any Flash File Without Password, Etc File Tool Free Download BY www.MobileflasherBD.com

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Fix Error 0xc004d307 to Maximize Allowed re-arms

Learn how to fix Error 0xc004d307 or a maximum number of rearms exceeded windows 7 fix or the maximum number of rearms has been exceeded windows 7 fix or SLRMGR rearm not working after restart.




Error 0xc004d307: The maximum allowed number of re-arms has been exceeded.
While converting your not genuine windows to genuine, you may get an Error message like this Error 0xc004d307. You get this error because you have used the command for more than three times. You can use SLMGR - REARM only three times. To avoid this error, you have to reinstall OS (Operating System). Even without reinstalling OS you can solve this problem. Just follow the procedure.

Learn Programming:Find the Grade of a Student Using Switch Case in C Language

After using command SLMGR -REARM for three times, “SkipRearm” registry key will become “0”.You need to change the “SkipRearm” registry key to “1”.

You can find “SkipRearm” by going to the following location from “Registry editor”.

Path:- HKEY_LOCAL_MACHINE/SOFTWARE/Mi…

5 Best SEO Friendly and Fast Loading Blogger Templates

Today, I have made a list of top 5 free blogger templates which are Highly SEO Optimized, Fast loading, Adsense ready, responsive and mobile-friendly or SEO friendly fast loading blogger template or fastest loading blogger template or fast loading responsive blogger template or fast blogger template or supreme v2 blogger template or free blogger template fast loading or free blogger templates for Adsense or best SEO optimized blogger template or SEO hub blogger template or smart SEO blogger template or SEO hub fast loading blogger template



Blogger Is One Of The Top And bests Free Blogging Platform. After creating a blog on Blogger.com.

The next question is which template to choose?

No need to worry, I have selected 5 best SEO friendly, Adsense friendly, Fast loading, Free blogger template. so you can select one of the best templates for your blog from here.

These templates have special features which will help you to improve search rankings in Google.

Free Responsive and SEO Optimized…

10 Best PPD Pay Per Download Sites With or Without Survey

In this post, I have listed top 9 best rated and reliable PPD sites ( pay per download sites ) with or without a survey to earn money online or best ppd sites for india or pay per download affiliate or pay per download india or pay per download app or upload and earn per download or pay per download android or upload ocean or uploadocean review or pay per download app or pay per download without survey or best pay per download sites or upload and earn per download or pay per download india or best ppd sites for india or best ppd sites without survey 2017 or earn money by downloading songs




One can earn money easily by uploading files on PPD websites, be sharing links to social sites, their blogs and get paid whenever someone downloads that file. It is an easy way to earn money online from home by using Top PPD Networks.

As you may know, there are lots of PPD websites on the web, most of them promise high pay per download, unfortunately only a very few of them actually fulfill their pr…