QuangVietMkt - Blog Chia sẻ thủ thuật Online

Tùy biến bài đăng phổ biến cho Blog

Thủ thuật này sẽ thay đổi một chút về giao diện của tiện ích Popular post . Tuy rất đơn giản nhưng cũng khá bắt mắt cho người đọc
 Ảnh minh họa:


Các bước thực hiện:1. Đăng nhập Blogger
2. Chọn bố cục-->Thêm tiện ích HTML/ Javascript và dán code bên dưới vào :


<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #PopularPosts1 li .item-title { color:#A5A9AB; font-size:1em; margin-bottom:0.5em; } #PopularPosts1 li .item-title a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #PopularPosts1 li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } #PopularPosts1 li .item-snippet { overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } #PopularPosts1 .item-snippet a, #PopularPosts1 .item-snippet a:visited { color:#3E4548; text-decoration: none; } #PopularPosts1 .spyWrapper { height: 100%; overflow: hidden; position: relative; } #PopularPosts1 { -webkit-border-radius: 5px; -moz-border-radius: 5px; } .tags span, .tags a { -webkit-border-radius: 8px; -moz-border-radius: 8px; } a img { border: 0; } --> </style>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').simpleSpy(); }); </script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
3.Đặt tiện ích vừa tạo lên trên "Popular posts"
minh họa :


Explanation of Popular Post with Animation


4. Lưu lại và xem kết quả

Bài viết liên quan

4 nhận xét | Viết lời bình

Tuy đơn giản nhưng khá hay!

Mình cũng vừa áp dụng ! Cám ơn admin nhé

mình vừa tạo xong, khá hay. nhưng sao ko hiển thị được ảnh và nhấp vào thì không đi tới bài viết được vậy bạn?

bạn xem lại trong template nhé! template down trên mạng thì nhiều khi sẽ bị lỗi vì không cungf1 hiện dc 2 size

Back To Top