Customizing the Popular Posts Widget in Blogger

By Savoir_style @Savoir_Style

You can enlarge the popular posts thumbnail using this code. Remember to always backup your template before making any changes. Here's how to do it. First, you need to have the popular posts widget by Blogger added to your blog. For this you need to go to your Dashboard Layout Add a Gadget (on the sidebar) Popular Posts

Next step is to go to Dashboard → Template → Edit HTML. Search for /b:skin.

{Right above /b:skin, Paste the code given below}

.PopularPosts .item-thumbnail { clip:auto; 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; }

You can change the highlighted height depending on your blog's design. Click on Save Template after pasting the code.
Have a Wonderful Wednesday.