close

今天來介紹頁尾，如果你還不知道什麼是HTML、CSS的話建議請先去看Ep.1。
什麼是html、css，痞客邦 HTML 和 CSS 完全指南 - 維特學習筆記 Ep.1

頁尾（Footer）是部落格或網站最底部的區塊，通常會包含網站的相關資訊或連結，並且可以進一步提高網站的使用體驗和專業感。頁尾設計在痞客邦等平台上可以增添網站的層次感，便於訪客快速找到聯絡資訊、法律聲明、隱私政策、相關連結等。
螢幕擷取畫面 2024-11-12 150051.png

1. 頁尾的主要功能

  • 提供基本資訊：包括部落格主題、作者資訊、聯絡方式等。
  • 導覽連結：快速導覽到部落格其他重要頁面，例如「關於我」「聯絡我們」等。
  • 社群媒體連結：方便讀者關注其他平台上的最新動態。
  • 法律和隱私政策：包含著作權、隱私政策的連結以保障內容和訪客隱私。

2. 設計頁尾的最佳實踐

  • 簡潔明了：避免頁尾內容過於擁擠，重點突出主要資訊即可。
  • 視覺一致性：使用和整體網站一致的配色方案和字體，提升整體性。
  • 響應式設計：讓頁尾能夠在不同裝置上良好顯示。
  • SEO 友好：增加與部落格主題相關的關鍵字或連結，提升頁尾的 SEO 效果。

3. 在痞客邦中設定頁尾

3-1. 了解頁尾

▼首先我們先來了解頁尾的名稱，在首頁開啟開發者工具(F12)，點選頁尾區域時就能看到頁尾是在 id = footer當中。
螢幕擷取畫面 2024-11-12 161726.png
▼在痞客邦HTML架構中也有說明頁尾的區域範圍。
螢幕擷取畫面 2024-11-12 161924.png
▼你如果想對頁尾做顏色、樣式做修改的話，到CSS區找到#footer區做修改即可。
螢幕擷取畫面 2024-11-12 162451.png

3-2. 新增頁尾版權宣告

▼原先的頁尾樣式一般都會是這樣子的。
螢幕擷取畫面 2024-11-12 144504.png
▼先至痞客邦後台的「側欄管理」中選擇「頁尾描述」齒輪按鈕。
螢幕擷取畫面 2024-11-12 144602.png
▼直接輸入你想要的版權宣告樣式，不侷限中英文。
螢幕擷取畫面 2024-11-12 144800.png
▼完成後就會呈現這個樣子。
螢幕擷取畫面 2024-11-12 144815.png

3-3. 移除痞客邦頁尾連結及宣告

在痞客邦HTML架構中可以知道

◎ #bottom是”頁尾超連結”
◎ .bottom-skiplink是”回到頁首\回到主文”
◎ .bottom-pixnet是”PIXNET痞客邦\申請帳號\會員服務專區”

所以我們需要將這些設定做關閉動作，關閉的話我們可以選擇使用 {display:none;} 來進行移除
 

css
#bottom{display:none;} /*關閉頁尾超連結*/
/*第一行無效再添加二三行*/
.bottom-skiplink{display:none;} /*關閉回到頁首\回到主文*/ 
.bottom-pixnet{display:none;} /*關閉PIXNET痞客邦\申請帳號\會員服務專區*/


螢幕擷取畫面 2024-11-12 145015.png

將這段程式碼複製於css原始碼結尾即可，完成就會像這樣
螢幕擷取畫面 2024-11-12 145030.png

3-4. 添加連結至宣告中

對於沒有連結導向，你的頁尾宣告就變得一般
螢幕擷取畫面 2024-11-12 1450301.png
所以你可以添加基本的html連結語法<a href=””></a>來豐富你的頁尾。
螢幕擷取畫面 2024-11-12 145233.png

頁尾描述 html語法

<p>2024 - All Rights Reserved. Designed and Developed by <a href="版權所有人連結" target="_blank" title="滑鼠移至上方顯示名稱">版權所有人</a></p>

完成後就會能夠連結導向囉。
螢幕擷取畫面 2024-11-12 1452521.png

3-5. 頁尾多個粉絲團連結應用

3-5-1. 一般連結導向版本

【CSS教學】痞客邦頁尾樣式修改，製作成有質感的頁尾 - 維

頁尾描述

<p>© 2024 我的部落格 | 聯絡信箱：
<a href="mailto: contact@example.com " target="_blank"
title=" 寄信至contact@example.com ">
contact@example.com
</a> </p>

<a href=" https://facebook.com " target="_blank"
title=" 跳轉facebook "> Facebook　　　　
</a>

<a href=" https://instagram.com " target="_blank"
title=" 跳轉Instagram "> Instagram　　　　
</a>

<a href=" https://twitter.com " target="_blank"
title=" 跳轉Twitter "> Twitter
</a>

※ 語法介紹：mailto:.... 是電子信箱連結導向，tel:....... 是撥打電話連結導向，放在的位置跟所有連結一樣。

3-5-2. 一般連結導向版本

螢幕擷取畫面 2024-11-14 101637.png螢幕擷取畫面 2024-11-14 101444.png
 

頁尾描述 HTML
<ul class="wrapper">
    <li class="icon facebook">
        <span class="tooltip">Facebook</span>
            <a href="https://輸入你的臉書連結.com/">
                <svg
                viewBox="0 0 320 512"
                height="1.2em"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                >
                <path
                d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
                ></path>
                </svg>
            </a>
    </li>
    <li class="icon twitter">
        <span class="tooltip">Twitter</span>
            <a href="https://輸入你的推特連結.com/">
                <svg
                height="1.8em"
                fill="currentColor"
                viewBox="0 0 48 48"
                xmlns="http://www.w3.org/2000/svg"
                class="twitter"
                >
                    <path
                    d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"
                    ></path>
                </svg>
            </a>
    </li>
    <li class="icon instagram">
        <span class="tooltip">Instagram</span>
            <a href="https://輸入你的IG連結.com/">
                <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1.2em"
                fill="currentColor"
                class="bi bi-instagram"
                viewBox="0 0 16 16"
                >
                    <path
                    d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
                    ></path>
                </svg>
            </a>
    </li>
</ul>
<p>© 2024 我的部落格 | 聯絡信箱：
<a href="mailto: contact@example.com " target="_blank"
title=" 寄信至contact@example.com ">
contact@example.com
</a> </p>
CSS
ul {list-style: none;}
 
.example-2 {
display: flex;
justify-content: center;
align-items: center;
}
 
.example-2 .icon-content {
margin: 0 10px;
position: relative;
}
 
.example-2 .icon-content .tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
font-size: 14px;
transition: all 0.3s ease;
}
 
.example-2 .icon-content:hover .tooltip {
opacity: 1;
visibility: visible;
top: -50px;
}
 
.example-2 .icon-content a {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #4d4d4d;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
 
.example-2 .icon-content a:hover {
box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
 
.example-2 .icon-content a svg {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
}
 
.example-2 .icon-content a:hover {color: white;}
 
.example-2 .icon-content a .filled {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #000;
transition: all 0.3s ease-in-out;
}
 
.example-2 .icon-content a:hover .filled {height: 100%;}
 
.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
background-color: #1db954;
}
.example-2 .icon-content a[data-social="pinterest"] .filled,
.example-2 .icon-content a[data-social="pinterest"] ~ .tooltip {
background-color: #bd081c;
}
.example-2 .icon-content a[data-social="dribbble"] .filled,
.example-2 .icon-content a[data-social="dribbble"] ~ .tooltip {
background-color: #ea4c89;
}
.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
background-color: #0088cc;
}

/* From Uiverse.io by PriyanshuGupta28 */ 

3-5-3. 官網式頁尾
螢幕擷取畫面 2024-11-12 150051.png

頁尾描述 html
<footer id="footer">
    <div class="footer-section">
      <div class="footer-box" id="store-info">
        <p>◆ 店家資訊</p>
        <p>範例資訊店家訊息</p>
        <p>Sample store information</p>
        <p>統一編號：12345678</p>
        <p>店家地址：台北市信義區範例路123號</p>
      </div>
 
      <div class="footer-box" id="contact-info">
        <p>◆ 聯絡資訊</p>
        <p>范利 先生</p>
        <a href="tel:01123456" target="_blank">市內電話：01-123456</a><br>
        <a href="tel:0912345678" target="_blank">行動電話：0912345678</a><br>
        <a href="tel:https://line.me/ti/p/xxxxxxxx"target="_blank">Line ID：0912345678</a><br>
        <a href="mailto:example@example.com.tw" target="_blank">電子信箱：example@example.com.tw</a>
      </div>
 
      <div class="footer-box" id="renovation-example">
        <p>◆ 案件分享</p>
        <a href="https://cellus709.pixnet.net/blog" target="_blank">
        <img src="https://pic.pimg.tw/mingchenblog8/1728626464-794649747-g_l.jpg" alt="案件分享圖片">
        </a>
      </div>
    </div>
   
    <div class="footer-copyright">
      <p>&copy; 2024 - All Rights Reserved. Designed and Developed by
        <a href="https://portaly.cc/witt3c" target="_blank" title="維特數位生活">witt3c</a>
      </p>
    </div>
  </footer>
