Tạo Slide ảnh đẹp cho blog, Web, Blogger

Loading...

Slide ảnh chạy tự động là 1 tiện ích rất thú vị cho Web và blog. Tạo 1 slide ảnh đẹp cho blog, web giúp người xem hướng tới những điều nổi bật của site đó. Ở bài viết này mình hướng dẫn các bạn tạo slide ảnh trược chạy tự động, có ghi chú thích và dễ dàng cho các bạn tùy chỉnh.
Chế độ hiển thị của Slide này là nằm trên các nền khác của site. Thử xem slide ảnh này nó như thế nào nhé.
DEMO:

Mẫu code slide ảnh này hoàn toàn dùng được cho cả Website và blogger.
- Hướng dẫn thủ thuật trên blogger:
+ Đăng nhập vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
+ Dán đoạn Code dưới đây vào tiện ích vừa thêm

<style>
#slider {
position:absolute !important;
top:90%;
left:40%;
width:550px;
height:290px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchrGsRuZ-ET6wD7WHVcd6jlyVhxkQFgIdLHN2Bp2PANMbZq5vLN3mqiYwF9_tzpsfBcU6VdMvOKLjUdLcQl9qdoKSdxl-4nbERw4eswJFS_xZoxG1Euyv2KrD5DErKAG02E9Xe9wEhYk/s1600/helperblogger.com-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 class="nivoSlider" id="slider">
<img alt="Slider Image 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBJXG-YaZmvElik0viANyrhMajQ2ACgrdoPOCd2xYFxtxqNeNZyxarpbuXENlgYfg63ZLok9t8ecyBWtCIlkG0rhn01xClI1zFcd-KIsl_oGKp3i1U03jUpeKzcEU7dSAqfHjGfDmE49Y/s1600/helperblogger.com-5.png" title="Demo slide ảnh cho blogger" />
<img alt="Slider Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpKyAhUPQ4IOLxqCV3IDVKLlWw68i7_Fsau47Sf49RVPcYM06RyOqTyIS3OvxL91EFc-XOFdo5zOhwp3I7wXXLUSQCghCaLvQkSWnQ4hthL4R3CJBifAxZN9PTUAe9qc1H7R8GpJq3jA/s1600/helperblogger.com-4.png" title="Tự học SEO Web" />
<img alt="Slider Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJFakuMIVK6JR1I24U4Hpnrl5aQyEeoqGw1cCbwdT-BTdyouHy9Fvmf68hW07kNMcknOQiwY4ddouE1TNgYPM974a4Huy5cX_-t8cfCNSldEmyx3idGzh0MM13Z489UGYP62vEv3HbnVI/s1600/helperblogger.com-3.png" title="itviet360.com" />
<img alt="Slider Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPgMNALpHjXoMkoeKpdQ3asjZPufsu8DuUz0dpXVhZI0y65GNPruWWZGBK4mN8FpymLDQN76XAkrfQ5IHaftyAGUJ8ATCgEGebscQAUxogD6QG5D-MPKgV525sElGFWx7tCSTIbsI6m4/s1600/helperblogger.com-2.png" title="Image Info" />
<img alt="Slider Image 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVFlKxvhKvHMI1Fefu-QJ9Shxikhkyz5Tr9wr5SNEQ0a-8_vieFrXumINCrte0VUlAMEpkKJpL2U3dNpzr7-ILZXHDnE3k_oVcfSQgww1hCLm4dzXZk0iiAzksq30MaWwPkMUPT4BY1WA/s1600/helperblogger.com-1.png" title=" Tổng hợp Thủ thuật Blogger" /></div>

Các thông số gồm kích thước, link hình ảnh được mình bôi màu các bạn tùy chỉnh theo hiển thị của các bạn. Kích thước hình ảnh các bạn có thể chỉnh sửa...
Sau đó lưu tiện ích và xem kết quả.

---

Chúc các bạn thành công !

Loading...

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