HOW TO CUSTOMIZE POPULAR POSTS TO LOOK LIKE A GALLERY

The css code below turns your blog to look like a professional website.It is convenient since it makes website visitors not to have a difficult time navigating from one post to another.Further more it makes your website visitors to stay long on your website or blog thus preventing bounce rate if you are making money from your AdSense as a publisher.The code below is to be placed in css style of your website or blog save and refresh your website to see the results.Let me know in the comments section below if you are having troubles.

/***** Popular Post Widget for Blogger *****/ .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:’Oswald’,Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}