把AdSense連結單元塞進導覽列

連結廣告單元是很適合擺在狹小的空間裡頭的小模組，因此導覽列剩下的空間是一個很好的選擇。不過為了讓廣告組看起來不突兀，可以融入主題，而且要在導覽列加入元件，單單使用 blogger 後台的範本設計工具是無法達成的，所以只好多做一點手工，雖然最後結果在本部落格來說還談不上完美，但也可以接受了。

1. 程式碼放置區塊
   而導覽列主要是使用<li>標籤與 loop 迴圈和浮動的概念來完成效果，所以需注意安插 AdSense 連結單元程式碼的位置，必須是在 loop 迴圈之後。

   <ul>
   <b:loop values='data:links' var='link'>
   <b:if cond='data:link.isCurrentPage'>
   <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
   <b:else/>
   <li><a expr:href='data:link.href'><data:link.title/></a></li>
   </b:if>
   </b:loop>
   <li>
   Adsense 程式碼</li>
   </ul>

2. 顯示位置與效果
   之後加入<div>標籤來調整連結組位置，讓它保持垂直置中，由於 AdSense 沒有透明效果的選項可以使用，所以只好找一個比較接近原來分頁的顏色當作底色，而在產生 AdSense 連結組時，注意兩者底色必須一致，要選擇同一組色碼。
3. 融入主題
   因為使用的主題的關係，導覽列裡的元素皆具有圓角的效果，只要到 border-radius 填入圓角半徑，馬上可以產生圓角效果的語法，把剛產生的語法加到<div>裡頭，就可以切好所需的圓角。

    <ul>
           <b:loop values='data:links' var='link'>
             <b:if cond='data:link.isCurrentPage'>
               <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
             <b:else/>
               <li><a expr:href='data:link.href'><data:link.title/></a></li>
             </b:if>
           </b:loop>
   
   <li><div style='padding-top:6px; padding-left:6px; width:474px; height:21px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color:#4c4c4c;'>Adsense 程式碼</li>
   </ul>

4. 調整文字大小
   接下到控制導覽列的 CSS (.tabs-inner .widget li a) 裡調整文字大小，使它跟 AdSense 廣告組一樣，之後新增頁籤，這個效果也會往右推，只是要小心頁籤不要太多，不然可是會爆框的。