[Blogger HACK] 套用Bootstrap的選單導航列

這周把網誌多加了選單導航列功能，感覺比較有助於使用者查詢資料。
由於美編設計不是很在行XD，所以就找了Bootstrap來套。
記錄一下修改方法，有興趣的朋友可以試試。

開始修改

Step1: 首先進到管理介面，點選範本 => 編輯HTML，如下圖示

Step2: 在範本內容搜尋字串結尾，置入bootstrap CSS樣式的URL

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"></link>

Step3: 接著找到</body>字串結尾，置入bootstrap JS與jQuery JS URL

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript">
<script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' type='text/javascript'/>

Step4: 接下來加入選單要出現的位置的相關HTML元素，這裡就看你想要放的位置在哪，可隨個人調整，你可以先搜尋找到顯示網誌標題的元素區塊後，往下放入Nav相關元素。

<nav class='navbar navbar-default' role='navigation'>
      <div class='container-fluid'>

        <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
            <ul class='nav navbar-nav'>
              <li><a expr:href='data:blog.homepageUrl'>首頁</a></li>
     <li><a href='http://imbigd.blogspot.tw/'>工程屍私生活</a></li>
              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='javascript:void(0)'>前端工程開發 <b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='http://iambigd.blogspot.tw/search/label/jQuery%20API'>jQuery API</a></li>
                  <li><a href='http://iambigd.blogspot.tw/search/label/jQuery%20Plugins'>jQuery外掛</a></li>
      <li><a href='http://iambigd.blogspot.tw/search/label/AngularJS'>AngularJS</a></li>
      <li><a href='http://iambigd.blogspot.tw/search/label/HTML5'>HTML5</a></li>
      <li><a href='http://iambigd.blogspot.tw/search/label/Javascript'>Java script</a></li>
      <li><a href='http://iambigd.blogspot.tw/search/label/CSS'>CSS</a></li>
                </ul>
              </li>
</ul>
</div>
</div>
</nav>

接下來儲存範本就可以了:D