Blogger 下拉式選單

22   Comments

Blogger 的分類是採取標籤方式, 適用標籤雲顯示目錄.
如果標籤分類很細又多, 樹狀分類或是下拉式選單才適合瀏覽網站.
我的部落格分類簡單, 使用Flash製作大項目選單即可, 或是使用標籤雲.
詳細分類的選單適合詳盡規劃的個性;而我正巧不是這類人... 

假使你的網頁或部落格需要樹狀分類的目錄, 或是滑鼠移動到選單按鈕可以很酷的自動彈出下拉式選單; 或是在側邊置入橫式選單.
當我們對CSS不是很在行時, 可利用一些小軟體來製作分類按鈕.
到 CSS3 Menu 這個網站下載軟體.  一般的部落客使用它的免費模組選擇性已經很足夠, 假使需要更多新的酷炫選單,可以線上購買升級版.

* Step 1. 打開CSS3 Menu軟體, double click選擇模組,修改樣式.
* Step 2. 點擊按鈕成虛線框的編輯狀態, 填入下方網址等參數.


* Step 3. 增加選單按鈕及子選單按鈕. 達成分類嚴謹的目錄.
* Step 4. 編輯完, " Publish " 將發布成CSS3 menu files和html這兩個檔案.


* Step 5. 檢視發布後的" CSS3 menu_files "資料夾, 裡面有一些png索引圖片(或有設定插入Icon小圖在連結前端). 將這幾張圖片上傳到空間或相簿, 取得圖片網址. 
* Step 6. double click 打開" style.css "文件, 找到同名的png圖片字符, 將圖片網址取代. 如: mainbk.png 更改成 http://xxxxxxxxxxx/mainbk.png


* Step 7. 將修改過的 style.css 文件上傳到空間,取得有效網址.
* Step 8. 打開Blogger範本, 修改HTML. 將以下語法嵌入<head>下方.

<link rel="stylesheet" href="style.css 網址" type="text/css" />

* Step 9. 修改html網址檔案的附檔名, 變成txt文件. 或是點擊html檔案, 用瀏覽器打開網址可以看到選單的樣式. 按右鍵檢視網頁原始碼, 將 <body> </body> 之間的HTML內容複製.




* Step 10. 繼續 *Step 8, 修改HTML範本. 如有部落格標頭名稱, 在 </header> 的下方. 或是 <div class='tabs-outer'> 的上方貼入複製的HTML語法. 完成. 

