tiện ích thông minh jQuery trượt vào Blogger / trang web

Đây là một hướng dẫn về, làm thế nào để thêm nội dung trượt jquery lớn đặc trưng cho blog của bạn hoặc website.Read blogger khác các chỉ dẫn dưới đây để thêm nội dung trượt đặc trưng cho blog của bạn với trong vài minutes.Remember sử dụng 307pxrộng và 254px chiều cao hình ảnh cho slider.I này khuyên bạn nên để Download file java script và chủ nó yourself.Also bạn có thể xem DEMO của thanh trượt nàyTẠI ĐÂY. 1.Login vào bảng điều khiển blogger của bạn -> Thiết kế - -> Edit HTML. 2.Scroll xuống đến nơi mà bạn nhìn thấy </ head> tag. 3.Copy code dưới đây và dán nó ngay trước khi các </ head> tag.

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nq6uBAvf-xNxzO4aYpT8-uLJLNYQsh4rbZOFxGR3GqUj553n5yuCLwzAomAEAiIQYliiDzycqzBzpxELeWAfq6eNW3ismLUL-O_TJyBNNj3GkgvfNf3njFFfqmWlcA3iIereJ_PDo_dW/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nq6uBAvf-xNxzO4aYpT8-uLJLNYQsh4rbZOFxGR3GqUj553n5yuCLwzAomAEAiIQYliiDzycqzBzpxELeWAfq6eNW3ismLUL-O_TJyBNNj3GkgvfNf3njFFfqmWlcA3iIereJ_PDo_dW/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4.Now lưu mẫu của bạn.

5.Go để bố trí - Các yếu tố Page>.

6.Click vào 'Thêm một tiện ích ".

7.Select "HTML / Javascript" và thêm mã dưới đây:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

Chú ý: Thay thế,

SLIDE-X-LINK-đây có bài thực đặc trưng của bạn liên kết.

SLIDE-X-IMAGE-ĐC-đây với địa chỉ thực sự diễn hình ảnh.

Hãy xem ví dụ dưới đây:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uz7Vhuo8nCgqeGXzzYkfFnhjPWHQj6OjGb1l8D8LApEWoho6RMP1wTNz4d30KyOfZPT_hZf_tc1riM6W-dEvHRKkDbv9KW7SDt1G45uiI2iCOyKWE3XshSruQNgriMcL1teix1cjJtTL/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7itATxHR6gU2G5fFXYRJS7e7y127DiKVdVG3vE598E5GuqN2pRsg3SkiIp7o6CYh9ymqXhFddD3TjHzz8zdDjIlUgiliYedZPVbDRcG9kVU1VTX8QFKNoF6tekK_zIcA3rtOdRVPEeup/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYYpZtgWtJ-D01-CJ4GnAuUgJg31jop3uz0mtUDlKA5vftgHYU4UJnEG3LIVz6YQkV_LVAzWbRySHStxx1NDnQqAqEAQ4JzO8aa1RlG4GQaDg7hNNUB29_wjzXbGjj_4UoimxxZ2Liovk/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKq0GB758h2SC6rOTz-dKqTRBFnahoWhx1hX1RrKDBKd3sIGVzfyFfncZb7vzyZVDph67VVYFFCQWRQfAqpFHbtN4RcAMAGuYTiH_K5lYA_ibWIdfsMN6Rrqkz_RCJiAjZ7Zf0vLkSE6ZT/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJvDn2imwCWRPBbQxCqEuZOymYaXtAYcUSSiEj2mOiRajYBHHXlgPt6m71EXFVoybrMlj1Da42cu_5IAkj2CfmVJMz1SFN5v2jQaKVQol_uu2Mamhb0mpATWSmbObu8bxpJI6aA2JnSEr/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.