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

Bài đăng phổ biến theo chiều ngang với hiệu ứng trượt khi rê chuột

Bài đăng phổ biến có rất nhiều cách để trình diễn nó . Thủ thuật hôm nay Viettin24h dùng Plugin jquery rất dễ thao tác nhưng lại có tính thẩm mỹ rất cao ! 
Các bạn có thể tham khảo thêm các bài viết : tại đây
Ảnh minh họa :
Bắt đầu thủ thuật : 
1. Đăng nhập Blogger
2. Chon bố cục --> Thêm tiện ích " Bài đăng phổ biến "( nếu chưa có)
3. Thêm tiện ích HTML/Javascript và Dán code bên dưới vào tiện ích vừa tạo :
<style>
.popular-posts {
  margin: 0px 0 30px 0;
  padding: 0 0 0px 0;
  position: relative;
  width: 900px;
  height: 363px;
  overflow: hidden;
  
}
.popular-posts  {
 /* recommended styles for kwicks ul container */
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}
.popular-posts  li{
 /* these are required, but the values are up to you (must be pixel) */
 width: 185px;
 height: 363px;
 /*do not change these */
 display: block;
 overflow: hidden;
 padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 300px;
  height: 365px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
 /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
 margin-right: -4px; /*Set to same as spacing option. */
 float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;
  
}
.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:600px;
  height:363px;
}

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;
 
}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
}
</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-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
     max : 600,
                    min : 300,
     spacing : -4,
                    duration: 200
      });
});
/*]]>*/
</script>
4. Sắp xếp tiện ích vừa tạo và Popular post như hình dưới :



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

Chúc các bạn thành công .

Bài viết liên quan

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

Back To Top