Để tiếp tục mang đến cho các bạn thêm 1 sự lựa chọn, hôm nay Viettin24h giới thiệu thêm một thủ thuật tạo Popular post (Bài đăng phổ biến) rất đẹp mắt ! Tiện ích này theo chiều ngang và đặc biệt có hiệu ứng Slider .
More about →
Ảnh minh họa :
Bắt đầu thủ thuật :
1.Đăng nhập Blogger
2. Chọn bố cục--> Thêm tiện ích Popular post(nếu chưa có)
3.Thêm HTML/Java script và dán code bên dưới vào :
<style>
#slider ol,#slider ul,#slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:150px;
height:120px;
}
ol, ul {
list-style: none;
}
.wrapper {
width: 720px;
margin: 0 auto;
position:relative;
}
.clear {
clear: both;
}
.display-none {
display:none;
}
#slider {
position: relative;
top: -2px;
z-index: 1;
}
#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 150px;
left: -51px;
}
#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 150px;
right: -51px;
}
#slider #slider-wrapper {
width: 720px;
height: 300px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}
#slider #slider-inner {
width:9780px;
height:300px;
position:absolute;
}
#slider .article {
width: 150px;
height: 300px;
float: left;
margin-right: 30px;
}
#slider .article img {
margin-bottom: 25px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}
#slider .article h2 a {
font-size: 18px;
color: #404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}
#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
#slider .article .item-snippet {
margin-left: 15px;
}
#slider .widget-item-control { display: none}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>
4. Sắp xếp 2 tiện ích vừa tạo như bên dưới :
5. Lưu lại và xem kết quả
.
Tiện ích Bài đăng phổ biến (Popular Posts) rất quan trọng đối với blogspot, nó giúp gây sự chú ý của độc giả, giúp dễ tìm đọc những bài viết nổi bật nhất trong tuần, trong tháng hoặc toàn thời gian đồng thời tăng cường traffic cho blog của bạn.
Các bạn có thể thấy tại trang chủ của 
.jpg)
.jpg)
