Tạo slider tự động cập nhật tin cho blogspot

Tạo slider tự động cập nhật tin cho blogspot

Slider hẳn nhiều người muốn sử dụng trên web blog của mình bởi nó giúp trang web của bạn trông chuyên nghiệp và đẹp mắt hơn. Hơn nữa về mặt nội dung nó cũng giúp bạn thể hiện được nhiều post trong một không gian slider nho nhỏ.

Cũng có khá nhiều tip tại các các web khác nhau giới thiệu về cách làm slider tự động cập nhật tin mới. Tuy vậy nhiều khi cũng khá phức tạp và không hề đơn giản cho những bạn còn lạ lẫm trên nền blogger.

DEMO

Bài viết dưới đây sẽ giới thiệu cách bạn thêm slider này vào web blog của mình:

Ps: Bộ slider này mình sưu tầm và style lại cho phù hợp và làm cho nó dễ dùng hơn với những bạn là newbie trên nền blogger.

Cách thêm vào Blogger

Bước 1: 

Thêm CSS (Nhấn Ctrl + F search từ khóa ]]></b:skin> ). Đặt bộ CSS sau trước đó:

/* Slider Auto Update Edit by erhay */
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:80px;bottom:-42px;
/* Tweak this to center bullets */
width:200px;
}
.theme-default .nivo-controlNav:before
{
content:"Xem tin   ";
margin-left:-200px;
font-weight:bold;
color:#3C6691;
}
.theme-default .nivo-controlNav a {
 display:block;width:12px;height:12px;
border-right: 1px solid #bdc5cf;
margin-right:8px;float:left;
font-weight:bold;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
color:black !important;
}
.theme-default .nivo-directionNav a {
 display:block !important;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
a.nivo-nextNav
{
display:block !important;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.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:#ffffff;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
height:90px;
}
.nivo-caption p {
padding: 5px;
margin: 0;
color: black;
font-weight: bold;
font-size: 18px;
line-height: 20px;
padding-top: 20px;
}
.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;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:395px; /* Make sure your images are the same size */
 height:275px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}

Bước 2: 

Đặt vị trí slider bạn muốn thêm vào web (trong body)

<div class='slider-wrapper theme-default'>                      <div class='ribbon'/>
                      <script src='http://misumisu.googlecode.com/files/Slider2.js' type='text/javascript'/>                      <script type='text/javascript'>                        var numposts_gal = 6;   //number of posts                        var image_height = 295; //image height                        var image_width = 395;  //image width                      </script>                      <script src='http://www.erhay.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts' type='text/javascript'/>

                      <!-- Doi & thay bang &amp de chay link src='' thay vi phai them <![[ cho xml -->
                    </div>
                    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>                    <script src='http://misumisu.googlecode.com/files/AutoSlider1.js' type='text/javascript'/>                    <script type='text/javascript'>                      $(window).load(function() {                      $(&#39;#slider&#39;).nivoSlider();                      });                    </script>                    <!-- jQuery slide auto update -->

OK. Vậy là đã xong rồi đó. Thay lại đường dẫn (màu đỏ) đúng với web bạn là được. Chúc bạn thành công.

Cách thêm Slider trong Widget :

Bước 1: Thêm CSS vào widget hoặc thêm như trên (CSS lấy ở trên - vẫn vậy)
Bước 2: Thêm code sau vào trong body

 <script src='http://misumisu.googlecode.com/files/Slider2.js' type='text/javascript'/>
       <script src='http://misumisu.googlecode.com/files/AutoSlider1.js' type='text/javascript'/>                    <script type='text/javascript'>                      $(window).load(function() {                      $(&#39;#slider&#39;).nivoSlider();                      });                    </script>    

Bước 3: Thêm vào Widget.

<div class='slider-wrapper theme-default'>
<div class='ribbon'/>
<script type='text/javascript'>
var numposts_gal = 6; //number of posts
var image_height = 295; //image height
var image_width = 395; //image width
</script>
<script src='http://www.erhay.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts' type='text/javascript'></script>
<!-- Doi & thay bang &amp de chay link src='' thay vi phai them <![[ cho xml -->
</div>
</div>

Lưu ý nhé: Ở style này mặc định mình để 6 bài viết. Bạn muốn nhiều hơn thì phải style lại đôi chút đó. Nếu bạn không làm được có thể để lại comment mình sẽ hướng dẫn.

(Ghi rõ nguồn http://www.erhay.com khi bạn phát hành lại thông tin từ trang này)