BOB SHARE

1. Only the title of the post.
2. Post with thumbnail and title.
3. Post with Summary and Title.
4. Post with thumbnail and post snippet.

Popular post widget also attract visitors to get most popular post in your blog which means your blog get higher income and increase number of page views. We provide you step by step guide to how to add custom popular post widget in blogger. Let’s Start:

How To Add Custom Popular Post Widget In Blogger

Part 1: Add Popular Post widget in blogger

Step 1

Login into blogger account. Go to Blogger dashboard and click on Layout tab and click on Add a Gadget link as shown in below picture.

Step 2

When you click on Add a Gadget link a popup window will open with all gadgets list. Select popular widget from gadgets list as shown in below picture.

Step 3

Now Customize popular post widget as your requirement as shown in below picture.

Step 4

Part 2: Change Popular Post Widget Style

Step 1

Now go to Template and click on Edit HTML button as shown in below picture.

Step 2

Step 3

Style 1

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dcdcdc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { background:#FF8040; } .popular-posts ul li a { text-decoration:none; font:14px Georgia, verdana; color:#222222; } .popular-posts ul li a:hover { text-decoration:none; color:#fff; }

Style 2

#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; /* Color of the widgets title */text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #8E8E8E; /* background color of the numbers */height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: ;left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #8E8E8E; /* background color of the right arrow*/}#PopularPosts1 ul li a{color: #444;text-decoration: none;   font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #ddd;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}   #PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}

Style 3

Style 4

 #PopularPosts1 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic;
}#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}

Style 5

.popular-posts ul { padding-left:0px; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border: 1px solid #dcdcdc; } .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border-bottom:1px dashed #dcdcdc; background:#ffffff; } .popular-posts ul li a { text-decoration:none; font:16px georgia,verdana; color:#3d87c4; } .popular-posts ul li a:hover { text-decoration:none; color:#333333; }

Step 4