自訂blogger網頁(pages)網址

Blogger新增所謂的網頁功能已經有段時間了，不過因為有網友針對我導覽列標籤連結的網址提出疑問，就趁此機會做個簡單的教學。另外，雖然blogger的網頁(pages)功能可以非常直覺、便利的的形式設置導覽列標籤，但為了自訂版面時能有更高的自由度，我選擇了手動連結，詳細設定方式也會在本篇一起說明。

在水平連結導覽列高亮顯示當前頁面

某天突然心血來潮，想研究看看有沒有辦法讓blogger上的水平導航列可以在高亮顯示當前瀏覽頁面，讓讀者在瀏覽網頁時輕鬆得知目前所在位置。google了半天找不到相關文章，自行試試摸索了一段時間後終於研究出實現的方法，特此分享，希望能幫助到其他有需要的部落客。

在水平連結導覽列高亮顯示當前頁面

我針對的是使用「連結清單」做成的導覽列，如果你是用「網頁清單」小工具做成導覽列的話可以先跳過步驟1，直接看步驟2；我所使用的方法很簡單，僅需在CSS上定義blogger內建的標記值即可，沒有應用JavaScript或其他外掛，一點都不複雜(務必記得在實做以前儲存完整範本)。

• 步驟1>>

首先，勾選展開小裝置範本→利用ctrl+F找到<b:widget id='LinkList' locked='false' title='' type='LinkList'>(若找不到就掐頭去尾留中間id='LinkList'這樣找找看類似區段)，整段程式碼應該如下：

<b:widget id='LinkList' locked='false' title='' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>





然後用下列程式碼取代



<b:widget id='LinkList' locked='false' title='' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<b:if cond='data:blog.url==data:link.target'>

<li class='selected'>

<a expr:href='data:link.target'><data:link.name/></a></li>

<b:else/>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:if>

</b:loop>

</ul>

• 步驟2>>

在 Blogger 專用的 CSS 區段裡（<b:skin> 和 ]]></b:skin>之間）加上高亮當前頁面的CSS定義：

#LinkList .selected {

background-color: #fff;

border-bottom: none;

}





CSS樣式當然可以自行依照個人模板配色改變；如果是用「網頁清單」小工具做成導覽列，就把#LinkList換成#PageList或是符合你家部落格樣板該區段的widget id就可以囉!



有問題再問我吧:)。

[教學]自訂Blogger標籤分類為下拉式選單

今天有網友在[拯救破落格]新手必備之Blogger Hack大全的文章底下留言提問我部落格中下拉式文章分類的作法；其實這兩個分類都是Blogger內建的功能，分別是網誌存檔及標籤。網誌存檔的部份就是依照發文日期作彙整的分類方式，blogger原始的網誌存檔小工具即有下拉式選單的選項；標籤分類的部份雖然系統原來沒有下拉式供選擇，我只是把呈現形式依照我的部落格配色做了點小變化，設定的方式亦會陳述於下文。（參照下圖）。

下拉式文章分類

• 在實作以前請務必儲存完整範本。

承上段，實際需要更改的其實是標籤分類的部份：

新增標籤小工具（如果還沒新增）→儲存→選擇HTML→勾選『展開小裝置範本』

新增標籤小工具

點擊放大

選擇HTML，勾選『展開小裝置範本』

利用ctrl+F找到 <b:widget id='Label1' locked='false' title='Labels' type='Label'> (若找不到就掐頭去尾留中間Label1這樣找找看類似區段) 確定有這段程式碼才表示在後台的設定成功，整段碼應該如下：

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

桃色部份直接以下列語法覆蓋，另可自訂寬度顏色等，範例語法已標示進去囉。 如果無須自訂，就把style='width: 寬度（例："160px"）;background-color: 背景色碼（例："#ffffcc"）; color: 文字色碼;'這一段刪掉即可。

<select onchange='location=this.options [this.selectedIndex].value;' style='width: 寬度（例："160px"）;background-color: 背景色碼（例："#ffffcc"）; color: 文字色碼;'> <option>選單標題（就是我的"按月分一下"和"標籤分一下"）</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'> <data:label.name/> (<data:label.count/>) </option> </b:loop> </select>

預覽看看，標籤是不是變成下拉式的啦？確定成功就可以儲存囉！ 同樣也可以隨意設定自己想置放在部落格中的任何連結分類，例如『友站連結』，範例如下

連結另開新視窗 <select onchange="window.open(this.options[this.selectedIndex].value)"> <option value="">這是一個飯粒範例</option> <option value="">===連結分類===</option> <option value="連結網址（如：http://tba.tw）">連結名稱（如：TBA官網）</option> <option value="">===連結再分類===</option> <option value="http://katejane12.blogspot.com/">凱特打結該該叫</option> </select> 連結原視窗開啟 <select onchange="location.href=this.options[this.selectedIndex].value;"> <option value="">這是一個飯粒範例</option> <option value="">===連結分類===</option> <option value="http://tba.tw">TBA官網</option> <option value="">===連結再分類===</option> <option value="http://katejane12.blogspot.com/">凱特打結該該叫</option> </select>

兩者相異處就是在標記"紅色"的地方，看出來了嗎？ 呈現結果：

• 連結另開新視窗

這是一個範例===連結分類===TBA官網===連結再分類===凱特打結該該叫

• 連結原視窗開啟

這是一個範例===連結分類===TBA官網===連結再分類===凱特打結該該叫

如果你有邊欄落落長，又哪樣都不想割捨時，不妨試試看這個方式；可以有效節省版面空間又不必刪除任何項目喔！

[拯救破落格]新手必備之Blogger Hack大全

猶記得我在[教學]Blogger內嵌文章留言 (Embedded Comment Form)提到的，為了拯救該破落格，切時展現我大俠的風範，將我所知道的Blogger Hack分享給大家，展現我散播歡樂散播愛的美德。





當然如果您本身是個快樂的破樂格格主，誠以身為破落格為榮，也可以略過此文，並連跑帶跳、喜孜孜、樂陶陶的去參加這個串聯(我也串了耶XD)。

以破落格為榮!!

今天會有許多神人級的人物登場，大家先把透視眼鏡墨鏡戴好，以防閃瞎。另外，由於每個人版型不同，並非每個Hack都適用，我每種Hack會列個兩三組方式，大家是不出效果的就換著試試，或是在下列部落格中找找，通常還能挖到別的寶。

• 繼續閱讀:

1. 繼續閱讀懶人加強版CJH


2. 繼續閱讀的設定0 與 1 謎詭世界


3. Blogger Beta 中Read More 與Archive 只顯示標題作法[ METAMUSE ]羊男實驗の咖啡館

• NavBar優化

1. Blogger beta:優化Blogger導航色彩斑斕


2. 隱藏NavbarAbin's Tech Note

• 標籤雲

1. Label Clouds(標籤雲) For BloggerJosh's Note


2. [筆記]標籤雲(Tag Cloud)良人的大秘寶

• 最新文章

1. Blogger 標籤選台器 2.0LVCHEN 的美國生活指南

(這個是我玩部落格不久就認識的好友Lvchen的傑作，超讚超好用的你都不知道!)

2. Blogger 最新文章功能Chagg's 嘴砲日記

• 最新回應

1. 最新回應 v2.0LVCHEN 的美國生活指南


2. Blogger 最新回應功能(與無名、Pixnet格式相同) Chagg's 嘴砲日記


3. 應用JSON 實現「最新文章」、「最新回應」和「Blog 聯播」Abin's Tech Note

• 回應欄格式

1. [Blogger Hack] Comment Photo Hack (在Comment處顯示回應者圖片)Kaie's Blog


2. 為 blogger 留言區(comment) 加個對話框吧!Fun New Run High

• 其他

1. 讓首頁文章可開啟/摺疊for BloggerNot My Business


2. 【Blogger】A Cool "Blocked Stype" blockquoteEndless TACOJOHN


3. 如何移除 Blogger 小工具旁的編輯小圖示阿丹的部落格


4. 調用jQuery特效實作(隱藏迴響欄位篇)敗家誌°

以上是目前能想到，而且覺得新手比較即時用得到的，如果有想到再更新吧!凱特打結下台一鞠躬。

[教學]Blogger內嵌文章留言 (Embedded Comment Form)

這篇教學，是為了我好友兼換帖兼同事兼好麻吉兼好戰友的男友(簡稱我朋友的男朋友)而生。正如您所見，該部落格還缺少某些基本功能，在Blogger平台上需應用的許多Hacks還沒能用上，再加上許多前輩的教學文要看懂其實需要那麼點(其實還蠻大點的)CSS底子，實需小妹用低能淺白一點的文句陳述。但也趁此機會將我知道的Blogger Hacks做個整理，總之會慢慢補上與大家分享。





