First of all, you need to add the popular posts gadget to your sidebar, which you can do by heading to your dashboard and clicking 'Layout', 'Add a Gadget', 'Popular Posts'. Make sure snippet is unchecked and decide how many posts you want displayed. At the moment, I have 5 posts as this is a good selection of posts.
Next, go to your dashboard and click on 'Template' and then 'Edit HTML'. Then, click CTRL + F, and type in the searchbar </head>. Just above this tagline add:
<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -8px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}
.PopularPosts .item-title {
clear:both;
font: 10px cantarell;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>
Now still in the template editor, type in the searchbar </body>. Again, just above it you need to add this following code:
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",240);
</script>
Click 'Preview Template' to check it is how you like it, and then click 'Save Template'.
Do you like your new popular posts widget?
Thank you so much for this tutorial! I've been wondering how to do this for ages. I will try it out tomorrow.
ReplyDeleteGlad you found this useful!
DeleteThat's awesome - I'm definitely trying it!
ReplyDelete~Lydia~ <3
Have a go!
Deletethank you so much for this tutorial <3 i've always loved the way this looks but never been able to figure it out ^_^ your design is just so cute. oh, and congrats on 101 followers!!
ReplyDeleteThank yoooouuu! And glad you enjoyed the tutorial! :)
DeleteSo pretty! Your blog is bae. <3
ReplyDeleteThank you very much! Well, your comment is ultra bae
DeleteI love the Bloomin Rouge blog! Holly is such a babe, thanks for sharing this tutorial! x
ReplyDeleteEmily // Lynde Avenue
Your welcome Emily - I'm glad I helped x
Delete