[Blogspot] Popular Posts hiệu ứng hover cực đẹp cho blogspot

Trước đây khi có ghé thăm một blog nước ngoài có tình cờ thấy được mẫu Popular Posts (bài đăng phổ biến) này khá đẹp. Đẹp vì khi bạn rê chuột vào ảnh thì nó sẽ ngày càng rõ nét và nổi lên trong rất bắt mắt. Vì thế mà mình đã view source ra đoạn code đó, đem về đây chia sẻ cho các bạn.

Popular Posts hiệu ứng hover cực đẹp cho blogspot

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Bố cục - Thêm và tùy chỉnh cấu hình widget Popular Posts như sau:

Bước 3: Chủ đề - Chỉnh sửa HTML - Dán Css dưới đây trước thẻ ]]></b:skin>

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(7) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(8) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(9) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(10) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover,.PopularPosts ul li:nth-child(7) .item-title:hover,.PopularPosts ul li:nth-child(8) .item-title:hover,.PopularPosts ul li:nth-child(9) .item-title:hover,.PopularPosts ul li:nth-child(10) .item-title:hover{background:rgba(0,0,0,0.2);}

Bước 4: Tiếp tục dán đoạn resize lại thumbnail trước thẻ </body>

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Bước 5: Lưu template lại.
Kết luận: Mẫu Popular Posts (bài viết phổ biến) này theo mình khá là ưng ý, đặc biệt rất hợp cho các blog chuyên về ảnh.
Ngoài ra, các bạn có thể tham khảo thêm các mẫu Popular Posts khác mà mình đã post trước đây Tại Đây.

Chúc các bạn thành công :)

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!