#slider-k {
}
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 0px solid #000000;
height: 200px;
margin-bottom: 0px;
margin-top: 0;
overflow: hidden;
position: relative;
width:500px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 200px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0px;
width: 500px;
}
.s3sliderImage {
display: none;
float: left;
position: relative;
}
.s3sliderImage span {
background-color: #111111;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 200px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: 0;
top: 0;
width: 200px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 12px;
color: #FFFFFF;
}
Bước 2 : Dùng tổ hợp phím Ctrl trên máy tìm dòng : ]]></b:skin>
Thêm ngay sau nó code SCript sau :
<!-- Begin code load anh va chu chung -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<!-- End code load anh va chu chung -->
Bước 3 : Copy và chèn code sau vào vị trí mong muốn hiển thị : Lưu ý : bạn có thể sửa nội dung Text mình đã viết và thay bằng nội dung của bạn!
<!-- Post *** -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget-content'> <h2>Lưu ý: nếu trình duyệt website của bạn bị lỗi vui lòng đổi ngay trình duyệt khác để tiếp tục xem thông tin!</h2>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg4wzpE7DSOcpVFlj-2OhuKSqpV48vv4gVlvL5NstbvyefrN-6iT-OHuyVC0l7shk0D5-y-a03Ghyk7v3ed6mphaYOxPxUAeGzER7Y9P08BHVzbtNU2nzrRTeES5NM0KA-6nNWINw6HSCS/s1600/1.jpg' width='500px'/>
<span><strong><a href='#'>CAM KẾT VỀ NỘI DUNG</a></strong>
<p>Chuyên trang thông tin marketing oxivn được tổng hợp từ nhiều nguồn tin gọp lại và được trình bày lôi cuốn dễ xem và tiên ích...</p>
</span>
</li>
<li class='s3sliderImage'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdJM-nu2feB6hGvc5iD27cd5y5TDBjorAdfqbFiR1-FyteKqro50DUdXUI1yp3CfR6AbU3NLncNv5dWZdSGhi3qLiXjCYf7hfHkxf1ZF7lpiBqR1WcNmMjZMwLfIZSQjKJ7u78StTbYzP/s1600/2.jpg' width='500px'/>
<span><strong><a href='#'>BẤT CỨ Ở ĐÂU CŨNG XEM ĐƯỢC</a></strong>
<p>Bạn là chủ doanh nghiệp cần thêm thông tin kiến thức về marketing? bất chợt một lúc nào đó bạn vô tình lướt web tìm thấy chúng tôi,bạn hãy nhanh tay ghi lại và lưu giữ khi cần sẽ có ngay thông tin!...</p>
</span>
</li>
<li class='s3sliderImage'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZDsbDUeaO_hOFaPZTLte0O4Q0jDe8q2aiUxFd-OuQvJzXrQS5WG4ytdFyG5BIvU4Q6tlGX67uFaPNcGQOs3GdcAA3ulVkCcbEwLVNkpBWNGsVYJ89cFPJvhWvV6JpnAhvKKW3VPBCGv0/s1600/3.jpg' width='500px'/>
<span><strong><a href='#'>THÔNG TIN CHUYÊN NGHIỆP VÀ ĐA DẠNG</a></strong>
<p>Chúng tôi luôn cố gắng tìm tòi thông tin từ các báo chí, website nước ngoài và tổng hợp lại trên Oxivn...</p>
</span>
</li>
<li class='s3sliderImage'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHBi0zPKHt3Db-VPo5p1KDW-aS62DbbxH157mXGkhuYaMot_wEfKYEjjJVrP-Usw5CgzmfpsJ55vtVmTnP0llolbKlmOCYVJUpheGkl4JvTVbD7LBtLCPG_1uy8SJLHQ_FUo7jzdySlM/s1600/bar.jpg' width='500px'/>
<span><strong><a href='#'>KÍNH CHÚC QUÝ KHÁCH NĂM MỚI AN KHANG THỊNH VƯỢNG</a></strong>
<p>Tập thể Admin Oxivn kính chúc quý khách hàng hưởng một năm mới an lành - thành đạt và phát triển...</p>
</span>
</li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</div>
</b:if>
Ok rồi đó .Chúc bạn thành công! Mọi thắc mắc vui lòng liên hệ : Pro_mikanguyen
Vui lòng ghi nguồn templates.nsvina.com khi phát lại bài đăng!
