Nguồn : cutiseo.blogspot.com
Hướng dẫn thủ thuật:
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) ->
HTML/Javascript
2. Dán Code dưới đây vào tiện ích vừa thêm:
CODE KIỂU 1:
<style type="text/css">
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;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: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDSrPYXlgZ53yrvoJnLZWWgZ6HlYDQR2jse1d33WjHzCQKmVPInfjBLKHtabVbwSoP5p5ulrGX0nD3RJSlJiorAkwx1kh8Ux3IFwqO5ioDf6nhAds4Cfi2Zpyxq-kVqylchjcHSYHMzxE/s1600/paging_btrix_bg2.png) 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>
<!-- Huong dan thu thuat http://itviet360.com -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://cutiseo.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghaHx7N3IFxcn4B8dff_k38JIYtLJHdAFoz4M0JXFlaWTx5PM78s5dfHso-lVRW6kfnKq0vv1woTIz4A2j2U9zOH0Nd_CFHzp8znq84zUTyiCdQoqAEdKOpQBZRU3DoldP8gLdi1o-U9FW/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXg6plKaOnIXUuqHlm9V_Kb1qMZXGfdmGp2JVUp7D6BSnqTa3ucFiVsJZGe3ftc4N9JDsPtrTCdNTLPfTTQHHLrstNGyAyZqcoVRpelsdlUV4ErvDElg206mn0MQuxHOC7n_Qtt6cOzwjX/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8mV3SAKK9LIc5PWbRScacnHnbfhYG8nxhyphenhyphenPiIGu3JLMx3f0slUqdV5kjqkh9LvjU35xhrpRv6h0CFD-Ketoyr_rH-N1E7ycxx7HRIHw8iwtzGymvUVyQJ6DWEuqDP3b8u8iBHeLph3crp/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9QdMTLk3yOnXaV3gweRX-VbX_OZOTxIZo_4kK_1qsOoWJQ063IJUCwuu8qd3EDyIn38toW_mQH54OT_DX1nklgR9L_nSYnEiZXh0qC3C4Z-AzbgHhmpfnAQqJbkvEXfZAZGgqdQvbsaq/s1600/anh-bia-fb-tinh-yeu-1.jpg" alt="anh bia facebook tinh yeu dep buon" width='660' /></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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_btrix a").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>
CODE KIỀU 2:
<style type="text/css" media="screen">
.container {
margin: 0 auto;
overflow: hidden;
width: 700px;
}
#content-slider {
height: 335px;
width: 100%;
}
#slider {
background: none repeat scroll 0 0 #000000;
border: 5px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 680px;
}
#mask {
height: 320px;
overflow: hidden;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
</style>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="http://www.càiwin8.vn/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KkdGhrclLHK-q-Orv8rBMuYmBg5t2i4Lev-TmxFKjWdmpsksw9ty0LteA1L47BcLfoNpWfb7QlZMvXf6rfhPhuGJYJTBMnDp1chzEE1do7q6DRSZe6N8LKxCuqtUyM4d7td7SLKTfMc/s1600/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgzmUgPNk1Euz7aoy6_AXfPnqceDwvTxBdVQFVKX26ponZPL-EOyEJooTvkfZbMKeeJtfKC-QU4xpAIhlqmuoEVhiY49XlfiNHBVuyDS-l_gE4J4_lirgSN9upBSTARezwdYznLEQwqc/s1600/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQaq8VJgPlEgrzLUMJPHJNrCwGpkBWrYbBk2YZjfR0Gtb30epRnUrhL1PChck6Rc6KmOHtO88BXG7lAPFQ2mogJ6_WmFem49zps4oaAmsRpES4CtLxpOKXHIJm6_MzrjFLj6aBVPL0hE/s1600/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimA5s9XCoj5yN2VRz_YvGt6_95oLVZUCrU2QttO_So_a38Niy40_aCh6jRaL0RNpOeIxv2ay3RoB2RAuYRL6oZTEwebs10-sQi5Df-lwwJE39PUGCt1NECOCOw49nhU8Vr5QebfGKymnw/s1600/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL31h2fa7Qif0E8ooGZfjKPEguJHMGn7DpXnRbwK8jLd3EpB_1_zAaGma0vNnc30Vdtqc7Z9ez_V1f5Zp81n8MHgR1rTTLYAIVnLlavlcHORzmmEUXVEof88dnn13YACNAv4A3bV_So4M/s1600/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
Lưu lại và xem kết quả :)
Bạn ơi cho mình hỏi, hiện giờ trong blog của mình có 1 slide hiện những ảnh có trong blog nhưng phải bấm dấu mủi tên để xem hình khác vậy bạn có thể xem cho mình làm cách nào để hình tự nhảy không. Mình cảm ơn bạn.
Trả lờiXóahttp://ttthanhcong.blogspot.com/
chào bạn
Xóamỗi ảnh trong 2 slide có code bên trên là những ảnh up lên từ máy tính
muốn cho chạy ảnh nào thì up ảnh đó lên
bạn có thể tham khảo code bên trên ,lấy link ảnh rồi thay bằng link ảnh của mình nhé
còn về việc ảnh tự lấy trên blog thì mình cũng chưa rõ nên k thể tư vấn giúp bạn
nếu có thể bạn gửi code cho mình xem rồi có phản hồi nhé
thân chào!
ad oi sao em lam nhu ad ma kich thuoc khong duoc nhu ad vay? kt: 700 px x 335 px ma anh khong dc bang nhau la sao ad nhi? em mong dc su tro giup tu ad ah. nhomkinhtinphat@gmail.com. thanks ad nhieu
Trả lờiXóa