Ever wanted a really elegant and beautiful popular posts widget for your
blogger blog? If yes, then you have landed on the right place. Today I
am back with yet another unique and amazingly looking popular posts
widget customization.
I had my exams which ended just a couple of days before so I was
thinking of something substantial to post. A image of this came to my
mind and its here for all of you to use.
So the widget I am going to add today looks quite different from the
rest of the collection. You can see the demo of the customized Popular
posts widget by clicking the button below.
Once you have seen the demo, to add the Popular posts customized widget follow the given steps.
Adding the Popular Posts Widget
Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.
Adding the CSS
Now we have to add the CSS of the Popular Posts customized widget, for
this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search
for
]]></b:skin> in search box. After getting the code add the below given code just above
]]></b:skin>
/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail {
display: block;
height: 190px;
margin: 0;
overflow: hidden;
position: relative;
width: 100%;
}
.PopularPosts .item-title {
position: relative;
}
.PopularPosts img {
display: block;
height: auto;
position: absolute;
width:auto;
transition: all 1s ease 0s;
}
.item-title a {
background:rgba(0, 0, 0, 0.35);
color: #FFFFFF;
font-family: Impact;
font-size: 17px;
font-weight: 100;
padding: 10px 0;
position: absolute;
right: 0;
text-align: center;
top: 30px;
width: 100%;
}
.item-snippet {
background:rgba(0, 0, 0, 0.35);
color: #FFFFFF;
font-weight: 900;
left: 12%;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 70%;
}
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content {
position: relative;
}
Also note that you have removed all the previous Popular Posts CSS codes
(if any) before adding this one or the result will be the combination
of the two.
Adding the JS
Usually Popular posts widget do not require any JavaScript, but this one
needs in order to resize the popular posts image and cut short the
snippet.
To add the JS, search for
</body> and paste the below given code just above it.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts
img').attr('src', function(i, src) {return
src.replace( 's72-c', 's400' );});});
</script>
<script type='text/javascript'>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.com
// Trim Code by MS-potilas 2012
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
After adding the code save the template. PS. Remove the code in
red if you already have it in your template.
You are done now. Now you and your visitors can see this elegant Popular
posts widget on your blogger blog. Also it is my earnest request to you
that please do not remove the comments added in the codes. They will
not be displayed in your blog. Only the person viewing the code can see
this.
