Làm hấp dẫn bài đăng phổ biến trên blog

Thứ Năm, 21 tháng 3, 2013

Popular Posts dạng Slides trượt dọc


Thủ thuật tuyệt vời này sẽ biến đổi widget bài viết phổ biến (popular post) cung cấp bởi blogger thành thanh trượt dọc với nội dung cập nhật tự động. Tiện ích được tạo bởi Abu-Farhan sau đó được cải thiện bởi mybloggertricks. Widget rất dễ dàng cài đặt  trên blogger. Bạn chỉ cần dán mã của hiệu ứng bên trong một widget HTML/Javascript. Tiện ích mới này hoạt động trên tất cả các trình duyệt phổ hiến hiện nay và có thể dễ dàng tùy chỉnh. Tôi đã chỉnh sửa đôi chút so với mã gốc để màu sắc đẹp hơn. Widget sẽ không có hình ảnh thu nhỏ xuất hiện nếu bạn chưa thêm bất kỳ hình ảnh trong bài viết của bạn.

Đây cũng là cách thu hút khách truy cập trên blog tạo cho khách truy cập có cảm giác thân thiện và muốn ghé thăm.

1. Đăng nhập vào Blog
2.Vào mẫu
3.Chọn thêm tiện ích HTML/Javarscip và dán code bên dưới vào:

<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8MidnzLeXJ6HJnVcBSxBfrHnDVuTkh2mjLHeM2ZXnRPNKP5BPywtRz3iLcyhduldTImV_SkYDxsm0r4ZXC82DKwV-3h_cYS111SlrYzCIYXbucb_cvODGcBNMmIf6noep02FPAakg9s/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
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>
4. Lưu lại tiện ích
5. Di chuyển tiện ích HTML/Javarscip này lên trên tiện ích " Bài đăng phổ biên" ( chọn 4 bài đăng hiện thị)
6. Tùy chỉnh giao diện hiển thị của tiện ích :
  • height:310px; là chiều cao của box bài viết.
  • width:310px là chiều rộng của khung tiện ích.
  • Để thay đổi độ rộng của đoạn văn bản bạn thay đổi width:290px;. Lưu ý phần này nhỏ hơn độ rộng của khung tiện ích bên trên 20px. Trong ví dụ này chiều rộng của khung là310px và chiều rộng văn bản này là 290px.
  • Để thay đổi màu sắc tiêu đề, màu sắc liên kết và kích cỡ chũ bạn lần lượt chỉnh sửa color:#7CA2C4; font:bold 12px verdana; .
  • Để thay đổi màu đường viền và chỉnh sửa kích thước ảnh thumbnail bạn lần lượt chỉnh sửa: border:2px solid #7CA2C4
  • Để thay đổi kích thước font chữ, và màu sắc của đoạn văn bản mô tả lần lượt chỉnh sửa code màu hồng.
  • Nếu màu nền blog của bạn là màu đen hoặc màu tối thì hãy thay thế mã:
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8MidnzLeXJ6HJnVcBSxBfrHnDVuTkh2mjLHeM2ZXnRPNKP5BPywtRz3iLcyhduldTImV_SkYDxsm0r4ZXC82DKwV-3h_cYS111SlrYzCIYXbucb_cvODGcBNMmIf6noep02FPAakg9s/s400/popular+posts.jpg) repeat-x;
    Thành mã sau: 
    background:#fff;
    Thay thế #fff thành màu nền của bạn. 
 Có vấn đề gì thấc mắc hãy để lại comment các bạn nhé!

Tags: ,

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn