Blogger widget: Popular Post với Carousel trượt

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 widget mới bằng cách sử dụng Carousel trượt, nó có thể hiển thị hình ảnh và snipped trong ngang.

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

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
• Nếu bạn đã có jQuery trong Template của bạn, xin vui lòng xóa từ kịch bản của tôi
• Thực hiện bài viết của bạn phổ biến bây giờ với hình ảnh động

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

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