Author Summary
Blogger 下拉式選單
Subject : Blogger 下拉式選單
Author : - Dream Talker Updated at: 4:33 PM
Votes : 100% - 5.0 - based on 2015
CSS編輯下拉式選單,自動彈出式選單,橫式選單.免費軟體.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見，歡迎參與留言。
◆ Disqus匿名留言，信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言，可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵，留言須使用『@Mark X』在訊息中，以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明 』
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous5:41 PM

    您好，免費的版本主選單只能設定三個嗎？

    ReplyDelete
  2. Unknown2:00 AM

    To @Anonymous :
    看圖一, 工具列有個+號的綠色按鈕可以增加主選單數量.
    先按要插入到哪一個選單旁邊成虛線框編輯狀態, 再加入新選單.
    操作上不是很有把握, 先畫個規劃圖的草稿吧! 從主選單一層一層地編輯, 也比較不容易遺漏.

    ReplyDelete
  3. Anonymous4:29 AM

    您好，再請教一個重要問題。每次有新的文章就必須重新編輯css嗎？

    ReplyDelete
  4. Unknown6:29 AM

    To @Anonymous :
    對於選單我的看法是這樣:
    除非你的需求是像產品網站那樣, 訂購單或是說明,線上客服等等, 需要引導到特定的唯一網址. 否則, 經常更新的日誌,網誌並不需要列入選單.
    選單的最小單位應該是Blogger的標籤. 像是這樣:
    http://xox520.blogspot.com/search/label/Design
    將性質相同的歸類到同一標籤, 讓訪客自行選擇所需. 並不是客人想要買蘋果, 你只拿出了一顆蘋果給客人; 而應該是端出一箱蘋果讓客人選購幾顆他想買的.
    這樣才是選單的意義.

    * 特例 : 如果你想做的是海賊王全集的列表, 將標籤設計成 1~50集, 50~100集...這樣的blogger標籤分類(選單最小單位). 這樣就不必每次修改選單列表.
    需要新增集數子選單時, 再修改html即可;style.css不需要修改.

    ReplyDelete
    Replies
    1. Anonymous3:23 PM

      以上的解說，簡單明瞭，沒想過選單有這層意義，謝謝。

      Delete
    2. Unknown5:59 PM

      彼此經驗交流, 多謝來訪.

      Delete
  5. Anonymous5:10 PM

    CSS3菜單是長得怎樣? 我可以用嗎? CC..

    ReplyDelete
  6. Unknown10:22 PM

    To @Angela :
    妳這個懶女人... CSS Menu的網站裡就有範例給妳看啊!
    我弄了簡單的樣式, 增修到文章裡了. 見 DEMO. Blogger可以使用.

    ReplyDelete
  7. Anonymous12:08 AM

    To @Mark X :
    直接看中文教學比較快嘛～謝囉～CC...
    請教　複製的內容一定要放在blogger css裡面嗎?可以放在新增小工具的html模組嗎?

    ReplyDelete
  8. Unknown3:32 AM

    To @Angela :
    不行放到javascript/html模組裡喔!
    因為它是由CSS與script構成,沒有限定尺寸框架. 妳如果放到javascrit/html模組裡, 雖能看到選單樣式;卻無法顯示選單的彈出狀況. 會被 <body> 遮蔽.
    所以要在Blogger的CSS裡面修改,就可以跨越body和文章的樣式. 彈出式選單才會正常顯示效果.

    ReplyDelete
  9. Jay3:53 AM

    請問,卡在步驟5&6.
    方便解釋清楚這個部分嗎?

    ReplyDelete
  10. Unknown9:01 AM

    To @Jay :
    檢視發佈後的檔案,打開CSS3 menu_files這個資料夾裡面. 某些模組會包含一些圖檔,這是選單顯示時會用到的小背景或是陰影等等作用的圖檔.
    或是在選單的前頭另外附加辨識功能的小圖示,見Step 4的圖解左下,有個增加"Icon"的設定.
    當然, 如果你選擇的模組沒有需要任何圖檔,CSS3 menu_files裡面就不會出現圖檔.

    接著打開style.css這個樣式表檔案.
    裡面有剛才說明的那些圖檔的位置;但它是採用相對路徑來表示. 對Blogger來說,要採取絕對路徑才能夠顯示,所以CSS3 menu_files裡面的那些圖檔要先上傳到空間或是相簿,並取得絕對路徑的"圖片網址".
    然後將這些圖片網址依照style.css原有的位置重新替換上去. (詳視勿遺漏) 見Step 6.

    改好的style.css再上傳到空間取得網址. 即進入步驟7.

    ReplyDelete
  11. Jay2:22 PM

    To @Mark X :

    Thank you so much! 搞懂了.

    ReplyDelete
  12. Anonymous5:36 AM

    這軟體如能將CSS3 menu files和html這兩個檔案輸出成一個html,會更方便.

    ReplyDelete
    Replies
    1. Unknown8:40 AM

      這跟建構網站時子目錄分類的慣性有關, 以方便抽換,修改路徑資料.
      不過這種相對路徑卻無法在Blogger上使用, 所以要辛苦點去修改.

      Delete
  13. Unknown8:43 AM

    當時匆忙做了簡略的Demo, 讓您見笑了!

    ReplyDelete
  14. Unknown3:41 AM

    初建部落格
    http://52gogo.blogspot.tw/
    想請教
    由「翻譯Google」技術提供
    如何修改跳掉下一行
    像您的一樣
    mail:52kevinlai@gmail.com
    3Q..大大

    ReplyDelete
    Replies
    1. Unknown6:22 AM

      ㄟ?! 我剛才好像回復到G+ Message嗎? Blogger這裡也有?

      Hi! Kevin,
      我記得它會自動調整在模組內才對, 不過我不知道我們使用的是同樣程式碼嗎?
      請問您用增加翻譯模組小工具,還是將翻譯程式碼放到HTML/JavaScript?
      Blogger小工具模組有時會因為版型尺寸不夠,內容就跑出界外, 您可以調整一下右側寬度, 有可能是那一行字比版型寬度大.

      如果還不可行, 就移除翻譯模組, 另外新增HTML/JavaScript模組,把程式碼放進去.(當初還沒有翻譯模組,我用這方法)
      有困難再跟我說.

      Delete
    2. Unknown2:53 AM

      您好！將發佈的 files(選擇沒用lcon)上傳到雲端硬碟取的網址貼到html後，只出現字體沒有模組，但用您demo的files確有模組,不知道哪裡出問題？想到頭都白了謝謝！

      Delete
  15. Unknown6:33 AM

    To 黃晴晴
    選單按鈕沒有呈現色彩設計, 表示您的CSS檔案並沒有作用(無效連結的意思), 不過也有可能是files裡面有其他背景小圖沒有上傳取得網址後取代, 例如：mainbk.png 在CSS檔案裡要換成有效的圖片網址.
    不知道您的CSS檔案上傳到哪個雲端硬碟? 假如是 "https" 開頭的網址, 可能您在本機瀏覽器預覽 html 檔案時它不會呈現, 會被安全設定阻擋. 但正式放到網頁或Blogger中它才可以正常顯示.

    如果都不是以上的問題, 請附上CSS連結讓我看看.

    ReplyDelete
    Replies
    1. Unknown8:51 AM

      已從g+傳送連結不知道有沒收到,謝謝！

      Delete
    2. Unknown9:58 AM

      1. 首先在 <head> 下方： <link rel="stylesheet" href="網頁欄_files/css3menu1/style.css" type="text/css" />
      這一段沒有使用絕對網址. 對著CSS檔案按右鍵查看detail(不知中文版叫啥名? 細節? 詳細項目?) 複製它的網址修改到 "網頁欄.html" 裡面. 不過Google Drive給的檔案網址一律是 "https" 開頭的, 在電腦內預覽時請先暫時允許載入才能看到效果.

      2. 選單的連結尚未建立, 見 Step 4 那張圖左下側 "Link" 位置依序填入. (可能您還在測試中所以沒填)

      3. 上傳資料時無須連原本的資料夾都一起上傳. 因為不是採用目錄式的階層資料, 只需要單獨將 style.css 這個檔案先上傳, 取得絕對網址後(您現在是使用相對網址) 再填入 "網頁欄.html". 不過您應該不會使用到網頁欄這個檔案, 其實也不用上傳html檔案. 因為Blogger只會使用到 style.css 和 Step 9 最後一張圖反白複製的部份.

      4. 上傳至雲端硬碟的檔名最好都使用英數命名比較好.

      Delete

SUBSCRIBE TO POST COMMENTS
Subscribe to:Post Comments( Atom )