2015年5月24日 星期日

禁右鍵拷貝,版權所有

拷貝以下的程式碼,將其貼在 <head> 下面
-------------------

<!--Avoid Copying Script -->
<script type="text/javascript">
var omitformtags=[&quot;input&quot;, &quot;textarea&quot;, &quot;select&quot;]
omitformtags=omitformtags.join(&quot;|&quot;)
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!=&quot;undefined&quot;)
document.onselectstart=new Function (&quot;return false&quot;)
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

-------------------
( 原始碼出處:Buzzerrs


就像這樣。。。。。

Blogger 基本設計與使用

了解 基本 Blogger 要如何使用,請參照 Google Blogger 說明

Blogger 樣板

編輯下拉式選單

編輯下拉式選單

如果想了解 基本 Blogger 要如何使用,請參照 Google Blogger 說明
幾乎所有網上看到的樣板,都需要編輯版面範本的HTML,最常用到的是,編輯網頁上看來很專業的下拉式選單。其實非常簡單,只是拷貝網址連結,改改文字而已。





步驟 1 上傳樣板
先上傳 Blooger 樣板範本的  .xml 檔案。







步驟 2  編輯範本HTML
我們只需要找出下拉式選單,然後填入連結,和文字。
在編輯範本HTML中,先開起搜尋  CTRL+F。


找尋下拉式選單中有的英文字,這些字請不要是 Home 或是 Blog,其他的英文字都可以。一個單字會有一個屬於它的下拉式選單。



以 Contact 為例:
<li><a href='#'>Contact</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a></li>
</ul>
</li>


基本HTML 結構: <xxx> 內容 </xxx> ,有點像左右括弧一樣。


下拉式選單的基本結構就是:<li> ………</li>,而
<ul class=‘children'>和</ul>中間就是子選單的內容。
<a href='#'>Contact</a>
#:就是要放連結的地方連結。

所以改好連結和文字就如:

<li><a href='#'>課程</a>
<ul class='children'>
<li><a href='http://www.500ntd.com/search/label/%E5%9F%BA%E6%9C%AC%E8%AA%B2%E7%A8%8B'>基本</a></li>
<li><a href='http://www.500ntd.com/search/label/%E9%80%B2%E9%9A%8E%E8%AA%B2%E7%A8%8B'>進階</a></li>
<li><a href='http://www.500ntd.com/search/label/%E5%B0%8F%E6%92%87%E6%AD%A5'>小撇步</a></li>
</ul>
</li>


綠色斜線部分是連結;藍粗體是選單的文字。
如果不需要這麼多選項,刪除就OK了!

[教學]在blogger建立下拉式導覽列

[教學]在blogger建立下拉式導覽列


blogger加上導航列和高亮顯示當前頁面的導航列都會了,
那麼下拉式(階層式)導覽列又要怎麼做呢?無須用javascript或其他外掛,
僅需在CSS上定義blogger內建的標記值就可以輕鬆達成囉!
一樣請務必記得在實做以前儲存完整範本,以下,就來step by step吧!

  • 首先,勾選展開小裝置範本→利用ctrl+F找到]]></b:skin>
    在它前面加上下面這段程式碼(字體顏色不同的地方是圖片及色碼
    ,都可以依照自家版型需求隨意替換)
    /* ----- NAV MENU ----- */
    #navMenu {
    width: 910px;
    height: 35px;
    background:#deb8b8url
    (
    https://ihbqkg.bay.livefilestore.com/
    y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_
    u2q2zow8T3-QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif
    ) repeat-x top;
    color: #b56666;
    margin: 0 auto 0;
    padding: 0;
    font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
    border-top: 1px solid #debeb8;
    border-bottom: 1px solid #FFFFFF;
    }
    #navMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #b56666;
    display: block;
    text-transform: capitalize;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 15px Century Gothic, Times New Roman;
    }
    #nav li a:hover, #nav li a:active {
    background:#deb8b8;
    color: #b56666;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background:#deb8b8url
    (
    https://ihbqkg.bay.livefilestore.com/
    y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_u2q2zow8T3-
    QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif
    ) repeat-x top;
    width: 150px;
    color: #000;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #deb8b8;
    border-left: 1px solid #deb8b8;
    border-right: 1px solid #deb8b8;
    font: normal 14px Century Gothic, Times New Roman;
    }

    #nav li li a:hover, #nav li li a:active {
    background: #deb8b8;
    color: #b56666;
    padding: 7px 10px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -32px 0 0 171px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul,
    #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul,
     #nav li li li:hover ul, #nav li.sfhover ul,
     #nav li li.sfhover ul, #nav li li li.sfhover ul {

    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }
  • 再找到下面這段程式碼,若找不到就掐頭去尾留中間找找看類似區段
    (例如ctrl+F搜尋自己部落格名稱)
  • <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='你的部落格名稱' type='Header'/>
    </b:section>
    </div>
    • 在這段程式碼下方加上自訂義的下拉式導航列,
      不同顏色的標籤分屬不同階層(要幾層有幾層)
    • <div id='navMenu'>
      <div id='navMenuleft'>
      <ul id='nav'>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='欲連結網址'>News</a></li>
      <li><a href='欲連結網址'>Life</a>
      <ul>
      <li><a href='欲連結網址'>Parrot</a></li>
      <li><a href='欲連結網址'>Cosmetics</a></li>
      <li><a href='欲連結網址'>Internet</a></li>
      <li><a href='欲連結網址'>Travel</a>
      <ul>
      <li><a href='欲連結網址'>Backpacking</a></li>
      <li><a href='欲連結網址'>Tour</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href='欲連結網址'>Tips and Trick</a></li>
      </ul>
      </div>
      </div> <!-- end nav -->
    • 可以到「凱特實驗室http://katefortesting.blogspot.tw/」查看效果。
    • http://www.acgxi.tk/2012/05/blogger_6840.html 
Related Posts Plugin for WordPress, Blogger...