Top ten 5 popular posts widget for blogger 2021

 Hi friends today i am Going to Give the top 5 blogger popular widget that will help you to make your site more stylish and professional so lets Gets it start

BEST 5 BLOGGER POPULAR POST WIDGETS STYLES

STYLE NO 1

style code

.sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child{max-height: 100%;width: 100%;opacity: 0.5;} .sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;} .sidebar .PopularPosts ul li {float: left;position: relative;width: 49%;overflow:hidden;padding: 0px !important;max-height: 120px;opacity: 0.4; box-sizing: border-box;margin-bottom: 2%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {height: 100%;width: 100%;object-fit: cover;box-sizing: border-box;padding:0;} .sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {opacity: 1;visibility: visible;} .sidebar .PopularPosts .item-title a {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);color: #fff;position: absolute;text-align: center;text-decoration: none;font: 13px 'Oswald', sans-serif; right: 0;left: 0;bottom: 0%;padding: 100px 10px 10px;visibility: hidden;opacity: 0;} .sidebar .PopularPosts .item-snippet {display: none;}

This is a matrix style mainstream post gadget for blogger. It is produced by helplogger. This gadget has a great picture drift impact. This gadget is very attractive to draw in more guests. The title of your posts will be noticeable if perusers float their mouse over the picture.
The bit will be covered up for this well known post gadget, so the best alternative is to uncheck the bit check box while designing the gadget.

style no 2

 style Code

.widget .widget-item-control a img {background: none;height: 20px !important;width: 20px !important;border: none;padding: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;-ie-box-shadow: none;} .sidebar .PopularPosts .widget-content ul li {overflow: hidden !important;height: 73px !important;list-style-type: none !important;list-style: none;padding: 0px 0px 0px;} .sidebar .popular-posts ul {list-style-type: none !important;padding-left:0px !important;} .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li:before {float: right;display: inline-block;position: relative;list-style-type: none;color: #000;background: rgba(247, 247, 247, 1);box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);counter-increment: popcount;content: counter(popcount,decimal);font-size: 15px;font-weight: normal;line-height: 20px;right: 1px;top: 0px;z-index: 999999999999;padding: 0px 6px 1px 5px;border: solid #B5B5B5;border-width: 0px 1px 1px 1px;border-radius: 0px 0px 7px 7px;} .sidebar .PopularPosts .item-thumbnail {float: left;margin: 0px!important;} .sidebar .PopularPosts img {overflow: hidden !important;height: 72px;width: 72px;margin-right: 0px;padding-right: 0px !important;} .sidebar .PopularPosts .item-title a:hover {background: #f6f6f6;color: #000;} .sidebar .PopularPosts .item-title a {display: block;text-decoration: none;font-family: "Oswald",sans-serif;font-weight: normal;font-size: 14px;padding: 10px 30px 0px 78px;background: #EAEAEA;height: 62px;color: #6E6E6E;border-bottom: 1px solid #cccccc;line-height: normal;transition: all .4s ease-in-out;}

This is another delightful, well known post gadget for your blogger blog. This gadget is structured by twistblogger. You can demonstrate the little scrap and a picture thumbnail through this gadget. This plan likewise incorporates a smooth float impact which makes this gadget increasingly compelling.

Style no 3

  Style code

.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}

This famous post gadget is truly not quite the same as other on the grounds that this one is two section based gadget. This gadget will list mainstream post of your blog with thumbnail and title over it. Post including is accessible in this format. That implies the most visited post will get rank 1 and proceed with thusly. Thumbnails will demonstrate Zoom as a result for mouse drift as well.

Design: For top notch picture execution you should include this piece directly before the end "</body>" tag of your blogger layout. Basically go to the Template > Edit HTML and locate the end </body> tag. Glue the JavaScript code directly over the body tag.

Code :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var boi = 150; $('#PopularPosts1').find('img').each(function(n, image){ var picture = $(image); image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + boi)}); image.attr('width',boi); image.attr('height',boi); }); });/]]></script>

You can evacuate the featured jquery line if your format has effectively contained this generally no alteration is expected to this code.

Style no 4

Style code

.sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;} .sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: "Oswald",sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;} .sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: "Oswald",sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}

This is another excellent, prevalent post gadget plan for blogger. This gadget will demonstrate pictures of your well known post and title will be noticeable over pictures. Zoom as a result is accessible on mouse float. This gadget will orchestrate the majority of your blog's prevalent post and give rank by putting numbers on each post.

Style no 5

style code

.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-GyQBQfoNP-mc3tXO-E25WHz4eqXxyWB5BEGj7bX7iQd0vggwP0SwdQp5bXgaH9xadLfSacKJ5SClaZsTAoDYRaOjXLeRrxElXkqV1slgBNWPXnmmcAGHKjLATq2mdTnDdZS85MYsw0v6/s1600/bo-pp-arrow.gif)  no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;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 {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

This well known post gadget is basic and clean. The structure of this gadget compel pictures to wind up round shape. You can utilize this gadget with a piece or without a scrap. In the event that you would prefer not to make your blog untidy or in the event that your blog as of now contains numerous gadgets in the sidebar, at that point you will end up OK with this straightforward gadget.

How to install custom style for blogger popular widget

Have you pick any style from the above rundown? I surmise yes. So now the inquiry is the means by which to include this CSS code into the blogger layout. This technique is exceptionally simple. Simply pursue these means: 

Note: Before altering, you should know how to reinforcement blogger layout and reestablish it? 

1. Go to the "Layout" segment and snap on the "Edit HTML" catch on your blogger blog. 

2. Presently search the code "<b:skin>." Expand it on the off chance that it isn't as of now extended. Presently go as far as possible of the CSS segment and find "]]></b:skin>" 

3. Glue your picked CSS code directly over the "]]></b:skin>". 

4. Snap on the "Spare Template" catch. In the case of all is well, at that point you are finished.