13 Apr 2015

Popular Posts Widget For Blogger With Thumbnails: Royal Style

On In , Post a Comment!
popular posts widget with thumbnails

Here is a new set of CSS commands for styling Blogger's Popular Posts widget. In order to add the Popular Posts widget, go to your Blog's Dashboard and navigate to Layout. Click Add a Gadget and select Popular Posts. Un-tick 'Snippets' and select the number of posts you want to display from the drop down list. After saving the gadget, go back to your Blog's Dashboard and navigate to Template --> Customise --> Advanced --> Add CSS. Copy-paste the below code and click Apply to Blog. That's all!
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.PopularPosts {margin: 0!important; padding: 0!important; border: none!important;}

.PopularPosts ul {margin: 0!important; padding: 8px; background-color: #E84167; background-image: -moz-linear-gradient(top, #ff5f85, #ca2349); background-image: -ms-linear-gradient(top, #ff5f85, #ca2349); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff5f85), to(#ca2349)); background-image: -webkit-linear-gradient(top, #ff5f85, #ca2349); background-image: -o-linear-gradient(top, #ff5f85, #ca2349); background-image: linear-gradient(top, #ff5f85, #ca2349);border: 1px solid #999;}

.PopularPosts li {background-color: #DBDACAa; background-image: -moz-linear-gradient(top, #f9f8e8, #bdbcac); background-image: -ms-linear-gradient(top, #f9f8e8, #bdbcac); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f8e8), to(#bdbcac)); background-image: -webkit-linear-gradient(top, #f9f8e8, #bdbcac); background-image: -o-linear-gradient(top, #f9f8e8, #bdbcac); border-right: 1px solid #999!important; border-left: 1px solid #999!important; border-bottom: 1px solid #999!important; padding: 8px 3px 5px 0px!important;}

.PopularPosts ul li:first-child {border-top: 1px solid #999;}
.PopularPosts ul li a {font: 13px verdana; color: #666!important; text-shadow: 0px 1px 0px #ffffff;}
.PopularPosts .item-thumbnail {margin: 0 8px -2px 6px; padding: 0;}
.PopularPosts .item-thumbnail img {height: 70px; width: 70px; padding: 0; -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5); box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

No comments: