Home Blogger Template NIVO SLIDER BLOGGER – JQUERY SLIDER ẢNH CHO BLOGGER CHUYÊN NGHIỆP

8:38:00 AM
A+ A- Print Email
Nếu bạn đang muốn tạo 1 Slider ảnh cho Blogger thì Nivo Slider Blogger là 1 sự lựa chọn đúng đắn. Nivo Slider là 1 plugin jQuery giúp bạn tạo 1 Slider ảnh với hiệu ứng đẹp không kém gì Flash.
Nivo Slider Blogger còn được dùng để làm Slider bài viết bởi mẫu Slider này hỗ trợ chèn link vào ảnh
Nivo Slider - jQuery Slider ảnh cho Blogger chuyên nghiệp
Nivo Slider – jQuery Slider ảnh cho Blogger chuyên nghiệp
Demo trực tiếp
See the Pen egtnL by nguyentien (@nguyentien) on CodePen.

CÁCH TẠO NIVO SLIDER CHO BLOGGER

  1. Lựa chọn hình ảnh bạn muốn thêm vào Slider
  2. Resize tất cả các ảnh đó cho phù hợp với kích thước bạn đặt ở dưới
  3. Upload lên các trang lưu trữ và lấy url
  4. Đăng nhập vào Blog
  5. Vào Bố cục (Layout)
  6. Chọn Thêm Tiện ích (Add Widget)
  7. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào
[css]
<style>
#slider {
position:absolute !important;
top:50%;
left:50%;
width:650px;
height:350px;
margin-top:-175px;
margin-left:-325px;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
}
.nivoSlider img {
position:absolute;
top:0;
left:0;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-caption {
position:absolute;
left:75px;
bottom:29px;
width:498px;
padding-top:13px;
padding-bottom:13px;
z-index:8;
border:1px solid #000;
border-left-color:rgba(0,0,0,.5);
border-right-color:rgba(0,0,0,.5);
-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e648494c’, endColorstr=’#e6262728′,GradientType=0 );
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.nivo-caption p {
margin:0;
font-family:’Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:bold;
color:#fff;
text-align:center;
text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
bottom:30px;
z-index:9;
cursor:pointer;
text-indent:-9999px;
width:45px;
height:39px;
background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/labstrike-arrows.png);
background-repeat:no-repeat;
}
.nivo-prevNav {
left:75px;
background-position:0 0;
box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
right:77px;
background-position:-45px 0px;
box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(‘.nivoSlider’).nivoSlider({
effect: ‘sliceDown’,
directionNavHide: false,
captionOpacity: 1,
controlNav: false
});
});
</script>
<div id="slider" class="nivoSlider">
<img src="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png"
alt="Slider Image 1" title="This Is An Example Of A Caption">
<img src="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png"
alt="Slider Image 2" title="You Can Add Anything Here">
<img src="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/labstrike-image3.png"
alt="Slider Image 2" title="Like Image Description">
<img src="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/labstrike-image4.png"
alt="Slider Image 2" title="Your image Information">
<img src="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png"
alt="Slider Image 2" title="Other opinion">
</div>[/css]

THAY ĐỔI ĐỘ RỘNG VÀ ĐỘ CAO CỦA SLIDER ẢNH

[css] <div><code>width</code><code>:</code><code>650px</code><code>;</code></div>
<div><code></code><code>height</code><code>:</code><code>350px</code><code>;[/css]

Lưu ý kích thước này cũng chính là kích thước ảnh hiển thị ở Nivo Slider

THAY ĐỔI LINK ẢNH

[css] <div><code><div id=</code><code>"slider"</code> <code>class=</code><code>"nivoSlider"</code><code>></code></div>
<div><code> </code><code><img src=</code><code>"<a href="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png">http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png</a>"</code></div>
<div><code> </code><code>alt=</code><code>"Slider Image 1"</code> <code>title=</code><code>"This Is An Example Of A Caption"</code><code>></code></div>
<div><code> </code><code><img src=</code><code>"<a href="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png">http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png</a>"</code></div>
<div><code> </code><code>alt=</code><code>"Slider Image 2"</code> <code>title=</code><code>"You Can Add Anything Here"</code><code>></code></div>
<div><code> </code><code><img src=</code><code>"<a href="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/labstrike-image3.png">http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/labstrike-image3.png</a>"</code></div>
<div><code> </code><code>alt=</code><code>"Slider Image 2"</code> <code>title=</code><code>"Like Image Description"</code><code>></code></div>
<div><code> </code><code><img src=</code><code>"<a href="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/labstrike-image4.png">http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/labstrike-image4.png</a>"</code></div>
<div><code> </code><code>alt=</code><code>"Slider Image 2"</code> <code>title=</code><code>"Your image Information"</code><code>></code></div>
<div><code> </code><code><img src=</code><code>"<a href="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png">http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png</a>"</code></div>
<div><code> </code><code>alt=</code><code>"Slider Image 2"</code> <code>title=</code><code>"Other opinion"</code><code>></code></div>
<div><code></div>[/css]

THAY NỘI DUNG TITLE

Thay This Is An Example Of A Caption, You Can Add Anything Here……. bằng nội dung title ảnh bạn
Save template lại là xong.
Labels: ,

Post a Comment

Subscribe to: Post Comments (Atom)

Author Name

{picture#https://z-1-scontent-sit4-1.xx.fbcdn.net/hphotos-xlf1/v/t1.0-9/11007755_352920201558868_3953979650044458009_n.jpg?oh=ee4f79eca17b7fcdf2033a0b5d6249f2&oe=57A6990D} Xin chào các bạn.Mình là Phan Bình.Mình đam mê viết web và muốn chia sẻ tất cả kinh nghiệm mình có cho mọi người. {facebook#https://web.facebook.com/Mostlonely2k}

Contact Form

Name

Email *

Message *

Powered by Blogger.