Tin mới

Advertisement

Binance

26 tháng 5, 2013

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

InstaFxCopy

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ả

4 nhận xét:

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

    Trả lờiXóa
  2. Mình cũng vừa áp dụng ! Cám ơn admin nhé

    Trả lờiXóa
  3. 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?

    Trả lờiXóa
  4. 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

    Trả lờiXóa