Tạo Slide Ảnh Chạy Liên Tục Đẹp Cho Blogspot

Chào các bạn, trở lại với bài viết này mình xin chia sẻ code tạo slide ảnh liên tục cực đẹp cho blogspot, theo dõi các bước bên dưới về cách tạo slide ảnh cho blogspot nhé

Các Bước Thực Hiện Tạo Slide Ảnh Chạy Liên Tục Cho Blogspot

Bước 1:  Copy dòng css bên dưới để vào trước ]]><

<style type="text/css">

#slideCont{border:solid 1px #000;text-align:center}#slideCont img{margin:5px}</style>

Bước 2: Copy mã javascript bên dưới để vào trước </head>

<script type="text/javascript">
function clip() {
  // width of the banner container
  var contWidth = 425;
  // height of the banner container
  var contHeight = 90;
  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  id1.style.left = parseInt(id1.style.left)-1 + 'px';
  document.getElementById('slideCont').style.width = contWidth + "px";
  document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
  id2.style.display = '';
  if(parseFloat(id1.style.left) == -(contWidth))  {
   id1.style.left = '0px';
  }
  setTimeout(clip,25)
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
  clip();
});
//-->
</script>

Bước 3: Các bạn hãy đặt dòng mã này trong body ở đâu bạn muốn hiển thị nhé

<div id="slideCont" style="clip: rect(auto, 425px, 90px, auto); height: 90px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">

<div id="slideA" style="height: 90px; left: -194px; overflow: hidden; position: absolute; top: 0px; width: 850px; z-index: 1;">

<div id="innerSlideA" style="float: left;">

<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg" width="126" /></a>

   <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg" width="120" /></a>

   <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg" width="126" /></a>

  </div>

<div id="slideB" style="height: 90px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">

<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg" width="126" /></a>

   <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg" width="120" /></a>

   <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg" width="126" /></a>

  </div>

</div>

</div>

Bước 4: Lưu Template lại và tận hưởng thành quả

Chúc Các Bạn Thành Công

 Từ Khóa: tạo slide ảnh đẹp cho blogspot, slide blogspot đẹp, slide blogspot, code slide blogspot.