首先，是一些比較早期的Blogger模板會遇到的問題，Blogger內嵌文章留言 (Embedded Comment Form)無法正常顯示。

首先，勤勞點到後台的基本管理→意見→意見表單位置→改成已內嵌下列文章。

Embedded Comment Form

確認儲存後，回到部落格頁面看看結果；如果內嵌頁面此時以完整、正常呈現就OK囉，反之則繼續往下看。



若沒有出現內嵌模式，就非得動到語法區了(記得在實做以前務必儲存完整範本)

勾選展開小裝置範本→利用ctrl+F找到<b:includable id='comment-form' var='post'>(若找不到就掐頭去尾留中間comment-form這樣找找看類似區段)

確定有這段程式碼才表示在後台的設定成功，整段碼應該如下：

<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable>

接著再利用ctrl+F找到

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/></a>

如果只找到一組就沒問題，很多組的話請選擇在 <p class='comment-footer'> 底下的，將之反白起來，以這段直接替代。



<b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>< data:postCommentMsg/></a> </b:if>

最後在<b:skin> 後面加上CSS定義

/* The comment-form width */ .comment-form { max-width: 460px !important; width: 460px !important; }



應該就大功告成囉!有問題歡迎留言:)。

一分鐘在Blogger加上Tab View分類欄

誠如大家所見，我小修了一下我的部落格版型，以前的模樣實在是讓我覺得有點擁擠、紛亂，所以動了一下邊欄的位置，改了一下整體的色調。說實話CSS有時是很煩人工程，想說趁此機會分享一些小心得或收穫給廣大bloggers，大家不用像我一樣研究到腦筋打結、眼睛脫窗的地步。





話說在好久好久以前，我就肖想在邊欄有個像這樣的Tab View分類欄。

本想偷懶找個教學，卻遍尋不著......只能參考國外的文章，大部分居然都要扯到jQuery；我只不過是想加個有Tab讓我點來點去自爽的欄位啊！於是乎，是的。為了研究它，本身現在似乎有點鬥雞眼的症狀，畢竟哀家唸的是法律，程式語言不是我的母語(javascript、jQuery一類的語言)，年紀又有一小把了學習能力衰退得緊，學得來真可謂孝感動天了。 結果就在我的側欄，歡迎大家參觀；為了方便大家取用，少傷點腦細胞，把它整理成這段原始碼。只要按照以下步驟就可將它放進blogger部落格里囉!

1.到Blogger的控制頁面(後台)

2.選擇「版面配置」->「網頁元素」

3.點選「新增小工具」，會跳出可選用的小工具清單

4.點選「 HTML/JavaScript」，按下滑鼠左鍵，進入設定畫面

5.複製以下程式碼貼入

<style type="text/css">

div.TabTampil div.TTs {height: 24px; overflow: hidden; } div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #669933; } div.TabTampil div.katedajay { clear: both; border: 1px solid #7a5; overflow: hidden; background-color: #ffffff;} div.TabTampil div.katedajay div.dajay { height: 100%; padding: 0px; overflow: hidden; } div.TabTampil div.katedajay div.dajay div.gaigai { padding: 3px 5px; } div.TabTampil div.TTs a { border-left:1px solid #669933; border-right:1px solid #669933; border-top:1px solid #669933; border-bottom:0px solid #669933; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #fff; } </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 350px;" class="TTs"> <a>我是Tab</a> <a>我也是Tab</a> <a>我還是Tab</a></div> <div style="width: 330px; height: 300px;" class="katedajay"> <div class="dajay"> <div class="gaigai"> 這裡填[我是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我也是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我還是Tab]要顯示的內容 </div> </div> </div> </div></form> <script style="text/javascript" src="http://katejane12.googlepages.com/katejscriptab.js"></script>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>





夠簡單吧! 其他的文字應填入區等等細項，都標明在原始碼裡囉!方便大家直接編輯，當然也可以修改成符合自己版型的配色。 最後，容我發個小牢騷，本部落格歡迎各種不同想法的言論；因為本人以為，真理會越辯越明。但是，嚴禁匿名攻訐，光明點、磊落點，好嗎?