TRƯỢT HÌNH ẢNH ĐƠN GIẢN VỚI JQUERY TRONG BLOGGER/BLOGSPOT

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

Có 4 bước . 

a.Thêm mã CSS và tùy biến! 

b. Thêm Plugin Jquery 

c. Thêm Javascript 

d. Thêm trượt Widget

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  trước nó!

   #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

Thêm mã này trước </ head> tag

Mẫu của bạn đã có mẫu nàu thì bỏ qua bước này

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

THÊM JAVASCRIPT

Thêm mã này trước </ head> tag

<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 đề  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 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  <!-- You can add more n more images as link above -->  tag và Tùy chỉnh nó như Giống như ở trên

   - Hình ảnh slide -> 
       < a  href = "Liên kết Url" > 
       < img  src = "Hình ảnh url ở đây"  alt = ""  width = "540"  height = "320"  title = ""  alt = ""  rel = "<h3> Đây là Title </ h3> Đây là mô tả" /> 
       </ a >

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

Theo: http://www.way2blogging.org/