要介紹這個範例的原始出處是Menucool.com
國外有許多同好分享過安裝流程，不同的裝法有不同的效能，我在這裡找到了目前最快的安裝方法，略調整過之後，以圖解的方式來作個分享。
步驟一，到後台＼版面配置＼新增小工具
這裡示範安裝在最上方，當然其他位置也可以，後面步驟可以調整尺寸大小
選擇HTML/JavaScript小工具，按這兩個地方都可以
標題可以不填，填上的話是之後管理比較方便
內容請複製以下代碼全部貼上
按下儲存，馬上就可以看到結果
複製以下代碼貼到上圖內容處，深黃色為可能需要修改的部分，其他地方保留預設就可以了。
<style type="text/css">
#sliderFrame {position:relative;width:800px;margin: 0 auto 40px;}
#slider {
width:800px;height:300px;/* 請跟圖片的尺寸一致 */
background:#fff url(https://dl.dropboxusercontent.com/u/65405/jsImgSlider/themes/1/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:0;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ 藍色點點 ------*/
div.navBulletsWrapper {
top:275px; left:700px; /*更改數值可以改變藍色點點位置 */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(https://dl.dropboxusercontent.com/u/65405/jsImgSlider/themes/1/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="https://dl.dropboxusercontent.com/u/65405/jsImgSlider/themes/1/js-image-slider-copy.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.thephilko.com/2013/10/facebook-comment.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5fCclrqF5HpEulihWYLB-FE4hGXSLcgvyI2QQJouDlNQwKJIWRLAFGTWa6_k3w-MGvqoJYieuQFiiM9bQKLgNa4qENYxbPA9yJ6CPGz5C5V0rsUHGQWgqMOCPinemQJyR_UubUEOQ14c/s1600/banner+fbcomment.jpg" alt="Facebook留言板" /></a>
<a href="http://www.thephilko.com/2013/10/read-more.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbh-fKQAcqSuMInwZZ2QisewBsSa8mvNoEjF8In4nLiKe6MH-W2TTlYQLJ360lPrq1LEO7SUELAA7m3Gy959qL2jg-a8QNf1vfP9ZqTPGJnRzADaPtwqVidpcRmBoPSkf9x6Hw_scdOAW0/s1600/banner+readmore.jpg" alt="繼續閱讀" /></a>
<a href="http://www.thephilko.com/2013/10/blogger-slider-1.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGtnA5ehGy0Xzopw0TIA3ip2o6QIGJXHShK50Sq7f4cqHyuCXoYIp40DtBUh1SPrqMDLX21yjw0TlDbOBxI5JYSE9TY9ugvKEXQ-Ua1lX7ITZlcqjIj9xfXSq3Vfwi_48SVJuKN_lA6Gz/s1600/banner+slider1.jpg" alt="安裝Slider" /></a>
</div>
</div>
上面那一串共有三組下方格式的程式碼，請置換深黃色的字即可。
<a href="這裡請填寫想要的超連結，某特定網頁，或者blogger的標籤搜尋結果也可以"><img src="這裡請改成圖片的路徑，可以將圖片上傳到blogger，載圖效率很快" alt="這裡是slider每一張圖片下方的圖說" /></a>
馬上可以看到效果
到此步驟，Slider安裝完成
進階
上面那一串有一行紅字描述JavaScript檔案的位置。
<script src="https://dl.dropboxusercontent.com/u/65405/jsImgSlider/themes/1/js-image-slider-copy.js" type="text/javascript"></script>
這個檔案主管整個slider的換場效果，目前是放在我的dropbox，如果大家想要放在自己的網路空間也可以，以下步驟以dropbox作示範。
>>請到這裡下載原始檔http://www.menucool.com/javascript-image-slider，接著按以下的圖示進行，左邊為蘋果OSX畫面，右邊為微軟Win7畫面（WinXP也類似）。
本例子的Slider佔了版面最顯眼的地方，一進來就可以看到，但是如果到文章每一頁都會有，看起來就多餘了點，這時候我們可以用簡單的判斷式來處理這件事情。
在
<!-- only display title if it's non-empty -->下面加上
<b:if cond='data:blog.url == data:blog.homepageUrl'>
在
</b:includable>上面加上
</b:if>
前後比較示意圖
這一個判斷式講的是，如果在整個網站的首頁，就會出現slider，含意就是，如果不是首頁，就不會出現slider。
完工。
延伸閱讀～
>> 專門介紹Slider的網站
沒有留言
張貼留言