【Blogger】Basic jQuery Slider
值得一提的是有一個叫做nivo slider似乎和Wordpress過往甚密，所有新版本都可以在官網找到wordpress的支援版本，身為blogger的使用者真的是很羨慕，而nivo slider也有Drupal和Joomla的套件支援，至於blogger就要自行把檔案寫入後台的html裡面才能應用。不過因為是『Basic』 jQuery Slider，所以沒有跟部落格裡的文章結合是這套的小缺憾，就拿來當當一般的照片輪播widget。
這篇使用說明來源是源自於國外的jQuery Slider開發者，
原始網站http://basic-slider.com/
網站原始程式碼https://github.com/jcobb/basic-jquery-slider/
引入jQuery Library，啟動plug-in
兩個.js檔案可以從作者提供的github直接使用，如果覺得不放心，還是要有一份屬於自己的檔案，把它下載下來看要放在googlesite的檔案櫃還是其他提供code存放服務的網站就由看官決定囉～.js檔下面的code是用來啓動slider的參數，有寬度和高度還有控制slider的頁數和輪轉，選用true打開或是用false來關閉，而這兩個部分要放在blogger後台的html的<head>裡面。
<script src="js/libs/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.js"></script>
$(document).ready(function(){
$('#my-slideshow').bjqs({
'width' : 940,
'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});
設定ccs樣式
這個部分的來源在作者提供的github-ccs，不太需要做其他變更，把這部分的code貼在<b:skin>裡就可以了。
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;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
安裝gadget
在blogger版面配置介面新增小工具HTML/JavaScript，然後<li>填入你要slide的內容。
例如：<li><img title="圖片說明" src="圖片來源"/></li>
<div id="my-slideshow">
<ul class="bjqs">
<li><!-- Any content you like --></li>
<li><!-- Can go inside these slides--></li>
</ul>
</div>
好了，大功告成。
