Bài mới dạng SlideShow 3D Automatic

Đây là tiện ích trình chiếu bài mới dạng SlideShow gồm hình ảnh đại diện của bài viết,tiêu đề,ngày đăng bài và số lượng nhận xét.
DEMO tôi để ở chế độ hiển thị theo nhãn cho ảnh đều nhìn đẹp hơn.
Tiện ích này áp dụng cho nhãn và cho toàn blog cùng 2 chế độ tự động hoặc phải kích hoạt nó mới chạy.
Để tạo tiện ích này ta vào bố cục chọn thêm 1 tiện ích rồi dán đoạn code sau vào và lưu lại

<style type="text/css">
.dg-container {
  width:100%;
  height:400px;
  position:relative;
  margin:0 auto;
}

.dg-wrapper {
  width:370px;
  height:300px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}

.dg-wrapper a {
  width:370px;
  height:auto;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  text-decoration:none;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.dg-wrapper a.dg-transition {
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.dg-wrapper a img {
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background-color:white;
  padding:0 0;
  margin:0 0;
  display:block;
}

.dg-wrapper a div {
  font-style:italic;
  text-align:center;
  line-height:50px;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#000;
  font-size:16px;
  width:100%;
  bottom:-55px;
  display:none;
  position:absolute;
}

.dg-wrapper a.dg-center div {
  display:block;
  font:normal normal 16px/1.4 "Times New Roman",Times,Serif;
  font-style:italic;
}

.dg-wrapper div a {text-decoration:none}

.dg-container nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-43px;
  padding:10px 15px;
}

.dg-container nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:.8;
  background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {opacity:1}

.dg-container nav span.dg-next {
  background-position:top right;
  margin-left:10px;
}

/* End 3D Gallery */</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/modernizr-custom.js'></script>
<script type='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/jquery.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
    $('#dg-container').gallery({autoplay:true});
});
</script>
<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,//Theo nhãn thì đổi false thành true
    slideLabelName  = "Tên Nhãn",//Theo nhãn thì ghi tên nhãn vào
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Comments",
    numposts_g      = 10,//Số bài cần trình chiếu
    home_page       = "URL Blog của bạn";
</script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/autoContent43DGallery.js"></script>

Posted by simple things to build with wood on Thứ Bảy, 20 tháng 4, 2013 - Rating: 4.5

Title :
Description : Bài mới dạng SlideShow 3D Automatic Đây là tiện ích trình chiếu bài mới dạng SlideShow gồm hình ảnh đại diện của bài viết,tiêu đề...

Share to

Facebook Google+ Twitter