搜尋網站:

網頁教學:Blogger / Blogspot 版面設計與技術收錄(二)

這是教學綜合收錄第二篇。我們舊版實際上是建構在 Google 的 Blogger 系統。雖然 Blogger 具備有方便與安全的優點,但是自由度也會稍微受到約束。不過 Google 讓我們在版面規劃的部份,具有相當高度的自由,因此我們可以依照自己的想法,讓部落格更俱個人風格。

下面我將針對網路上,談到 Blogger 版面設計與應用的許多零碎資料,重新進行整理、驗證與分類,希望對大家有用。:)

修改前請注意,一旦修改 HTML 內容,原本”版面配置”中的”網誌文章”的”編輯內容”,將會停止使用者再更新。如果有需要使用特別設定,像是地址顯示等,請在修改範本前先行設定完成(但是新模板不一定支援)。建議大家在做任何修改前,務必先行備份範本,或是弄個測試網站先做測試呦。

在文章頁面中增加延伸閱讀(相關閱讀、Related Posts)功能

如果你看到本部落格的文章,會發現文章最後都會出現數個「延伸閱讀」的文章,其實這項功能是透過外掛程式辦到的。

Blogger 提供的外掛工具,並沒有相同的功能,雖然我們可以「模擬」出類似的目的,好讓來我們網站的客人繼續留在網站中久一點。譬如使用「最新文章」的外掛工具,以便我們可以用文章一直餵客人、一直餵、一直餵(咦,好像某種動物?)。

但是,最新文章並不一定會跟客人正在看的文章具有「關聯性」,代表客人可能根本沒興趣看你想餵的食物,呃,我是指延伸文章。

所以,如果有一種可以讀取各別文章的關鍵標籤(Tag),並從過去文章中,找出具有相同關鍵標籤的文章,那就可以讓客人容易發現到具有關聯性的文章。

正如古語所云:「條條大路通羅馬」,我們可以輕易的在網路上發現各式各樣的技術,有直接修改程式碼的,也有透過商業外掛達成目的。但是,卻有不少商業外掛,都會在延伸閱讀的位置後方,投放大小不等的廣告,雖然是免費的外掛,但卻或多或少的會破壞版面的配置。

底下將要介紹的,就是我在把玩過許多高手所教導的技術後,決定使用的一套外掛工具(Source: Related Posts Widget for Blogger with Thumbnails)。

首先,進到「Blogger」的後台,找出「範本」中的「修改 HTML」選項並點選進入。

選擇「展開小工具副本」。

使用文章搜尋功能(或使用快速鍵「Control」+「F」),找出「</head>」的位置。

在「</head>」之前,複製貼上下面的程式碼:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Vedfolnir Studio, www.Vedfolnir.com-->
<!--Related Posts with thumbnails Scripts and Styles End-->

接著,在同個頁面中,繼續尋找如下所示之程式碼:

<div class='post-footer-line post-footer-line-1'>

在該行程式碼後方,繼續複製貼上如下所示之程式碼(本段為實際顯示畫面的程式碼,可依個人需求改變投放位置。):

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!--Vedfolnir Studio, www.Vedfolnir.com-->
<!--Related Posts with Thumbnails Code End-->

到這邊為止已經完成所有的工作,相當簡單對吧。裡頭有些參數可以自行設定,有需要可以再詢問囉。現在,當我們回到文章頁面時,應該就可以看到與文章具有關聯性的延伸文章,敬請各位慢慢享用。:)

在 Blogger 安裝 Facebook 的留言功能

Blogger 提供讓讀者透過留言板,與作者討論各文章的想法與心得的留言功能。不過,如果可以讓部落格結合臉書的留言討論模組,那將可以讓更多人觀看我們嘔心瀝血寫出來的作品。因此,底下將要介紹如何在部落格中,增加臉書留言的設計。

首先,我們連結臉書提供的開發者網頁:「Facebook Developers, Comments Pulgin」。

在該頁面中包含有數個欄位,請依照個人喜好填寫,並按下「Get Code」按鈕,以取得留言程式碼。當然,之後都可以在程式碼中進行修改,以符合版面實際需求。

在取得程式碼後,依照先前所說,進入後台的「HTML編輯器」中,並將留言程式碼貼在適當的位置上,該位置可依個人喜好自行決定。

