Hiển thị các bài đăng có nhãn Làm hấp dẫn bài đăng phổ biến trên blog. Hiển thị tất cả bài đăng
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/AVvXsEiCy_H9RlkxS_V_SXRoWOJLR9QVaETb7__rL3d-K6FdTHCC9XnLcnkabdPhkta8ZAFgK431PAm5KTHWv6DJ17qIZ8_MxKA9GOCFAb0st7ioJxmUOXdramsh6N5RsesenfszARR9ITr1i6o/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/AVvXsEiCy_H9RlkxS_V_SXRoWOJLR9QVaETb7__rL3d-K6FdTHCC9XnLcnkabdPhkta8ZAFgK431PAm5KTHWv6DJ17qIZ8_MxKA9GOCFAb0st7ioJxmUOXdramsh6N5RsesenfszARR9ITr1i6o/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é!
Top Stories
Info Nggladrah
Total Pageviews
Affiliates
Sport Video
Thời tiết và tỉ giá
QC
Footer Widget 1
Template information
Iklan
Test Footer 2
Được tạo bởi Blogger.
Search
Xem nhiều nhất
-
Chào các bạn ! Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chu...
-
Chiếc du thuyền đặc biệt đóng tại Hà Lan, mang tên "Thần Vệ nữ", hạ thủy sau một năm kể từ ngày mất của Steve Jobs đã trở thành bá...
-
Giải thưởng Crunchies 2012 được tổ chức tại Davies Symphony Hall ở San Francisco vừa kết thúc, và giải CEO xuất sắc của năm đã được trao cho...
-
Bạn có biết trung bình trên 89% lượng truy cập của một website đều đến từ Google? Mỗi ngày có hàng triệu người dùng lướt web sử dụng google ...
-
Hôm nay mình giới thiệu các bạn một tiên ích khá đẹp mắt cho Blogspot! Tiện ích giúp người đọc dễ dàng di chuyển đến các mục mà không cần ph...
-
Microsoft office là trình daanhs văn bản dành cho văn phòng rất phổ biến. Các bản cập nhật mới như: phiên bản office 2007, 2010, 2013 giúp n...
-
Để blog của bạn trở nên sinh động và dễ dàng giới thiệu những bài viết hay đến cho nhiều người thì tin liên quan là thứ không thể thiếu cho ...
-
Thực sự mình cũng là 1 sinh viên mới ra trường không lâu. Đọc được bài viết này mình cảm nhận được những khó khăn hiện tại và trong thời gia...
-
Bài viết này s cùng chia sẻ đến các bạn blogger thủ thuật tạo "Bài viết liên quan - Related posts" dựa trên nhiều label và đã sửa ...
-
Theo yêu cầu của bạn World APK mình sẽ hướng dẫn bạn cách làm khung liên kết blog, giống blog của mình đang dùng.Thủ thuật này cũng đơ...

