阿杰老師的部落格實驗室

你可以自行調整區塊位置或要不要顯示。

1.進入個人網誌設定 > 管理網誌模版 > 網誌模版編輯器

2.選取自訂模版

3.編輯其中的 links.template

4.在編輯器中用 <!-- --> 下的就是一段的區塊

下圖中就是負責 「月曆」 及「個人資訊的區塊」

你可以框選拖曳改變顯示的位置！

如果用 <!-- 及 --> 就代表註解就不會顯示出來哦！

「header.templates」 頁頭模版 是影響：

你可以加入頁頭的主選單。

這裡可以練習加入頁頭的主選單。我們要修改 header.template 及 roodo.css。

<!----------------------------------------------------------------------------
頁頭主選單
---------------------------------------------------------------------------->
<div id="hnav">
<ul>
<li><a title="{$locale->tr("main")}" href="{$url->blogLink()}">{$locale->tr("main")}</a></li>

<li><a title="{$locale->tr("archives")}" href="{$url->templatePage("archives")}">{$locale->tr("archives")}</a></li>

<li><a title="{$locale->tr("links")}" href="{$url->templatePage("bookmark")}">{$locale->tr("links")}</a> </li>

<li><a title="{$locale->tr("admin")}" href="{$url->getAdminUrl()}">{$locale->tr("admin")}</a></li>

<li><a class=aside title="臺北市教師研習中心部落格" href="{$url->getBaseUrl()}/summary.php">北市教研中心部落格</a></li>
</ul></div>

其中的每一段 <li> </li> 就是一個選單選項。

接著在 roodo.css 加入這一段程式碼來產生滑鼠移上的變化！

/* 水平選單 */
#hnav li ul li a { /* for sub-menu items */
/* Apply the width here (not to li) so that IE regards entire width as clickable */
/* This also seems to fix the "3px gap between list items" bug in IE. */
width: 6em;
border-top-style: none; /* to get single line between items */
padding: 1px 10px 2px 10px;
}
/* note: important to keep ordering of LVHA link, visited, hover, active */
#hnav ul li { display: inline; }

#hnav ul li a
{

padding: 0.2em 1em;
background-color: #121212;
color: #bfbfbf;
text-decoration: none;
border-right: 1px solid #fff;
}

#hnav ul li a:hover
{
background-color: #94C22C;
color: #fff;
}

#navlist li #current
{
color: #799F27;
}

你還可以閱讀：

• 貓咪&狗狗-Flash時鐘