Thứ Năm, 13 tháng 11, 2014

Hôm nay Hồng Designer chia thẻ thêm cho các bạn một dạng slider đơn giản mà đẹp đây là Slider đẹp iShare247 Blog đang dùng.
Slider ảnh

Để thêm slider vào blogspot các bạn làm như sau :

Các bạn có thể thêm code vào bất kì chổ nào các bạn muốn hiển thị slider.
<!--slider by hongdesigner-->
<b:if cond='data:blog.url == data:blog.homepageUrl'><style type='text/css'>
.container1 {
width: 97%;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: Right;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 635px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
margin-bottom: 4px
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: right;}
.paging_btrix {
position: absolute;bottom: 10px; right: 0px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<div class='container1'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='#'><img src='https://lh4.googleusercontent.com/-huhwQ9yXrXU/UptC5b47IfI/AAAAAAAAAV4/_gFeJ3yKSnY/s0/tich+luy+mua+hang+thang+11+%284%29.jpg' width='635'/></a>
<a href='#'><img src='https://lh6.googleusercontent.com/-0kezIb9h4k0/UptC2bwJ4lI/AAAAAAAAAVA/J4CAb16hqDc/s0/bannerthoitrangnam.jpg' width='635'/></a>
<a href='#'><img src='https://lh4.googleusercontent.com/-6akTSiXnpDk/UptC2N3oeRI/AAAAAAAAAVE/V6SNP3THzNk/s0/banner+tuyen+dung+thang+11.jpg' width='635'/></a>
<a href='#'><img src='https://lh6.googleusercontent.com/-72jA1v942lg/UptDMvTMq2I/AAAAAAAAAWA/_JX-i2oQq8k/s0/m%E1%BA%AFt+k%C3%ADnh+ch%C3%ADnh+h%C3%A3ng.jpg' width='635'/></a>
</div>
</div>
<div class='paging_btrix'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
</div>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(&quot;.paging_btrix&quot;).show();
$(&quot;.paging_btrix a:first&quot;).addClass(&quot;active&quot;);
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging_btrix a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging_btrix a.active&#39;).next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $(&#39;.paging_btrix a:first&#39;); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 3000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging_btrix a&quot;).click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
  </b:if>
<!--slider by hongdesigner--> 
Thêm code xong thì các bạn thay link ảnh thành link hình ảnh bạn thích và chỉnh sửa chiều rộng của slider cho phù hợp với blogspot của bạn. Hồng Designer chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét