投資、科技、生活

5 分鐘網誌加上照片輪播功能 - 2023更新、採用 Bootstrap

增加 Blogger 網誌照片、圖片自動輪播效果

照片、圖片自動輪播 (image slider) 能提高網頁、網誌的吸引力，讓內容看起來更專業、提高點擊率，跟著下面的簡單程序，5 分鐘就能輕鬆的讓網誌、部落格增加這個專業的功能！

《 4 張圖片輪播的 demo 》







1. 備份網誌

新增任何網誌的版面配置或修改主題，請先記得備份目前正常運作的設定喔！

  • 登入網誌後，到左上方的主選單選取向下點選「主題」


  • 點選備份之後，選擇要備份的位置跟檔案名稱


  • 將原本運作正常的主題儲存備份完成後，就可以著手開始加入照片輪播功能了！

2. 增加 Bootstrap CSS、jQuery 插件

圖片輪播功能需要用到 Bootstrap CSS、jQuery 插件，非常容易、不用害怕，首先需要確認網誌的「主題」(Template) 是否已有相關設定，在 Blogger 主頁面選擇主題，之後點選「編輯 HTML」



進入 HTML 編輯頁面後，Mac 的話按 Command + F 鍵、Windows 的話 Control + F 鍵開啟搜尋對話框。

在搜尋對話框輸入"jquery.min.js"，確認版本是否為 3.6.3、是否已包含在主題 (Template) 內。

如果沒有的話將以下程式碼複製加到 </head> 之前 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'/>

注意：部分 Google 的主題模板放在 </head> 之後可能會出現問題，如果發生問題，可以嘗試放在 <head> 之後







3. 編輯 HTML

設定完成後，接下來是在網誌的頁面加上輪播圖片、設定換頁時間、標題等參數，進入文章編輯模式，切換到 HTML 檢視模式。

將以下的 HTML 程式碼加到文章內需要增加圖片輪播的位置

  • 將 "ImageURL" 替換為實際圖片的網址
  • 可以增加 carousel-caption 的 ‘圖片標題’ 、‘圖片說明' ，下面範例只增加在第 1 張圖片內
  • <img class="center-block" 可以將大小不同的圖片置中擺放
<!-- 創建一個輪播容器 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

  <!-- 創建一個指示器列表 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  
  <!-- 創建一個圖片列表 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="center-block" src="ImageURL1" alt="First Slide" />
      <div class="carousel-caption">
        <h3>圖片 1 標題</h3>
        <p>圖片 1 說明</p>
      </div>
    </div>
    
    <div class="carousel-item">
      <img class="center-block" src="ImageURL2" alt="Second Slide" />
    </div>
    
    <div class="carousel-item">
      <img class="center-block" src="ImageURL3" alt="Third Slide" />
    </div>
  </div>

  <!-- 創建一個上一張和下一張按鈕 -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left”></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right“></span>
    <span class="sr-only">Next</span>
  </a>
</div>

如果要圖片能夠被點擊、連結到特定網頁，可以在 <img... /> 之前增加 <a href=..> 的敘述： 

<a href=“Your LINK"><img src=“IMAGE URL” alt=“ALT TEXT GOES HERE" /></a></li>

完成後就可以得到類似前面的輪播效果了～

上面 data-interval 的數值是用來控制播放速度，如果不希望圖片自動輪播、改用手動控制，可以將 2000 改為 false，如果要放慢速度，則改成高於 2000 的數字。







0 comments