編輯下拉式選單

On: 7/17/2014  In: 基本課程, 課程  No comments

如果想了解 基本 Blogger 要如何使用，請參照 Google Blogger 說明。

幾乎所有網上看到的樣板，都需要編輯版面範本的HTML，最常用到的是，編輯網頁上看來很專業的下拉式選單。其實非常簡單，只是拷貝網址連結，改改文字而已。

步驟 1 上傳樣板

先上傳 Blooger 樣板範本的  .xml 檔案。

步驟 2  編輯範本HTML

我們只需要找出下拉式選單，然後填入連結，和文字。

在編輯範本HTML中，先開起搜尋  CTRL+F。

找尋下拉式選單中有的英文字，這些字請不要是 Home 或是 Blog，其他的英文字都可以。一個單字會有一個屬於它的下拉式選單。

以 Contact 為例：

<li><a href='#'>Contact</a>

<ul class='children'>

<li><a href='#'>Dvd</a></li>

<li><a href='#'>Games</a></li>

<li><a href='#'>Software</a></li>

</ul>

</li>

基本HTML 結構： <xxx> 內容 </xxx> ，有點像左右括弧一樣。

下拉式選單的基本結構就是：<li> ………</li>，而

<ul class=‘children'>和</ul>中間就是子選單的內容。

<a href='#'>Contact</a>

#：就是要放連結的地方連結。

所以改好連結和文字就如：

<li><a href='#'>課程</a>

<ul class='children'>

<li><a href='http://www.500ntd.com/search/label/%E5%9F%BA%E6%9C%AC%E8%AA%B2%E7%A8%8B'>基本</a></li>

<li><a href='http://www.500ntd.com/search/label/%E9%80%B2%E9%9A%8E%E8%AA%B2%E7%A8%8B'>進階</a></li>

<li><a href='http://www.500ntd.com/search/label/%E5%B0%8F%E6%92%87%E6%AD%A5'>小撇步</a></li>

</ul>

</li>

綠色斜線部分是連結；藍粗體是選單的文字。

如果不需要這麼多選項，刪除就OK了！

[教學]在blogger建立下拉式導覽列

[教學]在blogger建立下拉式導覽列

在blogger加上導航列和高亮顯示當前頁面的導航列都會了，
那麼下拉式(階層式)導覽列又要怎麼做呢？無須用javascript或其他外掛，
僅需在CSS上定義blogger內建的標記值就可以輕鬆達成囉！
一樣請務必記得在實做以前儲存完整範本，以下，就來step by step吧！

• 首先，勾選展開小裝置範本→利用ctrl+F找到]]></b:skin>，
  在它前面加上下面這段程式碼(字體顏色不同的地方是圖片及色碼
  ，都可以依照自家版型需求隨意替換)：/* ----- NAV MENU ----- */
  #navMenu {
  width: 910px;
  height: 35px;
  background:#deb8b8url
  (https://ihbqkg.bay.livefilestore.com/
  y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_
  u2q2zow8T3-QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
  color: #b56666;
  margin: 0 auto 0;
  padding: 0;
  font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
  border-top: 1px solid #debeb8;
  border-bottom: 1px solid #FFFFFF;
  }
  #navMenuleft {
  width: 680px;
  float: left;
  margin: 0;
  padding: 0;
  }
  #nav {
  margin: 0;
  padding: 0;
  }
  #nav ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li a, #nav li a:link, #nav li a:visited {
  color: #b56666;
  display: block;
  text-transform: capitalize;
  margin: 0;
  padding: 9px 15px 8px;
  font: normal 15px Century Gothic, Times New Roman;
  }
  #nav li a:hover, #nav li a:active {
  background:#deb8b8;
  color: #b56666;
  margin: 0;
  padding: 9px 15px 8px;
  text-decoration: none;
  }
  #nav li li a, #nav li li a:link, #nav li li a:visited {
  background:#deb8b8url
  (https://ihbqkg.bay.livefilestore.com/
  y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_u2q2zow8T3-
  QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
  width: 150px;
  color: #000;
  text-transform: lowercase;
  float: none;
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid #deb8b8;
  border-left: 1px solid #deb8b8;
  border-right: 1px solid #deb8b8;
  font: normal 14px Century Gothic, Times New Roman;
  }
  
  #nav li li a:hover, #nav li li a:active {
  background: #deb8b8;
  color: #b56666;
  padding: 7px 10px;
  }
  #nav li {
  float: left;
  padding: 0;
  }
  #nav li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 170px;
  margin: 0;
  padding: 0;
  }
  #nav li ul a {
  width: 140px;
  }
  #nav li ul ul {
  margin: -32px 0 0 171px;
  }
  #nav li:hover ul ul, #nav li:hover ul ul ul,
  #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
  }
  #nav li:hover ul, #nav li li:hover ul,
   #nav li li li:hover ul, #nav li.sfhover ul,
   #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
  }
  #nav li:hover, #nav li.sfhover {
  position: static;
  }
