Bài viết liên quan cho blogger là 1 tiện ích không thể thiếu trong mỗi Blog. Nó giúp lượt View Blog của bạn tăng lên và hiệu quả giữ chân độc giả trên blog của bạn.
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:
Comments[ 0 ]
Post a Comment