Popular Post Widget For Blogger With Thumbnails | Free Code

Popular Post Widget For Blogger With Thumbnails to make your blog popular post attractive or horizontal popular posts widget for a blogger or featured post slider widget for blogger or CSS widget blogger or sidebar widget for blogger.

There are lots of things you should do to engage your visitors so that the bounce rate would reduce and page views increase 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 the popular post widgets.

Customize Popular Posts Widget For Blogger With Thumbnails
Popular Post Widget For Blogger

I will provide you step by step procedures and methods for how to add a Popular Post Widget For Blogger With Thumbnails and how to customize the default popular post widget in a blogger blog.

How To Add Popular Post Widget For Blogger

  • Step 1: Log in to Blogger Dashboard.
  • Step 2: Go To Layout
  • Step 3: Click on Add a Gadget.
  • Step 4: Choose the Popular Post gadget from the list and Click on Save button.
  • Step 5: Save the Layout arrangement.

Now you are done.

Read: How to Add Related Post Blogger Script With Thumbnail

How to Customize Default Popular Post Widget with CSS 

  • Step 1: Go to Theme → Edit HTML
  • Step 2: Click anywhere inside the 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 it just above </b:skin>
.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
}

Read: How to Add Read More in Blogger Using Jump Break

.popular-posts ul{
	padding-left:0px;
}
 .popular-posts ul li {
	background: #FFF url(https://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 with everything, Popular Post Widget For Blogger With Thumbnails.

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