• 再找到下面這段程式碼，若找不到就掐頭去尾留中間找找看類似區段
  (例如ctrl+F搜尋自己部落格名稱)。

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格名稱' type='Header'/>
</b:section>
</div>

• 在這段程式碼下方加上自訂義的下拉式導航列，
  不同顏色的標籤分屬不同階層(要幾層有幾層)：
• <div id='navMenu'>
  <div id='navMenuleft'>
  <ul id='nav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='欲連結網址'>News</a></li>
  <li><a href='欲連結網址'>Life</a>
  <ul>
  <li><a href='欲連結網址'>Parrot</a></li>
  <li><a href='欲連結網址'>Cosmetics</a></li>
  <li><a href='欲連結網址'>Internet</a></li>
  <li><a href='欲連結網址'>Travel</a>
  <ul>
  <li><a href='欲連結網址'>Backpacking</a></li>
  <li><a href='欲連結網址'>Tour</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href='欲連結網址'>Tips and Trick</a></li>
  </ul>
  </div>
  </div> <!-- end nav -->
• 可以到「凱特實驗室http://katefortesting.blogspot.tw/」查看效果。
• http://www.acgxi.tk/2012/05/blogger_6840.html 

讓側邊工具列sidebar可以展開摺疊

在經營Blogger一段時間後，隨著文章、分類越來越多，這時側邊工具列落落長的一整排，看起來實在很難過。

利用語法讓一大串的項目能夠展開和摺疊，就能讓版面清爽不少。

網路上我找到了兩種方法，一個是無腦安裝法，如下所示：

「超級無腦安裝Blogger外掛功能」功能更新 by Josh

輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)! by 阿土伯

另一個則是自己手動加上的

讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling) by Abin

我選擇了後者，Abin 前輩那裡的解說，易讀性相當高，跟著照做應該不會有什麼問題，如果你也跟我一樣剛學習使用 blogger ，你可以看一下我這篇文章，可以省走一些彎路

Blogger改造 - 入門介紹＋前置動作 by iPlay99

在 </head>之前，貼上底下 javascript程式碼。

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
for(i = 0; i &lt; element.length; i++) {
attribute = element[i].getAttribute(&#39;id&#39;);
if(attribute == &#39;toggle&#39;)
{
if (element[i].style.display == &#39;none&#39;)
element[i].style.display = &#39;inline&#39;;
else
element[i].style.display = &#39;none&#39;;
}
}
}
</script>

接著再查找想收合的widget 名稱，並插入程式碼即可。

如果你不明白 widget 是啥的話，可以看底下這篇文章：

Blogger - 版面配置的網頁元素標記widget說明 by iPlay99

我以常用的 文章標籤(英文：Label)為例，直接 Ctrl+F 找 <b:widget id='Label，原則上，像我自己，只新增了一個「Label標籤」功能，所以我用<b:widget id='Label 下去找，就直接找到了底下程式碼：

1. 如果你要找的是其它功能，請自行將Label改成其它名字或是用<b:widget id='下去查找所有的 widget。
2. 你如果沒有事先從「範本」>>「網頁元素」>>「加入網頁元素」>>新增「標籤」功能，它不會出現喔。

<b:widget id='Label1' locked='false' title='文章標籤' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>

<!--=======cccccode收合功能====文章標籤========-->
<a href='javascript:void(0);' onclick='javascript:ElementToggle("Label1");'>[+/-]</a>
<!--=======cccccode收合功能====文章標籤========-->
<data:title/>

</h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
<ul>
<b:loop values='data:labels' var='label'>
…底下程式碼省略…

接下來

1. 由上到下，確定第二個紫色字體等於第一個紫色字體，要相同，程式才會啟動。
2. 將整段藍色字體程式碼(註解請自行去除)複製貼上到綠色字體<data:title/>的上面或下面，在上則在標題前面，反之則在後面。
3. 接著把紅字複製貼上，這時你的widget 預設是收起來的，如果你希望一開始是打開的，就把style='display:none;' 給刪掉即可。

讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)

本文介紹的是這些顯示的元件透過一些技巧可以動態展開和摺疊起來。Sidebar 的元件有的時候可能很長（尤其是網站列表或是 Archive 之類的），想要顯示該元件又不希望過長的元件會影響版面的美觀，這時候我們可以保留它，透過 Javascript 的技巧去動態切換顯示與否。而我看到人家的作法，要做一些麻煩的修改，參考對方的原始碼我寫了因應這個動作的 Javascript，一方面更精簡 Hack 的步驟，也減少原始碼的修改。

根據原文，還有上一篇對 Widget 程式碼的瞭解，要做的工作就是：第一，把想展開摺疊的區塊找出來，第二，做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在 <head> </head> 標籤內、</style> 後面)：

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
  var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
  for(i = 0; i &lt; element.length; i++) {
    attribute = element[i].getAttribute(&#39;id&#39;);
    if(attribute == &#39;toggle&#39;)
    {
      if (element[i].style.display == &#39;none&#39;)
        element[i].style.display = &#39;inline&#39;;
      else
        element[i].style.display = &#39;none&#39;;
    }
  }
}   
</script>

接下來，要去修改元件 (Widget) 的程式碼。同樣以個人資料 (Profile) 元件為例，找 <b:widget ...> 開頭 </b:widget> 結尾的區段，應該是類似下面這樣：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
  <b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>    
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>

這個元件的 ID = Profile1，是範本裡用來識別該元件的方法，接下來要插入動態切換的連結，為求簡單我先不顧美觀，直接插入像下面的原始碼：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
     <b:if cond='data:title != ""'>
      <h2><a href='javascript:void(0);' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a>
      <data:title/></h2>
    </b:if>
    <div class='widget-content' id='toggle' style='display:none;'>
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>

有兩個部分要解釋一下。第一，塞入元件標題 data:title 前面的那行，就是呼叫 Javascript 的連結，其中有一個變數：Profile1，就是告訴 Javascript 你要動態切換哪一個元件，所以如果你有多個不同元件要摺疊，記得除了呼叫切換的這一行要塞入該元件原始碼中，還要更改 ID 名稱。第二個部分，<div class='widget-content'> 這行標籤開始就是元件的內容，也是要被折疊或展開的區塊，如果你希望該文件「預設」就被折疊起來，那就要在後面加入 CSS Style 去起始隱藏它，如果預設是被展開的，就把後面紅色的 style='display:none;' 部分拿掉就行了。最後，如果對以上樣式不滿意，或是想貼用圖片當切換按鈕，記得調整 <a> 連結那行的內容和位置就可以了！

為Blogger的sidebar加上摺疊的功能

為Blogger的sidebar加上摺疊的功能

今天將博客兩側的欄位加上了可摺疊的功能，讓版面看起來更清爽也更方便讀者檢視多樣化的內容。

若你也想為你的 Blogger 的 sidebar 加上摺疊的功能，可依照下列步驟來設定。

首先，請先備份你的範本，然後再展開小裝置範本進行修改事宜，步驟如下：

1.在<head>與</head>之間加入下面語法

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
for(i = 0; i &lt; element.length; i++) {
attribute = element[i].getAttribute(&#39;id&#39;);
if(attribute == &#39;toggle&#39;)
{
if (element[i].style.display == &#39;none&#39;)
element[i].style.display = &#39;inline&#39;;
else
element[i].style.display = &#39;none&#39;;
}
}
}
</script>
2. 接著找到你要折疊的元件的語法，它通常都是由開頭為<b:widget>，結尾為</b:widget>所組成的語法，舉例如下：（請留意裡頭的id名稱，下一個步驟會用到）

<b:widget id='Profile1' locked='false' title='作者介紹' type='Profile'>
　　<b:includable id='main'>
　　　<b:if cond='data:title != ""'>
　　　　<h2>&ltdata:title/></h2>
　　　</b:if>
　　　<div class='widget-content'>
　　　............. (程式內文略過)
　　</b:includable>
　</b:widget>
3. 在上述語法中<data:title/>的後面，加上下面的語法

<a href='javascript:void(0);' onclick='javascript:ElementToggle("這裡填上該元件的id");'>(+/-)</a>
(+/-)的字樣也可以改成圖片的html語法，或是其他文字，如果想要調整其位置，可以加上 style 的設定，透過 padding 、 margin 或是 text-align 來進行調整。

4. 最後把<div class='widget-content'>這行改成下面的程式：

<div class='widget-content' id='toggle' style='display:none;'>
上面語法是預設折疊的，如果想將欄位的預設值改成展開的，請將 style='display:none;' 拿掉即可。

 

Google 的新地圖功能，my maps ，多點標示的地圖

如果產品有多個店家都有販售，如何標示呢？

或是如何在一張地圖上標示多處位置，如何標示呢？

無論是拜訪遠方的朋友還是國內外旅遊，都必須要有完整的行前規劃，此時Google Map絕對是我們的最佳幫手，但該如何自定屬於自己的路線圖呢？不久前Google才推出「我的地圖（Google My Maps）」服務，允許使用者自行製作及儲存地圖，並且在網路上發佈與分享。如今Google擴大此服務，將「我的地圖」放置於Google雲端硬碟（Google Drive）中，讓使用者更容易客製化自己的地圖。