Popular post với thumbail và bo tròn viền

Hôm nay, mình sẽ giới thiệu mẫu popular post được bo tròn các góc, ngoài ra ảnh được bo tròn lại được kết hợp hiệu ứng hover và xoay ảnh khi dê chuột.

DEMO

#Thêm tiện ích Popular post

1. Đăng nhập Blogger

2. > Bố cục > Mẫu > Thêm tiện ích > Bài đăng phổ biến (popular post)

3. > Save

#Thêm CSS

1. > Mẫu > Chỉnh sửa HTML

2. > Tìm thẻ ]]></b:skin>

3. > Dán code dưới vào trên thẻ vừa tìm

 /*--- BeH Popular Posts Widget Customized--- */
    
.popular-posts .item-thumbnail img:hover {
   opacity: 1;

   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

.popular-posts .item-thumbnail img {
  
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 5px solid #eee;

    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 }

.popular-posts ul li {
margin: 12px;
    opacity: 0.8;
    border: 5px solid #eee;
 border-radius: 100px 100px 100px 100px;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    /*Reflection*/

}
.popular-posts a{
font-size: 13px solid;

}

4. > Save

bloggingehow