Hello friends, welcome to the Tutbig today I will show you customizing your Blogger blog, you can make it more user-friendly and eye-catching. If you customize your blog, then it will look like different and unique from others. That’s why today I will provide some best popular post widgets for the blogger with thumbnails.
There are many different ways to customize your blogger popular post widget. An eye-catching popular post widget will impress your readers. This will also increase the chance to get more clicks on your blog. Which will decrease the bounce rate of your blog and boost Alexa rank? Adding and customizing popular post is very easy. Just follow my instruction.
How To Add Popular Post Widgets For Blogger?
First of all, I will show you how to add the default popular post widget to your blogger blog and then I will show you the way to customize it.
1. Sign in to your blogger account and go to the “Layout” section.
2. Go to the sidebar section and click on the “Add a Gadget” link.
3. A popup window will appear. Choose “Popular Posts” gadget from the list. Click on the plus button to add it to your blog.
4. Now it’s time to configure the widget. From this configuration section, you will be asked to choose the most viewed posts of your blog. How many posts you want to show with or without page thumbnail and snippet. Different popular post design requires different configuration so leave it as default for now. I will show what configuration needs for every widget later. Add the popular post widget by clicking on the “Save” button.
After clicking on the save button, you will see the default popular post widget is added to your blogger blog. If you are using custom blogger templates then you will get a popular post widget design based on your template. If you like it, then you may keep it otherwise you can customize the popular post widget by picking one of the listed design provided in the below list.
Popular Post Widgets For Blogger:
Popular Post Widget Style 1
Blog Ornate generates this popular post widget. This beautiful widget is responsive. That means you don’t have to resize your widget’s width to fit with your blog’s sidebar. I have given 6 different image hover effect to this widget. Click here to get the step by step instruction to add this widget: Popular Post Widget For Blogger With 6 Hover Effect!
Popular Post Widget Style 2
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 grid-style popular post widget for blogger. It is generated by helplogger. This widget has an excellent image hover effect. This widget is very eye-catching to attract more visitors. The title of your posts will be visible if readers hover their mouse over the image. The snippet will be hidden for this popular post widget, so the best option is to uncheck the snippet checkbox while configuring the widget.
Popular Post Widget Style 3
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 beautiful, popular post widget for your blogger blog. This widget is designed by twistblogger. You can show the small snippet and an image thumbnail through this widget. This design also includes a smooth hover effect which makes this widget more effective.
Configuration :
Go to the “Template” section and click on the “Edit Template” button.Find “</head>” section and paste this code right before it.
Code :
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
I hope you enjoy this post and the photos. Stylish Popular Post Widget for Blogger
