Accordion ngang cho phổ biến bài viết trong Blogger|MẸO VẶT CUỘC SỐNG

Home » MẸO VẶT BLOGGER »

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

vuongsungdong

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

Chia sẻ :

Posted in MẸO VẶT BLOGGER

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

0 nhận xét cho bài đăng này

Hãy để lại nhận xét nếu bạn thích bài đăng này