Một cách tạo slideshow hình ảnh cho blog

Nguồn: spiceupyourblog.com

Một cách chèn slide show cho hình ảnh khá dễ dàng vào blog có sử dụng jQuery. Có thể tùy biến kích cỡ của slideshow cho phù hợp với nơi cần đặt trên blog. Có thể thêm vào chú thích ảnh cũng như nút điều khiển slideshow...

Thực hiện:

Bước 1:
◈ Vào Dashboard → Template → Edit HTML → Proceed
◈ Tìm đến dòng code:  ]]></b:skin>
◈ Chép chính xác đoạn code dưới đây vào ngay trên  ]]></b:skin>

/* Start Slider Code From http://www.spiceupyourblog.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.spiceupyourblog.com/ */

Bước 2:
◈ Tìm đến dòng code:  </head>
◈ Chép chính xác đoạn code dưới đây vào ngay trên  </head>

<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->

Chú ý:
♦ Có thể bỏ các nút next/prev, nút số thứ tự hình tùy ý.
⇒ Tại dòng: &#39;showMarkers&#39; : true, đổi thành false để bỏ nút số.
⇒ Tại dòng: &#39;showControls&#39; : true, đổi thành false để bỏ nút next/prev.

♦ Thay đổi kích thước slideshow với 2 thông số 940 và 340. Chú ý kích cỡ hình đưa vào phải đúng với thông số đã chọn.

Lưu Template!

Bước 3:
◈ Vào Layout → Add a Gadget → HTML/JavaScript
◈ Bỏ đoạn code này vào:

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="CHÚ_THÍCH_1" src="LINK_HÌNH_1"/></li>

<li><img title="CHÚ_THÍCH_2" src="LINK_HÌNH_2"/></li>

<li><img title="CHÚ_THÍCH_3" src="LINK_HÌNH_3"/></li>

<li><img title="CHÚ_THÍCH_4" src="LINK_HÌNH_4"/></li>

<li><img title="CHÚ_THÍCH_5" src="LINK_HÌNH_5"/></li>
</ul>
</div>

Lưu Gadget và xong!