humghn.com
Càng ngày lại có thêm càng nhiều mẫu label " Bài đăng mới nhất " đẹp và hiện đại để phục vụ các ... thượng đế . Ngày hôm nay , chuyên mục tiếp tục gửi đến các bạn một sản phẩm mới , một giao diện mới của " Bài đăng mới nhất " . Với giao diện này , khi bạn hơ chuột qua bài viết thì sẽ xuất hiện một dòng chú thích chạy sang từ bên phải và dừng lại phía dưới chân tiêu đề bài viết và nhìn khá đẹp .
ẢNH DEMO
Cách thực hiện
Bước 1 : Đăng nhập blogspot , chọn mục " Bố Cục " sau đó chọn " Thêm Tiện Ích "
Bước 2 : Chọn tiện ích bài viết phổ biến và sửa thông số như sử thích
Bước 3 : Nhấp lưu lại và chuyển sang mục " Mẫu "
Bước 4 : Chọn mục " Chỉnh sửa HTML "
Bước 5 : Dán đoạn code dưới đây đằng trước đoạn mã ]]></b:skin>
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
Cuối cùng bạn chỉ cần tủy chỉnh lại một chút về độ cao khung , chiều dài khung , màu sắc sao cho phù hợp với blog/web của bạn sau đó lưu lại là được rồi .Chúc các bạn thành công !
