Jquery slideshow chạy ảnh đẹp cho web, blog [V1]

Loading...

Làm thế nào để thêm slideshow chạy hình ảnh đẹp, khuyến mãi hấp dẫn cho blog, website ?
1 thủ thuật khá đơn giản là chúng ta sử dụng Jquery để làm được slide ảnh đó. Ở bài viết này mình gửi tới các bạn code và hướng dẫn thủ thuật trên blogger

Demo trực tiếp

Code:

<style>
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
a, a:visited {
color:#2d3536;
text-decoration:none;
border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
color:#9e805c;
text-decoration:none;
}
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhSn76H3vP0OAvqDc9rden8JG9kGnH9w8TO5xEBJF8iJhDd_CS6068o0_xg-VpchvWGN-O43jK9OeKuCXjzi_6h9wXatWweRqp_sWmCZAuO9LmvUCXI_XvMliCYqsFXH8sqsK1UoaTKo/s1600/slider.png) no-repeat;
width:494px;
height:310px;
margin:0 auto;
padding-top:23px;
margin-top:50px;
}

#slider {
position:relative;
width:430px;
height:250px;
margin-left:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF09PX4XNiXfUS6lfHG9-2gqqiRQqIT3629FRF8-Ou8P5JNnppnyDP9U9OOQqTE0WotdqR3zx0Be2E4HB37K38vb9YU80QCuElk355VJQRm0sf3zMtyQXs3ZDfNboCjt8OUOJlf-FoqUk/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:163px;
bottom:12px;
background: #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 3px;
border: 2px solid #CCC;
opacity: 0.7;
z-index: 99;
}
.nivo-controlNav:hover{opacity: 1;}

.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifm2xJNWUrlFU-pYRI47ubdE5mPmBAlQet4zVDNA9Vv__3qWvjldliZxNEIy1ftTdElzmmDFeiB9aocxHyCt6Xut8MExXqHMq-tfe9UyVr0KUpt5VUeQovffdHUzHSkX7c-L_RxZWGc5s/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:0px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:35px;
height:65px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNhEj8eT8t7SH9-ULDvJsTJLS0FRZ7x7J0UWBPddVTcPxckOwXv4_AC9oLCQ6IxuK-HplBjuNPqVvdHRt7Pwy4wVazXMQ61cN3eHWnBM6ZQP5EigUHJIyGlclO3V1Dy53IvGi9FRGTOc/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-35px 0;
right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}

a.nivo-prevNav {
left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}

.clear {
clear:both;
}
</style>
<br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhielyT0US_NME0XPlOLGjOs9dOshSwDz-mBm3XqhaDaKwPbZjsSSMLSz0WowVWsfNBodgZ-ph_I3h8yl0tuTpexPmnynREHpCXLAxZb9_pbZIbTHvs4I91dc7t7VEJPpL-iwoKe_HBL_A/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQwm8l_3WJMLrLkloG346cUD1mKEvb1XnxffrKAu0VVab_IgFtZjRCOsNghRe05CCH2nnDV-cIrDwNaJ3Y1oW9B73SNiSFViGto-UR6IHd37hZdLyvMSYKs82OcR-rRN9kD3E0mjweOc/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis84w9syyWwmLJpkSmqO2yD38fVuHFP3OUl68En6Z1f3dxsfX5n2f_Ie3G9MsTM_ma3EEl3Uk2mpf5Jpp8TGB_D9MDTUZp8Of8FBF5uxE5eBFGLDiex6mOd1Np2k97GOrZySUpGFMwtbQ/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZZ9b8msKtFB7GlrU5HrZ4mg8SsjpFY1txIAD1N9fZ_-pbxC9P5XVYVK-_zcMHrGE_H0B69dXnzvtpd4BbcGe8C8bOsRLlRQNFD5Ple90VuDtUnNJ5fXE2H0D1jITPG0YR5vCk23xmP4/s1600/btrix-spring-nature.jpg" />
</div>
</div>
</div>

<script src="http://bloggertrixcode.googlecode.com/files/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://bloggertrixcode.googlecode.com/files/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({directionNavHide:false});
});
</script>

Trong đó:
Code bôi xanh là CSS, Code bôi đỏ là HTML + Javascript.
Link hình ảnh các bạn thay thế bằng ảnh của mình.
Hướng dẫn thêm cho blogspot:
- Thêm 1 tiện ích và dán Code ở trên vào tiện ích đó. Tiện ích HTML/ Javascript đó nên thêm ở trên phần bài đăng.

Loading...

Chuyên mục: javascript, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger