2009年8月25日 星期二

如何左右移動側邊欄位置

https://blogger-script-study.blogspot.com/2009/08/blog-post_25.html?m=0

你有沒有過這樣的經驗，在 Blogger 的標準版型或在網路上看到一個喜歡的兩欄式板型，但是它的側邊欄卻是在左手邊，可是我就是喜歡側邊欄放在右邊的板型，無奈之餘只好放棄或是勉強用用。

現在沒有關係了，只要簡單幾個步驟就可以輕鬆的變換側邊欄的位置，無論你是想要側邊欄放在左邊或是右邊都可以如你所願。

寫在前面

  • 本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
  • 更改 Blogger 的板型(template)前，請記得每次先備份自己的 【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－移動左側邊欄為右側邊欄 

修改前的板型(側邊欄再左邊) 修改後的板型(側邊欄在右邊)
Blogger_move_sidebar_original01 Blogger_move_sidebar_after01


1. 打開 Bolgger 板型之後，先找到 【div#main {】，然後重新定義其「文章主欄」及「側邊欄」樣式的定位即可。

  • 定義 sidebar 欄位中的 float 為 right，則側邊欄就靠右；反之亦然。
  • 定義 main 欄位中的 float 為 left，則側邊欄就靠左；反之亦然。
  • 要注意：勿同時設定 sidebar 及 main 同時為 left 或同時為 right，這樣會讓他們重疊在一起。

2. 通常「文章主欄」會稱為 main 或是 main-wrapper，而「側邊欄」則會稱為 sidebar 或是 sidebar-wrapper。

3. 如果有設定導覽列選單的板型，也要適時的調整其位置，導覽列應盡量避免放置魚側邊欄的正上方，否則畫面看起來會很擁擠。如果導覽列是放在標題列之中則令當別論。

  

4. 請注意：所有的指令後面都要接一個「半形分號(;)」當作結束，如果忘記打的時後，系統會自動認為到下一個(;)前都是指令螞，所以並不會發出警告，而且還可以執行及儲存板型，但卻會造成指令執行不完整，而出現意想不到的結果，所以板型存檔後，要是看到了預期外的畫面出現，就是看看是不是忘記這個「半形分號(;)」了。

▼ 修改前的板型內容。
程式碼 @media all  {
  div#main {
    float:$endSide;
    width:66%;
    padding-top:30px;
    padding-$endSide:0;
    padding-bottom:10px;
    padding-$startSide:1em;
    border-$startSide:dotted 1px $bordercolor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }              
  div#sidebar {
    margin-top:20px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0;
    padding:0px;
    text-align:$startSide;
    float: $startSide;
    width: 31%;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
}

▼ 修改後的板型內容 (紅色為更改的部份)，注意文字必須正確。
程式碼 @media all  {
  div#main {
    float:left; /* 定義文章主欄對齊的方式改為靠左(left) */
    width:66%;
    padding-top:30px;
    padding-$endSide:0;
    padding-bottom:10px;
    padding-$startSide:1em;
    border-$startSide:dotted 1px $bordercolor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }              
  div#sidebar { /* 這裡定義側邊欄的樣式 */
    margin-top:20px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0;
    padding:0px;
    text-align:$startSide;
    float: right; /* 定義側邊欄對齊的方式改為靠右(right) */
    width: 31%;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
}


▼這是板型修改後的成果。   
Blogger_move_sidebar_after01

回到 Blogger 部落格技巧總整理

3 意見 標籤：

2009年8月24日 星期一

如何於Blogger增加部落格導覽列選單頁籤

https://blogger-script-study.blogspot.com/2009/08/setup-browser-menu-for-blogger.html?m=0

製作導覽列選單或頁籤，相信是很多部落客想要的功能，因為好的導覽列選單可以讓使用者更方便的瀏覽你的網站，增加其停留在你網站的時間，並減少網頁的跳出率，但是 Blogger 的標準板型裡並不提供導覽列選單，由國外下載的板型又不見得符合自己的需要，所以這篇我們就來研究看看如何在 Blogger 的標準板型中增加導覽列選單/頁籤。

寫在前面

  • 本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
  • 更改 Blogger 的板型(template)前，請記得每次先備份自己的 【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－新增導覽列選單或頁籤 

修改前的板型 修改後的板型(出現導覽列選單了)
Blogger-browse-menu-original Blogger-browse-menu-create0


1. 打開 Bolgger 板型之後，先找到 【/* Variable definitions】，然後新增兩組顏色常數定義。這是為了方便以後我們想要更改側邊欄標題顏色時，只要來這邊更改即可。

  • 第一組變數定義「導覽列選單的字型樣式」(變數名稱：menufont)。
  • 第二組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
  • 第三組變數定義「導覽列選單滑鼠滑到時背景顏色 」(變數名稱：colormenubackgroundhover)。
  • 第四組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
  • 第五組變數定義「導覽列選單滑鼠滑到時字型顏色 」(變數名稱：colormenutexthover)。
▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。
程式碼

/* Variable definitions
   ====================
   <Variable name="sidebartitlecolor" description="SideBar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">

   <Variable name="sidebartitlebgcolor" description="SideBar Title Background Color"
             type="color" default="#B8A80D" value="#B8A80D">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。
程式碼

/* Variable definitions
   ==================== 
<Variable name="menufont" description="Menu Text Color"
         type="font" default="normal bold 100% 標楷體,Arial", value="normal bold 100% 標楷體,Arial">

<Variable name="colormenubackground" description="Menu Background Color"
          type="color" default="#B8A80D" value="#B8A80D"> /* 導覽列選單背景顏色 */

