Element XD lab
哥教的不是CG,是偷雞
快速導引

【Blogger】安裝Slider範例一 Menucool疾速版



要介紹這個範例的原始出處是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="http://1.bp.blogspot.com/-6LkXIryXx6o/UmIP_ILVksI/AAAAAAAATkc/GIHHeSnlwv4/s1600/banner+fbcomment.jpg" alt="Facebook留言板" /></a>
<a href="http://www.thephilko.com/2013/10/read-more.html"><img src="http://2.bp.blogspot.com/-TGpzOamPcw8/UmIP_Ky7NoI/AAAAAAAATkg/vlWwSZfG46E/s1600/banner+readmore.jpg" alt="繼續閱讀" /></a>
<a href="http://www.thephilko.com/2013/10/blogger-slider-1.html"><img src="http://1.bp.blogspot.com/-qLrpI6U3PmM/UmIS8O-1-7I/AAAAAAAATks/rJSrcPwriQA/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佔了版面最顯眼的地方,一進來就可以看到,但是如果到文章每一頁都會有,看起來就多餘了點,這時候我們可以用簡單的判斷式來處理這件事情。


找到原始碼的位置,如果剛剛有取名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的網站
技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved