Với mẫu bài viết liên quan dạng hiệu ứng thu nhỏ này giúp giao diện blog không bị chiếm quá nhiều dành cho phần bài viết liên quan.
Demo Blog: Ảnh bìa cho Facebook
- Hướng dẫn thủ thuật:
1. Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F)Tìm tới ]]> và dán code dưới đây ngay trên nó
ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdmII4mToSfhWFYAiHarriIOFOapgHREDAuAjICG1YWQitJ57L53tIzkj1JxkcpFUO2BKI4JQGg26F4V-BTwFA7igbEQSoZ490xUZ3kjePj51ULuXQC90ZUO9bUCTQPcoeTaj6qOj9tfY/s1600/transparant-itviet360-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
3. Tìm đến 1 trong 4 tag sau:
Tag 1:
No comments:
Post a Comment