<Variable name="colormenubackgroundhover" description="Menu Background Color While mouse on it"
          type="color" default="#80B0DA" value="#80B0DA"> /* 導覽列選單滑鼠滑到時背景顏色 */

<Variable name="colormenutext" description="Menu text Color"
          type="color" default="#FFFFF" value="#FFFFFF"> /* 導覽列選單字型顏色 */

<Variable name="colormenutexthover" description="Mouse on Menu text Color"
          type="color" default="#0000CF" value="#0000CF"> /* 導覽列選單滑鼠滑到時字型顏色 */

   <Variable name="sidebartitlecolor" description="SideBar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">

   <Variable name="sidebartitlebgcolor" description="SideBar Title Background Color"
             type="color" default="#B8A80D" value="#B8A80D">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">


2. 再用搜尋功能找到【body {】，要在 【body {…}】 之後定義選單的的樣式。

  • 第一組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
  • 第二組變數定義「導覽列選單滑鼠滑到時背景顏色 」(變數名稱：colormenubackgroundhover)。
  • 第三組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
  • 第二組變數定義「導覽列選單滑鼠滑到時字型顏色 」(變數名稱：colormenutexthover)。
▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。
程式碼

body {
  margin:0px;
  padding:0px;
  background:$bgcolor;
  color:$textcolor;
  font-size: small;
}

#outer-wrapper {
  font:$bodyfont;
}

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。
程式碼

body {
  margin:0px;
  padding:0px;
  background:$bgcolor;
  color:$textcolor;
  font-size: small;
}

/* === Menu start === */
#menu {
    width: 66%; /* The value shall be same as main-wrapper */
    height: 40px; /* 導覽列選單的方塊高度 */
    margin: 0 auto;
    float: right; /* 將導覽列選單定位靠右，如果沒有設定會造成選單不能定位 */
    margin-top: -10px; /* 定義導覽列選單距離部落格標題的上下位置，可以試著調整看看，-50px應該會放到部落格標題裡面吧! */
}

#menu ul {
    margin: 0;
    list-style: none;  /* 沒有清單前置符號 */
    line-height: normal;
}

#menu li {
    display: inline;
}

#menu a { /* 定義導覽列選單的樣式 */
    display: block;
    float: left;
    height: 20px;
    padding: 5px 15px 5px 15px;  /* 文字在導覽列選單中的位置 */
    text-transform: uppercase; /* 自動轉換為大寫英文 */
    text-decoration: none;
    font: $menufont; /* 設定字型樣式參考 menufont */
    margin-top: 5px; /* 定義上方物件的距離 */
    margin-left: 3px; /* menu item 間的間隙 */
    color: $colormenutext; /* 主選單的文字顏色 */
    background:$colormenubackground; /* 主選單的背景顏色 */
    -moz-border-radius: 5px;  /* Radius corner for Firefox only */
    -webkit-border-radius: 5px; /* Radius corner for Safari and Chrome only */

}

#menu a:hover { /* 當mouse移到選單項目連結時的文字及背景樣式 */
    text-decoration: underline; /* 定義導覽列字形會出現底線 */
    color: $colormenutexthover;
    background: $colormenubackgroundhover;
}

#menu .first a { /* 定義第一個選單項目的樣式 */
    background:$colormenubackground; /* 導覽列選單的背景顏色 */
}
/* === Menu end === */

#outer-wrapper {
  font:$bodyfont;
}


3. 第三步驟，利用搜尋功能找到第一個 【</b:section>】，然後在</b:section> 及 </div> 之間後新增一段程式碼。這段程式碼就是想要出現在導覽列選單上的選單文字。

假設導覽列選單的項目為：
   Blogger-browse-menu-create02 

  • 這裡只要使用 UL 及 LI 指令即可。其他的樣式多已經在第二步驟定義好了。
  • 程式碼中的【#輸入網址位置】 必須輸入真正的相對應的網址位置。
  • 程式碼中的 Title=’…’ 內可以填入更多想要讓讀者知道的資訊，這些資訊會在滑鼠滑到其上方時出現。
▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。
程式碼

</b:includable>
</b:widget>
</b:section>
</div>
<div id='content-wrapper'>

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。
程式碼

</b:includable>
</b:widget>
</b:section>

<!-- === Menu start === -->
<div id='menu'>
    <ul>
        <li><a href='#輸入網址位置' title='部落格最新文章'>最新文章</a></li>
        <li><a href='#輸入網址位置' title='可以留言和我交換連結'>交換連結</a></li>
        <li><a href='#輸入網址位置' title='可以多了解我一點'>想認識我</a></li>
    </ul>
</div> 
<!-- === menu end === -->