css
#footer {
    background-color: #222; /* 設置頁尾的背景顏色為深色 */
    color: #fff; /* 頁尾文字的顏色為白色 */
    text-align: center; /* 將頁尾文字內容居中對齊 */
    padding: 20px 25px 8px 25px; /* 頁尾內部與邊框之間的內距 */
    margin: 0; /* 移除頁尾的外距 */
    font-size: 14px; /* 頁尾文字的大小 */
  }
  .footer-section {
    display: flex; /* 使用 flexbox 佈局來排列子元素 */
    justify-content: space-around; /* 子元素（box）之間平均分佈間距 */
    flex-wrap: wrap; /* 如果空間不足，子元素會自動換行 */
    padding-bottom: 58px; /* 在 footer-section 底部增加間距 */
  }
  .footer-box {
    width: 30%; /* 每個區塊（box）的寬度佔 30% 的父元素 */
    margin: 10px; /* 每個區塊的外部間距 */
  }
  .footer-box p {
    margin: 5px 0; /* 每個段落的上下間距 */
    color: #fff; /* 段落文字顏色設為白色 */
  }
  /* 讓標題和內容之間有距離 */
  .footer-box p:first-of-type {
    margin-bottom: 20px; /* 第一個段落（標題）和下一個內容之間的距離 */
  }
  /* 修改連結文字的顏色與一般文字相同 */
  .footer-box a {
    color: #fff; /* 使用與周圍文字相同的顏色 */
    text-decoration: none; /* 移除連結的預設底線 */
  }
  #footer a:hover {
    text-decoration: underline; /* 當滑鼠懸停時，連結添加底線 */
  }
  .footer-box a:hover {
    text-decoration: underline; /* 當滑鼠懸停時，連結添加底線 */
  }
  #renovation-example img {
    width: 300px; /* 圖片的寬度設定為 300px */
    height: auto; /* 高度自動調整，保持圖片比例 */
    border-radius: 6px; /* 圖片邊緣的圓角設置 */
  }
  #footer a {
    color: #fff; /* 頁尾中的連結顏色設置為較淡的灰色 */
    text-decoration: none; /* 移除連結的預設底線 */
  }
  .footer-copyright {
    font-size: 12px; /* 版權信息文字的大小 */
    color: #bbb; /* 版權信息的文字顏色設置為淡灰色 */
    padding-top: 10px; /* 版權信息與上方內容之間的間距 */
  }

3-5-4. 旅遊類型頁尾

螢幕擷取畫面 2025-01-10 153819.png

前往 https://witttravel.pixnet.net/blog 查看範例

頁尾描述 html
<div class="footer-container">
<div class="footer-content">
      <!-- 左側輪播區 -->
      <div class="carousel">
        <div class="carousel-image">
          <img src="https://pic.pimg.tw/witttravel/1736410246-1770604491-g.png" alt="圖片1">
        </div>
        <div class="carousel-description">
          <p><a href="https://cellus709.pixnet.net/blog" target="_blank">維特數位生活 - ３Ｃ、生活、開箱</a></p>
          <p><a href="https://witttravel.pixnet.net/blog" target="_blank">跟維特去旅行 - 美食、景點、住宿</a></p>
          <p><a href="https://uconge88.pixnet.net/blog" target="_blank">理科仔の維特 - 裝修、水電、避雷</a></p>
        </div>
      </div>
 
      <!-- 台灣美食景點區 -->
      <div class="food-travel-section">
        <h3>台灣美食 景點</h3>
        <ul class="food-travel-list">
          <li>
            <span class="region">北部</span>
            <span class="cities">
              <a href="https://witttravel.pixnet.net/blog/category/2508940">基隆</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508946">台北</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508943">新北</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508955">桃園</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508958">新竹</a>
            </span>
          </li>
          <li>
            <span class="region">中部</span>
            <span class="cities">
              <a href="https://witttravel.pixnet.net/blog/category/2508961">苗栗</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508964">台中</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508970">南投</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508967">彰化</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508973">雲林</a>
            </span>
          </li>
          <li>
            <span class="region">南部</span>
            <span class="cities">
              <a href="https://witttravel.pixnet.net/blog/category/2508976">嘉義</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508982">台南</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508985">高雄</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508988">屏東</a>
            </span>
          </li>
          <li>
            <span class="region">東部</span>
            <span class="cities">
              <a href="https://witttravel.pixnet.net/blog/category/2508952">宜蘭</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508994">花蓮</a>、
              <a href="https://witttravel.pixnet.net/blog/category/2508991">台東</a>
            </span>
          </li>
        </ul>
      </div>
    </div>
 
    <!-- 版權宣告 -->
    <div class="footer-declaration">
      <p>&copy; 2024 - All Rights Reserved. Designed and Developed by
        <a href="https://panel.pixnet.cc/#/" target="_blank" title="進入後台">witt3c</a>
      </p>
    </div>
  </div>
css
.footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 80px 80px 20px 80px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
 
 .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
 
  .carousel {
    width: 60%;
    text-align: center;
  }
 
  .carousel-image img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    animation: image-rotation 3s infinite;
  }
 
  .carousel-description {
    margin-top: 20px;
  }
 
  .carousel-description a {
    font-size: 16px;
    color: #0056b3;
    line-height:35px;
  }
 
  @keyframes image-rotation {
    0%, 33% {
      content: url('https://pic.pimg.tw/witttravel/1736410246-1770604491-g.png');
    }
    34%, 66% {
      content: url('https://pic.pimg.tw/witttravel/1736410246-3903779133-g.png');
    }
    67%, 100% {
      content: url('https://pic.pimg.tw/witttravel/1736410246-121585735-g.png');
    }
  }
 
  .food-travel-section {
    width: 40%;
    padding:120px 20px 20px 20px;
  }
 
  .food-travel-section h3 {
    font-size: 24px;
    color: #000;
    font-weight: 400;
    margin-bottom: 30px;
  }
 
  .food-travel-list {
    list-style: none;
    padding: 0;
  }
 
  .food-travel-list li {
    margin: 15px 12px;
    display: flex;
    align-items: left;
  }
 
  .region {
    background-color: #73e5ff;
    color: #000;
    font-weight:400;
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 6px;
    font-size: 16px;
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
  }
 
  .cities {
    font-size: 16px;
    padding: 5px
  }
 
  .cities a {
    color: #0056b3;
    text-decoration: none;
    margin-right: 5px;
  }
 
  .cities a:hover {
    text-decoration: underline;
  }
 
  .footer-declaration {
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    color: #999;
  }
 
  .footer-declaration a {
    color: #0056b3;
  }

頁尾的設計不僅能夠增添網站的專業度，也為訪客提供了便捷的資訊導覽途徑。透過合理的內容與樣式安排，頁尾區塊不僅美觀且具備實用性，是建立良好部落格體驗的關鍵之一。維特學習筆記主要作為維特上網爬文了解，以及逐步試錯練習成果展示，維特參考的文章連結也都會放置在文章最末端，大家也要多多去支持原作者。也歡迎各位先進，如果有更好的方式或是你覺得如何更好，都請不要吝嗇多多指教。

如果你有引用維特的程式碼歡迎可以在底下留言讓我知道，讓我有更多動力。

打造屬於自己的痞客邦 - 維特學習筆記 - 目前瀏覽 Ep.3

1. 學習筆記前文 - Ep.0
2. 痞客邦 HTML 和 CSS 完全指南 - Ep.1
3. 在側欄、文章中插入FB粉絲團 - Ep.2

4. 頁尾樣式修改 - Ep.3

5. 移除文章底部熱搜、猜你喜歡小廣告 – Ep.4
6. 移除、修改閒置廣告樣式 – Ep.5

 

 

 

 

 

 

arrow
arrow
    文章標籤
    頁尾設計 痞客邦頁尾設計 痞客邦頁尾宣告 痞客邦頁尾描述 痞客邦頁尾移除 痞客邦頁尾連結 痞客邦文章尾端 痞客邦文章尾端設計 痞客邦css教學 痞客邦html教學 痞客邦設計 痞客邦教學 痞客邦diy 痞客邦頁尾宣告設計 痞客邦樣式 痞客邦樣式修改 痞客邦顏色修改 痞客邦程式 痞客邦htmlcss qu3dk41;css
    全站熱搜
    創作者介紹
    創作者 小維 的頭像
    小維

    維特數位生活

    小維 發表在 痞客邦 留言(0) 人氣()