LÀM THẾ NÀO ĐỂ TÍCH HỢP TRƯỢT HÌNH ẢNH ĐƠN GIẢN VỚI JQUERY?

THÊM MÃ CSS VÀ TÙY BIẾN!

1. Blogger Bảng điều khiển > Thiết kế tab> Edit HTML
2. Tìm ]]> </ b: skin> tag và đặt mã dưới đây vào trước phần này.

   
   #gallery {
   position:relative;
   height:320px; /* Set Height   */
   width:540px;  /* Set Width    */
   overflow:hidden;
   }
   #gallery a {
   float:left;
   position:absolute;
   }
   #gallery a img {
   border:none;
   }
   #gallery a.show {
   z-index:500;
   }
   #gallery .caption {
   z-index:600;
   background-color:#000;
   color:#ffffff;
   height:100px;
   width:100%;
   position:absolute;
   bottom:0;
   }
   #gallery .caption .content {
   margin:5px;
   }
   #gallery .caption .content h3 {
   margin:0;
   padding:0;
   color:#1DCCEF;
   }
   
   
   

3. Lưu Mẫu

THÊM PLUGIN JQUERY

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

THÊM JAVASCRIPT

<script type="text/javascript">
//<!--
$(document).ready(function() {  
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
var caption = next.find('img').attr('rel'); 
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
//-->
</script>

THÊM WIDGET TRƯỢT

1. Blogger Bảng điều khiển > Thiết kế tab> Page Elements tab
2. Thêm tiện ích HTML / JavaScript bất cứ nơi đâu
3. Đặt trường Tiêu đề như Trống
4. Mã dưới đây Widget Html trong cơ thể của các phụ tùng và Tùy chỉnh

   
   <div id="gallery">
   
   <!-- Image Slide 1 and must have a class='show' -->
   <a href="Link url" class="show">
   <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
   </a>
   
   <!-- Image Slide 2 -->
   <a href="Link Url" >
   <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
   </a>
   
   <!-- You can add more n more images as link above  -->
   
   <div class="caption"><div class="content"></div></div>
   <div style='clear:both;'/>
   </div>
   

5. Tùy biến: -
   Thay thế Url Liên kết với các liên kết mà bạn muốn
   Thay url hình ảnh với hình ảnh của bạn và thiết lập chiều rộng của nó và chiều cao
   Thay thế này là đề với Tiêu đề của bạn
   Thay thế này là mô tả với một Mô tả nhỏ
6. Bạn có thể Thêm slide ảnh Thêm mã sau đây chỉ cần sau này <- Bạn có thể thêm hình ảnh nhiều hơn n hơn là liên kết ở trên -> tag và Tùy chỉnh nó như Giống như ở trên

   
   <!-- Image Slide -->
       <a href="Link Url" >
       <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
       </a>
   

7. Cuối cùng Lưu Widget của bạn!

Hãy xem blog của bạn và để lại một bình luận nếu bạn thích 

Posted in MẸO VẶT BLOGGER