Subscribe to RSS FeedNews FeedSubscribe to Comments RSS FeedComments

Home > 顯示具有 部落格教學 標籤的文章。 顯示所有文章

更改版型讓文章盡快顯示

2/10/2009 02:34:00 下午 張貼者： 張哲生

2 意見

昨天更動了blog的版面，將原本位於中欄的文章主體移到了最先被讀取的左欄位置。這樣讓網友進入我的blog時，能夠在第一時間先看到文章內容，而不會浪費過多時間在等候其他元件的loading。

另外，我又增加了第四欄，在原本三欄的下方；這個新欄位可以用來放置需要更大顯示寬度的元件 ，同時亦可讓blog的高度有效地縮減。

希望如斯之改變能夠讓大家在閱讀我的網誌時，感到更有效率、更舒服。
標籤： , ,

讓文章標題出現在部落格名稱之前

9/27/2008 08:57:00 下午 張貼者： 張哲生

0 意見

瀏覽Blogger的文章時，網頁title的預設顯示內容為：部落格名稱: 文章標題。

這樣的顯示方式容易降低文章被搜尋引擎找到的機率，尤其當部落格名稱很長的時候，其影響則更加明顯；此時我們可以修改一下HTML，讓文章名稱顯示於title的最前面。修改步驟如下：

1. 進入「版面配置」的「修改HTML」

2. 找到下面的程式：

<title><data:blog.pageTitle/></title>
3. 將上述程式改成如下：

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
4. 儲存範本即完成修改。

這樣一來，部落格頁面的title就會變成了：文章標題 | 部落格名稱。

當然，文章標題與部落格名稱之間的符號可依個人喜好作修改，只要將<data:blog.pageName/> | <data:blog.title/>裡的紅色部分換成你喜歡的符號即可。
標籤： ,

為Blogger的sidebar加上摺疊的功能

9/24/2008 12:22:00 下午 張貼者： 張哲生

1 意見

今天將博客兩側的欄位加上了可摺疊的功能，讓版面看起來更清爽也更方便讀者檢視多樣化的內容。

若你也想為你的 Blogger 的 sidebar 加上摺疊的功能，可依照下列步驟來設定。

首先，請先備份你的範本，然後再展開小裝置範本進行修改事宜，步驟如下：

1.在<head>與</head>之間加入下面語法

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName(&#39;div&#39;);
for(i = 0; i &lt; element.length; i++) {
attribute = element[i].getAttribute(&#39;id&#39;);
if(attribute == &#39;toggle&#39;)
{
if (element[i].style.display == &#39;none&#39;)
element[i].style.display = &#39;inline&#39;;
else
element[i].style.display = &#39;none&#39;;
}
}
}
</script>
2. 接著找到你要折疊的元件的語法，它通常都是由開頭為<b:widget>，結尾為</b:widget>所組成的語法，舉例如下：（請留意裡頭的id名稱，下一個步驟會用到）

<b:widget id='Profile1' locked='false' title='作者介紹' type='Profile'>
　　<b:includable id='main'>
　　　<b:if cond='data:title != ""'>
　　　　<h2>&ltdata:title/></h2>
　　　</b:if>
　　　<div class='widget-content'>
　　　............. (程式內文略過)
　　</b:includable>
　</b:widget>
3. 在上述語法中<data:title/>的後面，加上下面的語法

<a href='javascript:void(0);' onclick='javascript:ElementToggle("這裡填上該元件的id");'>(+/-)</a>
(+/-)的字樣也可以改成圖片的html語法，或是其他文字，如果想要調整其位置，可以加上 style 的設定，透過 padding 、 margin 或是 text-align 來進行調整。

4. 最後把<div class='widget-content'>這行改成下面的程式：

<div class='widget-content' id='toggle' style='display:none;'>
上面語法是預設折疊的，如果想將欄位的預設值改成展開的，請將 style='display:none;' 拿掉即可。
標籤： ,

在Blogger加上funP與HEMiDEMi的推文按鈕

7/24/2008 01:46:00 下午 張貼者： 張哲生

3 意見

想跟本部落格一樣在文章標題右側放上可供網友貼文至 funP 及 HEMiDEMi（黑米）等書籤網站的「推文按鈕」嗎？

只要你是 Blogger 的使用者，請依照下面的指示動作，即可順利放上推文按鈕唷！

在進行下列動作前，請務必記得備份您的模版。（點選「下載完整模版」即可進行備份）

1. 請進入後台的「版面配置」的「修改HTML」，勾選「展開小裝置範本」。

2. 在 </head> 之前，加入下面這行程式：

<script language='JavaScript' src='http://funp.com/tools/js/funp_button.js'/>

3. 找到下面這段程式

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>

在上述程式之後加上下面這段程式：

<div style='float:right;margin-left:10px;'>
<script type='text/javascript'>
HEMiDEMi_Bookmark_Button_URL = '<data:post.url/>';
HEMiDEMi_Bookmark_Button_Title = '<data:post.title/>';
</script>
<script type='text/javascript'>
HEMiDEMi_Bookmark_Button_Style = 'button1';
</script>
<script src='http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js' type='text/javascript'/>
<script>funp_genButton("<data:post.url/>",11);</script>
</div>

4. 按下「儲存範本」，即完成推文按鈕的安裝。

安裝完畢後，請重新檢視您的網誌吧，看看每一篇文章標題右側是否都出現了 funP 跟黑米的推文按鈕呢？
標籤： , , ,

在部落格裡使用MSN通訊

6/19/2008 11:54:00 上午 張貼者： 張哲生

0 意見

歡迎透過下面的Messenger對話框傳訊息給我喔！



你也想把MSN內嵌在部落格裡嗎？我來教你怎麼做吧！

(1) 登入Windows Live Messenger 網頁設定

(2) 勾選「允許在網路上顯示您的 Messenger 狀態，並可傳送訊息給您。」並按下儲存。

(3) 於「建立HTML功能」中選擇「即時通訊視窗」，設定大小與顏色，然後複製HTML語法。

(4) 將所複製的HTML語法張貼至你的部落格（須支援 iframe 功能）上面即可。

有興趣的朋友趕快試試看吧！
標籤： , ,