</div>
<div id='content-wrapper'>

▼這是板型修改後的成果。  
Blogger-browse-menu-create0

回到 Blogger 部落格技巧總整理

2 意見 標籤：

2009年8月22日 星期六

為側邊欄的標題框加上圓角

https://blogger-script-study.blogspot.com/2009/08/border-radius.html?m=0

「圓角框」總給人一種舒服的感覺，所以如果可以在自己的網頁中加入圓角框，除了可以增加親和力，也可以為自己的網頁加分，但圓角框卻是很多程式設計師的惡夢，一般較簡單的方法是使用預先畫好的圓角框圖形並把它設定為背景使用，但這種方法卻只能適用在固定頁面大小的網頁及部落格版型，當然也不是不能解決，就是麻煩了點。還好CSS3的草案中新增了一個叫 border-radius 的屬性，可以讓程式設計師輕鬆的作出圓角形狀，可惜的是目前只有 Firefox、Safari、及Chrome 支援此功能，Opera 及 IE8.0都不支援。

本篇文章就先分享如何用使用 border-radius 達成圓角框的效果。由於我們之前已經有設定過側邊欄標題的背景顏色，所以我們就援引側邊欄的標題方框例子，並把它改造成圓角框。

寫在前面

  • 本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
  • 更改 Blogger 的板型(template)前，請記得每次先備份自己的 【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。
  • 本篇文章所採用的方法僅適用於 Firefox、Safari、Chrome等瀏覽器，不適用 IE(含8.0)、Opera。

更改板型－側邊欄標題背景框加圓角 

修改前的板型 修改後的板型(是否親和多了)
Blogger-border-radius_original Blogger-border-radius_create01


1. 一樣用搜尋功能找到【sidebar h2】，然後在定義側邊欄的地方新增兩行字。

  • 適用於 Firefox 的圓角框指令，半徑為 8 個點。  -moz-border-radius: 8px;
  • 適用於 Safari, Chrome 的圓角框指令，半徑為 8 個點。-webkit-border-radius: 8px; 
  • 以上兩個指定都是試定整個方框的四個角為圓角，另外也可以單獨設定個別的角落為圓角
    • -moz-border-radius-topleft  適用於 Firefox, 設定左上角為圓角
    • -moz-border-radius-topright 適用於 Firefox, 設定右上角為圓角
    • -moz-border-radius-bottomleft 適用於 Firefox, 設定左下角為圓角
    • -moz-border-radius-bottomright 適用於 Firefox, 設定右下角為圓角 
    • -webkit-border-top-left-radius  適用於 Safraiire, Chrome, 設定左上角為圓角
    • -webkit-border-top-right-radius 適用於 Safraiire, Chrome, 設定右上角為圓角 
    • -webkit-border-bottom-left-radius 適用於 Safraiire, Chrome, 設定左下角為圓角 
    • -webkit-border-bottom-right-radius 適用於 Safraiire, Chrome, 設定右下角為圓角 
    • 這裡有三個圓角框的例子，就是使用個別設定圓角框的指定達成的:
      border-radius-top-left-right border-radius-top-left-bottom-right border-radius-bottom-left-right
▼未加側邊欄背景框程式碼的原始板型內容
程式碼

#sidebar h2 {
  color:$sidebarcolor;
  margin:0px;
  padding:0px;
  font:$headerfont;
}

#sidebar .widget {

▼ 已經加了側邊欄背景框程式碼的板型內容 (參考 如何更改Blogger側邊欄的標題成為有背景的文字 進一步了解)
程式碼

#sidebar h2 {
  color:$sidebartitlecolor;
  background-color:$sidebartitlebgcolor;
  margin:0px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:30px;
  font:$headerfont;
}

#sidebar .widget {

▼修改後的板型內容(紅色為新增或修改的部份)，注意文字必須正確。
程式碼

#sidebar h2 {
  color:$sidebartitlecolor;
  background-color:$sidebartitlebgcolor;
  margin:0px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:30px;
  font:$headerfont;
  -moz-border-radius: 8px; /* 適用 Firefox  的圓角框指令 */
  -webkit-border-radius: 8px; /* 適用 Safari, Chrome 的圓角框指令 */
}

#sidebar .widget {


▼這是板型修改後的成果。 

Blogger-border-radius_create01 

回到 Blogger 部落格技巧總整理

8 意見 標籤：

2009年8月16日 星期日

訂閱最新文章

https://blogger-script-study.blogspot.com/2009/08/email-subscriptions.html?m=0

歡迎來到訂閱『最新文章』頁面，如果你對本部落格的文章有興趣的話，可以透過以下幾種方式訂閱『最新文章』。

對於本部落格的舊文章，可以連到 Blogger 部落格技巧總整理，這裡有點像是本站的 sitemap，整理了本部落格的相關文章， 也歡迎使用【搜尋】功能找到所想要的文章。

1. 使用電子郵件訂閱最新文章：

Google FeedBurner 提供

2. 使用 Bloglines 訂閱最新文章

3. 使用 Google Reader 閱讀最新文章

0 意見 標籤：
訂閱： 文章 (Atom)