另外,如果直接就將該程式碼原原本本的貼上我們部落格,大家應該會發現到不管在哪篇文章或頁面,留言內容都會完全一致,無法依照各頁面內容產生變化,這主要是因為該程式碼中的預設中,是以「部落格網址」為主定義,並以此進行留言系統的佈置。

因此,如果我們希望每一篇文章都有各自留言內容的話,我們可以將該程式碼中:href='Your Domain Link' 改以 Blogger 內建的定義進行修正,並用下列程式碼進行取代即可:

expr:href='data:post.url'

在 Blogger 頁面上佈置浮動式圖片的設計

我們平常在逛許多部落格時,常會發現有圖片像幽浮一樣漂浮在視窗上,隨著我們上下捲動頁面而跟著移動,這就是所謂的「浮動式圖片」,當然,他的功能不僅只是用來展示圖片。

具體的作法是將下面程式碼,複製並貼到前述的「CSS 設計空間」中:

/* Fixed  Bar
*/
.menu_by_dnowba {
position: fixed;
bottom: 0px; <!--垂直位置設定,也可以直接用 Bottom, Medium, 或 Top 等功能指令進行取代。-->
right: 0px;<!--水平位置設定,可用 Right或Left進行取代。-->
width: auto;
margin: 0 0px 0px 0px;
<!-- background: #ffffff; 背景顏色,一般不用。 -->
opacity:.900;
filter: alpha(opacity=90);
padding: 0px 0px 0px 0px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 0px solid #b3b3b3;
border-left: 0px solid #b3b3b3;
border-bottom: 0px solid #999999;
border-right: 0px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/
<!-- Mountos Code -->

接著,我們還需要將下面的程式碼,複製並貼到「版面配置」中的「HTML/JavaScript 小工具」,或是直接貼到「修改 HTML」中適當之位置:

<div class='menu_by_dnowba'>
<a href='javascript:scroll(0,0)' title='back to top'><img src="https://www.Vedfolnir.com"/></a>

這邊要注意的是,這個程式碼包含一段網址:「https://www.Vedfolnir.com」,請直接以你想取代的圖片完整位址進行取代即可。

設定隱藏或顯示網頁元件的方法

在部落格頁面中,每一項功能或小工具都可以視為一個「元件(Element)」。因此我們可以透過撰寫網頁程式,透過「if 判斷式」加上「網頁控制碼」,讓我們在瀏覽網頁過程中,依不同頁面產生各式控制碼,以便網頁程式可針對該等控制碼進行判別,並決定各元件是否需要在特定網頁上被隱藏或顯示。

依慣例,這次的作業也是在「修改 HTML」中進行。一般而言,Blogger 正式的網頁元件,主要以「<b:widget…>…</b:widget>」的包裝方式進行撰寫,因此我們可以在該元件上添加如下所示之包含有「<b:if…>…</b:if>」判斷式的程式碼:

<b:widget id='***' locked='false' title='***' type='***'>
<b:includable id='***'>
<b:if cond='data:blog.pageType != "item"'>
.
.
.
</b:if>
</b:includable>
</b:widget>

其中,該段「<b:if…>」程式碼可使用下列各式擁有不同網頁控制碼之程式進行取代,便可以達到在不同頁面中顯示或隱藏元件之目的;另,程式碼的「==」可以「!=」取代,以表示相反之意思。

<b:if cond='data:blog.pageType == "item"'><!--在文章頁面-->
<b:if cond='data:blog.pageType == "archive"'><!--在存檔(Archive)頁面-->
<b:if cond='data:blog.pageType == "index"'><!--在標籤(Label)分類頁面-->
<b:if cond='data:blog.url == data:blog.homepageUrl'><!--在首頁-->
繼續閱讀
  1. Blogger / Blogspot 版面設計與技術收錄(一)
  2. Blogger / Blogspot 版面設計與技術收錄(三)
  3. Blogger / Blogspot 版面設計與技術收錄(四)

留言

在〈網頁教學:Blogger / Blogspot 版面設計與技術收錄(二)〉中有 1 則留言

  1. 「Vedfolnir Lion」的個人頭像
    Vedfolnir Lion

    延伸閱讀的那個功能不好用,不建議安裝。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *