Tuesday, July 12, 2016

Display Popular Posts in Grid Layout Format

Here is a simple way of creating beautiful and colorful Popular Posts Widgets for your Blog using CSS. First you have to login into blogger account, then select template>Edit HTML  now search ]]></b:skin> to your blog HTML and CSS code, after that Paste below code just above this tag and Save the Template.

Codes


.PopularPosts .item-title {   
  display:none;   
  }   
  .PopularPosts .widget-content ul li {   
  background: none repeat scroll 0 0 transparent;   
  float: right;   
  list-style: none outside none;   
  margin: 10px 0 0 !important;   
  padding: 0 !important;   
  }   
  .PopularPosts .item-thumbnail {   
  margin: 0 8px !important;   
  }   
  #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}   
  .item-thumbnail img {   
  -moz-border-radius: 8px;   
  -webkit-border-radius: 8px;   
  border-radius: 8px;   
  -webkit-transition: all 0.5s ease;   
  -moz-transition: all 0.5s ease;   
  transition: all 0.5s ease;   
  border: 3px solid #ccc;   
  height: 60px;   
  padding: 3px;   
  width: 60px;   
  }   

And Your done:

0 comments:

Post a Comment