企鵝碎碎唸

    
企鵝在之前的文章中有介紹兩種常見的部落格下拉式選單，以第一種為例：

<script type="text/javascript"><!-- function land(ref, target) { if (target=="_self") {window.location=loc;} else {if (target=="_top") {top.location=loc;} else {if (target=="_blank") {window.open(loc);} else {if (target=="_parent") {parent.location=loc;} else {parent.frames[target].location=loc;}; }}} } function jump(menu) { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("&"); target=""; if (splitc!=-1) {loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000).toLowerCase();} else {loc=ref; target="_self";}; if (ref != "") {land(loc,target);} } // --></script> <form> <select onchange="jump(this.form)" name="choice" size="1"> <option> ◆◆ 標　題 ◆◆  </option><option>----------------------- </option><option value="http://tzoyiing.pixnet.net/blog/&_blank">企鵝碎碎唸 </option><option value="http://wakaka214.pixnet.net/blog&_blank">部落格小玩意 </option><option> </option></select> </form>

只需複製、修改 <option value="網址&_blank"/>部落格名稱 這行語法就可以不斷的增添新的連結
不過還可以再作如下的修改，讓下拉式選單更加的美觀。

在 <select onchange="jump(this.form)" name="choice" size="1"> 語法中增添 id="變數名稱"
修改成為 <select id="變數名稱" onchange="jump(this.form)" name="choice" size="1">

接著到部落格的CSS編輯區中增添如下的CSS語法：
#變數名稱{
font-size:1.0em;
color: #ffffff;
background-color: #cdc7c8;
}
就可以修改選單的文字大小和顏色以及背景畫面。

註：一.變數名稱可自取，但不可與原有的名稱相衝突！
註：一.建議可以取些複雜點的名稱，例如：bottom_menus
註：二.上方CSS語法的內容部份：font-size 是設定文字的大小
註：二.上方CSS語法的內容部份：color 是設定文字的顏色
註：二.上方CSS語法的內容部份：background-color 則是設定背景顏色
註：二.至於其他的設定，亦可自行添加作修改。
註：三.CSS每段語法的結構類似於：#footer{}，選單語法位置可任選，只需避免插入其他段落的中間！

上面的方法是針對整個選單作美化，若是想作更細部的美化，例如：
分別調整標題和部落格名稱的文字大小、顏色或背景色。
可依照如下的修改方法：
如下所示在想美化的標題或連結敘述內插入 id="變數名稱"
<option id="變數名稱" value=""/>
<option id="變數名稱" value="網址&_blank"/>
然後在CSS編輯區中增添該變數的語法進去即可！