Fashion Magazine

Customizing the Popular Posts Widget in Blogger

By Savoir_style @Savoir_Style

Customizing the Popular Posts Widget in Blogger

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

Customizing the Popular Posts Widget in Blogger

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

Customizing the Popular Posts Widget in Blogger

{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.

Back to Featured Articles on Logo Paperblog

Magazines