在Blog新增換頁橫幅--廖士翔的隨手記

在Blog新增換頁橫幅

2018年9月23日星期日

原本首頁的橫幅，只有Google Blogger預設的一張照片欄位。但我們還是可以透過HTML和CSS語法，變成換頁的橫幅，同時也能加上說明文字跟超鏈結，讓網頁更加豐富。

這種換頁的橫幅，英文稱為 slide 或 banner，中文的話也有人稱作幻燈片。相關語法我參考Slider這個網頁後，簡化一些東西而來。在下面的方塊中，大家可以全選複製後，進行修改。

#sliderFrame {
    position: relative;
    width: 700px;
    margin: 0 auto 40px;
}

#slider {
    width: 700px;
    height: 306px;
    /* Make it the same size as your images */
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihrY6rgzCQkywZugkCLWVaXwh710ohOqZhDNeY2FV59T9kk5zkrYHqOPF1mYYHpKBx1zJRBn4sozH8QWPnb0EyRACy2aenMtXEvLwfNLhXKABcEsPouub31q12nQY-5QSKmju28grhMrTF/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    box-shadow: 0px 1px 5px #999999;
}

#slider img {
    position: absolute;
    border: none;
    display: none;
}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {
    z-index: 2;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Caption styles */

div.mc-caption-bg,
div.mc-caption-bg2 {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0px;
    bottom: 15px;
    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;
}

/* ------ built-in navigation bullets wrapper ------*/

div.navBulletsWrapper {
    top: 320px;
    left: 280px;
    /* Its position is relative to the #slider */
    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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22qYzU-36MAyRC-1GEJIwhxJrTrvzDhq80rQaqE-xp5GkVdfNyJt9NAIAVS9YPgx9md7LAhCtbcywAyBxsv5WSmingU2Id3CeiWyVQKf3M_eUcE3Iu9LfJgiFRfy0IoCnq56kuf4mcxDf/s1600/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 {
    -webkit-transform: translate3d(0, 0, 0);
    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="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="slider">
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvJ-wXKINKaNFV0-MWHSiFdhHhxvD91MEK8Bilpgzf9nnX95SCeBVJrFNJeZz5S7nLPxf1Gqq5jJW6DNx3doWp0X6ESDiiQmlg-Bp9TmLWvj8zPlg83oOYuuCcinjEhbgzmj4SiuFnwKL/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpYG4ou1brcoaEXX09QYwTOUKgculq9cl9RqFayhmXZtle9z6Ba8LQknbIYNDxibnlAORMMBxFEO81-kiMf2AvSVlGL-G0ZAb7VSyFAPrKCsvlCPN3MzE7Wonx30nLu1SKjQvgVM53KH0/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMALUkxE7uyHrOaMJlxiqHchAXHlPW0oEnRzz6Ig1Rxsu1Z4AMAYYHrc9wBm6EZfBXLY8paL3UZzIsnQYWNHfrjqQThi2BEsk7MAInxegtEmIBYTv71QqOOw9HE-ws2_bt2BAB2rjK7RoA/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2rI2rFjaOfKgkau8rhnKlK04RAtpNvlKK4iQuZ5Jx1YX9zQ0cQ8vq6pmSgdeDZLkvn4_M6Qptq1xBAYdM5w092jlkGW7D-8UJ1GB2ahfgDhQnFH0csJ-_Y6gKIAmzZhKskaTyGBNM77gy/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9exSCbVqeoa_rf-y1JbdGae-REnxHFdUJ2PaMJOIOYU7oqbFCxLctW1OS5Knhl4owEVxegHGKfrWF3x2Y_GciG43cadOA-9QkOriVbmq_t_A4K_wm74WxWJVHzTmKtfOSklSoJNQXYDh1/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
    </div>
<div id="htmlcaption1" style="display: none;">
        Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
    </div>
<div id="htmlcaption2" style="display: none;">
        <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
    </div>
</div>

上述的語法，可以直接貼在blogger的HTML/JavaScript小工具裡面。然後<style>到</style>之間的是CSS程式語法，原則上不太需要更改。但如果想調整橫幅大小、字體顏色、說明字位置、按鈕位置等等的，可以參照程式語法間的說明文字更動。以下介紹如何更換橫幅的圖片、說明、超鏈結。

<div id="sliderFrame">
    <div id="slider">
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvJ-wXKINKaNFV0-MWHSiFdhHhxvD91MEK8Bilpgzf9nnX95SCeBVJrFNJeZz5S7nLPxf1Gqq5jJW6DNx3doWp0X6ESDiiQmlg-Bp9TmLWvj8zPlg83oOYuuCcinjEhbgzmj4SiuFnwKL/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpYG4ou1brcoaEXX09QYwTOUKgculq9cl9RqFayhmXZtle9z6Ba8LQknbIYNDxibnlAORMMBxFEO81-kiMf2AvSVlGL-G0ZAb7VSyFAPrKCsvlCPN3MzE7Wonx30nLu1SKjQvgVM53KH0/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMALUkxE7uyHrOaMJlxiqHchAXHlPW0oEnRzz6Ig1Rxsu1Z4AMAYYHrc9wBm6EZfBXLY8paL3UZzIsnQYWNHfrjqQThi2BEsk7MAInxegtEmIBYTv71QqOOw9HE-ws2_bt2BAB2rjK7RoA/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2rI2rFjaOfKgkau8rhnKlK04RAtpNvlKK4iQuZ5Jx1YX9zQ0cQ8vq6pmSgdeDZLkvn4_M6Qptq1xBAYdM5w092jlkGW7D-8UJ1GB2ahfgDhQnFH0csJ-_Y6gKIAmzZhKskaTyGBNM77gy/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9exSCbVqeoa_rf-y1JbdGae-REnxHFdUJ2PaMJOIOYU7oqbFCxLctW1OS5Knhl4owEVxegHGKfrWF3x2Y_GciG43cadOA-9QkOriVbmq_t_A4K_wm74WxWJVHzTmKtfOSklSoJNQXYDh1/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
    </div>
<div id="htmlcaption1" style="display: none;">
        Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
    </div>
<div id="htmlcaption2" style="display: none;">
        <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
    </div>
</div>

基礎-文字、圖片、超鏈結修改：

　　每張橫幅的組合都相同，都算是HTML基本語法，只要依序更改即可。

a href，後面接點這張橫幅之後要導向的網頁，填入#表示留在原網頁
img src，後面接圖片存放的位置，建議每張圖片都要一樣大
alt，後面接橫幅的說明文字，如果這個文字組成複雜，還要加超鏈結等，就必須要用進階的修改語法，在其中填上「#物件名稱」

基礎-文字、圖片、超鏈結修改：

　　如果說明文字要包含圖片、超鏈結等等，就必須用div再定義一個「物件」。
　　<div id="htmlcaption2" style="display: none;">
　　div id後頭，請填入物件的名稱，再進行下面的文字填寫。例如：

純文字超鏈結做說明

a href，後面接點這張橫幅之後要導向的網頁
target，表示網頁框架，如果跳出新視窗，後頭請記得接"_blank"

上述修改之後，就能做出上面橫幅的特效。至於說變換的特效等等細節，大家也可以參考每段語法的說明文字，自己試著修改看看。另外在menucool.com，也有其他網頁特效教學，可以參考看看。

Subscribe to Posts | Subscribe to Comments

Navigation

Hot Articles

Popular Posts

Top News

在Blog新增換頁橫幅

Leave a Reply

網誌存檔

文章分類

關於我自己