ProLavish | Blogger GuruProLavish

A blog provide Blogging Ethics

Top 2 popular post widget for blog

Welcome readers in our previous post we shared how to hack whatsapp message of friend.Our next post is based on popular widgwts .All of you are aware of popular posts .But today we discuss about some mordern widgets.So lets start. Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.
Top 2 popular post widget for blog


Welcome readers in our previous post we shared how to hack whatsapp message of friend.Our next post is based on popular widgwts .All of you are aware of popular posts .But today we discuss about some mordern widgets.So lets start. Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.

Steps to add in blogger-




1) Go to Here.
2) Access the Layout menu,
3) Click "Add Widget"
4)  Choose "Popular Posts".











1- Box within a box

Top 2 popular post widget for blog

CSS code:





<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style> 


Have Questions?

If you need help with respect to any concept do post your comment below. 

Gaurav dudeja

Gaurav Dudeja has 3 years of blogger experience.He wasthe only owner of prolavish .He does internet blogging and sharingblogging ethics,widgets,quality tips based on blogging.Having More than 50 followersand 250 people subscribed his blog Join me . Prolavish receives 1 thousand Pageviews/month and has over 32K subscribers

You can find us on