很多部落格作家要求在右手欄的菜單設定十分酷炫的圖標作為菜單按鈕，結果花了很多時間在修改代碼的步驟上，其實我們可以使用很簡單的方法就達到注入圖標和跳轉鏈接的功能
教學目錄 | 上一篇教學：製作部落格文章分類與菜單
製作部落格右手欄菜單
影片解說
使用以下按鈕訂閱我們的 YouTube 頻道
我的右手欄菜單的設計概念
只有三種鏈接，包括文章鏈接、文化臟標籤頁鏈接和主要頁面鏈接
文章鏈接
顯示本站所有教學的目錄，放在第一個方便遊覽者點擊查閱標籤鏈接
我知道和主頁的菜單有重複，但如果是手機版本的話，右手欄就會自動變成目錄頁面了，為了增加遊覽者查看內容的機會，所以在這裡也放置文章標籤頁的鏈接，除此也會輸入一些符號讓文字按鈕變得更醒目主要頁面鏈接
重要的頁面如關於我們與聯絡我們的頁面鏈接，方便遊覽者了解身為作者的背景和聯繫作者接下來我們需要準備所有的鏈接並粘貼到 WordPad 備用
如何獲得部落格頁面鏈接
- 在部落格後台點擊 Pages 然後點擊頁面右手邊眼睛圖標，這是頁面會自動打開
- 複製網址欄位的的 URL 並粘貼到 WordPad 備用
- 然而複製文章鏈接也可以使用同樣的方式，在後台點擊 Post 然後點擊眼睛圖標，在文章頁面複製鏈接
- 至於文章標籤頁鏈接可以參考上一篇教學文章（這裡不重複同樣的教學）
完成以上步驟，我就有 7 個鏈接在 Wordpad 備用了
新增 Post 用來編輯文字排版
- 我在文章編輯區輸入我要的文字（就好像菜單一樣的排版）
- 點擊 Insert special characters，然後選擇我需要的符號（我選了組簡單的向右符號）
- 選定我要編輯的文字，點擊 Insert or edit link
- 然後將複製的鏈接粘貼在 Paste or search for a link
- 其他兩個空格不要勾選
- 之後點擊儲存
注：其餘六個文字也是依照上方的步驟注入鏈接
轉換代碼和粘貼到部落格 HTML 插件
- 轉換編輯模式成為 HTML View，然後複製全部代碼
- 回到部落格後台，點擊 Layout，點擊 Sidebar 下方的 Add Gadget，這時會有新的視窗彈出來
- 在 add Gadget 視窗找到 HTML/JavaScript 的選項，點擊【+】增加插件，界面會再增加一個 Configure HTML/JavScript 的視窗
- 接著在新的視窗粘貼剛才複製的代碼，然後點擊儲存
我使用以上的步驟來製作 Blog.MatoTheme.Com 的右手欄按鈕，希望這次的分享能幫助到你
小結
或許有很多新手會很糾結這樣的菜單按鈕太過簡單，但是我認為簡單是很好的，因為你別以為這樣的菜單你只需要製作一次就永遠的用著……
考慮到在未來有可能增加文章標籤或其他重要的頁面，所以我們不需要在右手欄製作很華麗的按鈕，這樣是很花時間的，尤其對於 HTML code 不熟悉的朋友來說，我認為做到這樣的菜單欄已經很好了
希望這個建議能給到你有點參考價值
下一篇教學：如何移除 Powered By Blogger 的圖標與鏈接
Comments
Post a Comment