Accordion ngang cho phổ biến bài viết trong Blogger

Demo

điều này rất dễ dàng để cài đặt, bạn chỉ phải đặt các kịch bản để các tiện ích mới

• Đăng nhập vào Blogger Bảng điều khiển và điều hướng đến thiết kế - Page Elements
• Nhấp vào "Thêm Tiện ích" và Chọn "Phổ biến bài viết" ( Nếu bạn đã có tiện ích này bỏ qua bước này )
• Sau khi bạn có Popular Post Tiện ích "Thêm Tiện ích" một lần nữa và chọn "HTML / Javascript"
• Đặt tất cả các kịch bản dưới đây để "nội dung" HTML / Javascript Gadget
• Thực hiện bài viết của bạn phổ biến bây giờ với hình ảnh động

Vì những tính năng tiện ích để hiển thị bài viết phổ biến trong nhiều cách. Bây giờ tôi đã thực hiện phụ tùng mới bằng cách sử dụng Kwikcs jquery nó có thể gọi Acoordion ngang. Plugin này jquery dễ dàng sử dụng và Thực hiện các bài viết phổ biến cho các blogger.

Bạn có thể xem demo từ liên kết dưới đây

<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>

Sưu tầm bởi    www.meovatcuocsong.blogspot.com