星期五, 3月 07, 2014

[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

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails