NIVO SLIDER TUYỆT ĐẸP CHO BLOGGER

Dạo qua thế giới blogger bạn sẽ thấy có không quá nhiều các thủ thuật tạo slider cho blogger. Một trong những mẫu tuyệt vời nhất là Nivo Slider mà Share All World đang áp dụng. Đây là slider plugin cho mẫu Pascal của Wordpress do Dev7studios thiết kế và được phát triển cho blogger bởi Spice up your blog. Do có một số bạn quan tâm hỏi đến nên Share All World xin được giới thiệu lại dưới đây.

Bước 1: Vào Blogger Dashboard → Design → Edit HTML (Nếu bạn sử dụng giao diện mới của Blogger thì từ Dashboard vào Template chọn Edit HTML)


Bước 2: Dán đoạn mã dưới đây vào ngay trước đoạn mã  ]]></b:skin> trong template. Đây là CSS cho slider và bạn có thể điều chỉnh các thông số cho phù hợp với weblog của bạn.
/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Customized and introduced by http://www.shareallworld.info
* March 2010
*/
/* The Nivo Slider styles */
#slider{
width:580px;
height:246px;
}
.nivoSlider {
position:relative;

}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* 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:8;
}
.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:9;
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:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
Developer: http://www.shareallworld.info
*/

.theme-pascal.slider-wrapper {
background:url(https://sites.google.com/site/ez2mmo/slider_630.png) no-repeat;
width:630px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}

.theme-pascal .nivoSlider {
position:relative;
width:592px;
height:235px;
margin-left:19px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSQjMoGkCouTszVNmjJnpRSZ2s3QXcSh4Zq0D6-IfsOeawEV_nrM2EP0e0EqcybgE6GvYnDY6ErdWUiR7FzoF-PQI6oyxZP36CRmWUrnpoe7gxpGew3yvRFdLWKFgSO0IHtqQAzsYGpoR/s1600/loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:592px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(https://sites.google.com/site/ez2mmo/controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://sites.google.com/site/ez2mmo/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-pascal .nivo-directionNav a {
display:none;
}

.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:600px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a {
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}

.theme-pascal .ribbon {
background:url(https://sites.google.com/site/ez2mmo/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/
Bước 3: Chúng ta sẽ thêm jQuery script vào để chạy slider. Chèn đoạn mã dưới đây vào ngay trước thẻ </head> trong template. Nếu như trong template của bạn đã có jQuery script thì nhớ bỏ đoạn màu đỏ dưới đây nhé.
<!-- Start Slider Scripts -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!-- End Slider Scripts info @ http://www.shareallworld.info -->
Bước 4: Chọn vị trí thể hiện slider của bạn bằng cách thêm Gadget (HTML/JavaScript) tương ứng (nếu ở giao diện mới của Blogger thì bạn vào Layout). Bạn có thể cho slider nằm ngang toàn bộ blog bằng cách chọn Cross Column (1) hoặc chỉ ở trên phần Post (2) như của Share All World

Bước 5: Chép đoạn mã dưới đây và dán vào Gadget (HTML/JavaScript) mới chọn ở bước trên.
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">

<a href="http://viva-vietnam.blogspot.com"><img src="https://sites.google.com/site/ez2mmo/Vietnamese2.jpg" alt="Vietnamese only" title="I ♥ Vietnam"/></a>

<a href="http://shareallworld.info/search/label/Tourist"><img src="https://sites.google.com/site/ez2mmo/Ha_Long.jpg" alt="" title="Tourist" /></a>

<a href="http://shareallworld.info/search/label/Movies"><img src="https://sites.google.com/site/ez2mmo/avatar.jpg" alt="" title="Movies"/></a>

<a href="http://shareallworld.info/search/label/MMO"><img src="https://sites.google.com/site/ez2mmo/smoke_money.jpg" alt="" title="Make money online" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Share All World
</strong></div>
</div>
Bạn thay thế các đoạn code tô màu ở trên cho phù hợp với slide của bạn. Sau đó lưu lại và thưởng thức thành quả của mình thôi! Chúc bạn thành công!

=== Nhấn vào đây để tìm bài viết này trên google ===