如何讓Blogger加上縮圖式的相關文章功能

在看別人的網誌時,有時會見到有些網誌在文章底部都會有個相關文章功的,有的是純文字,有的的圖文並茂的,純文字的我不會考慮,因為一個網誌要吸引到別人看,先要條件就是有豐富的圖片,人看事物都會先看一些較吸引先,就算連結後的文章有多好,純文字往往因為不夠吸引而被忽略往後的文章,就好像男人看女子一樣,就算對方的內在美有多好,都可能因為她的外表而被忽略對方內在美,只有少數男人會注意到,所以在建立這個網誌前,我已經決定了是一個圖文豐富的網誌!~

請注意:使用這個功能會有些少限制,就是相關文章顯示的縮圖,必需是經Blogger後台編輯文章上傳的圖檔,如果是用其他圖片空間/經URL上傳的,都是無效。

先看看我完成後的效果：(有些地方我改了小許)

第一步:
先到Blogger的後台，按上面『設計』→『修改HTML』進入面頁,把『展開小裝置範本』打剔。
**小提示：在修改範本前記得先下載備份啊!~

第二步:
使用瀏覽器的『Ctrl+F』搜尋功能,找到『</head>』,然後在上面插入以下代碼：
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->以上程式碼是控制相關文計的CSS外觀設定, 完成後大家可以修改此處去修改外觀。

第三步:
再搜尋『div class='post-footer-line post-footer-line-1』。
原本教學文章是教人搜『<div class='post-footer-line post-footer-line-1'>』,但因為我後面是『 />』這樣子,所以今次教你們直接搜中間的語法比較好。
然後在下面插入以下語法：
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

然後按下『儲存範本』。 完成了基本的功能, 可以進入網誌看看效果。

基本設置完成後效果圖:

然後講解一下程式碼的功能:
var maxresults=5 『設定最多顯示文章數目』
Related Posts 『可以更改成你想顯示的標題名稱, 例如:相關文章,同類型的文章,您也感興趣...等等。』

CSS 部份在此不作多講了,這個縮圖文章功能自由性也大,CSS部份都好簡易明白,大家可以多作嘗試去設計適合你網誌的式樣。

如果文章沒有圖片的話,都會顯示以下圖示：

由於這個功能的Js是使用:http://blogergadgets.googlecode.com/files/relatedthumbs19.js
所以有些地方是無法修改,如欄位的闊度和高度,除非把以上的js下載來作出修改,然後再上傳到自己的空間,這個等我日後再講解一下!~

繼續閱讀...

如何讓Blogger在每篇文章都加上Facebook留言薄功能

在剛開始建立Blogger時候,同時也會發覺需要的功能會增多,想在開始時令網誌更加完善,每次看到別人的blog在文章底下有時都會有facebook的留言功能,這很大機會是因為blogger要login才可以留言,第二亦可以帶動blog的人流吧,別人在你的blog留言,留言內容也會發怖到留言者的wall上,怎說都好,facebook始終都深入民心,這個是不可少得的功能。

先看看完成後的效果:

第一步:
先登入facebook, 在底部進入開發人員網址, 如果沒有facebook的請先申請一個, 我相信沒有人沒有facebook會需要這功能吧!-____-"

第二步:
進入了開發人員頁面後, 按一下把Facebook 新增至我的網站。

第三步：
之後見到正式的開發人員主頁,在左手面點第二行的『Core Concepts』,再點『Social Plugins』,你會見到有好多Plugin可以加到網站入面,先不要理會其他,今次是介紹Comments的功能,我們按一下『comments』進入設定介面。

第四步：
你會見到一個可以設定留言格式的表格,在此可以介紹一下各個的設定,但可以不需要作任務設定,直接按『Get Code』就可以。

第五步：
直接複製/剪下XFBML程式碼。

也可以直接複製以下程式碼。
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments>

第六步：
走到Blogger的後台，按上面『設計』→『修改HTML』進入面頁, 把『展開小裝置範本』打剔。
**小提示：在修改範本前記得先下載備份啊!~

第七步:
使用瀏覽器的搜尋功能,尋找『<b:includable id='comments' var='post'>』然後在後下面貼上剛複製的XFBML程式碼。

第八步:
最後修改剛貼上的程式碼。

1. 把程式碼中『http://connect.facebook.net/en_US/all.js#xfbml=1』改成 『http://connect.facebook.net/zh_HK/all.js#xfbml=1』這是令留言板以繁體中文顯示。
2. 把『href="example.com"』改成『expr:href='data:post.url'』這可以讓留言板是為每篇文章而設,不是為指定網址而設, 否則在不同文章的留言都是會一樣。
3. num_posts='2' - 把這個修改你想預設顯示留言數目。
4. width='500' 設定留言框的闊度。

第九步：
修改後,按儲存範本離開測試,以下是我修改後的程式碼：

<div id="fb-root"></div><script src="http://connect.facebook.net/zh_HK/all.js#xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="5" width="600"></fb:comments>
最後完成!~

繼續閱讀...

如何讓Blogger的文章圖片根據比例縮圖

網絡誌開始進行修改版面的工作, 但問題總會一個一個地發生, 這也是我預計之內的事, 所以就要一個一個地解決, 一個一個找尋解決的方法, 今次要解決的是要令Blogger 首頁文章圖片依比例地縮圖。

這個模版也有自動將文章第一張圖片設為首頁文章列表中的圖片, 但是不會依比例縮小/放大, 令圖片變形…網誌也變得醜陋…

先看看效果圖:

(修改前)

(修改後)

原本沒有縮圖功能的可以將以下js代碼先加入網誌模板,
如果你的模版已經有了縮圖功能, 只是想將縮圖跟比例縮少, 可以跳到第二部份藍色線位教學。

1. 進入「版面配置」，選取「修改HTML」，把「展開小裝置範本」剔上
2. 找到</head>
3. 將以下貼到 </head> 之前

以下是控制縮圖的js代碼:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
然後再使用『Ctrl+F』找到了<data:post.body/>,取代成以下語法:
<b:if cond='data:blog.pageType != "item"'>
  <div expr:id='"summary" + data:post.id'>
    <data:post.body/>
  </div>
  <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
  <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
我這個模板有三個<data:post.body/>語法,而且已經有縮圖效果,我是尋找summary<data:post.id/>這句,再在適當位置加上Read More功能的。

如果頁面上多出了一個「Read more」在頁面，這代表原本的模板就已經有，請把這段刪除：
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more</a></span>
如果你不想要『Read More』這個功能, 當然也可以把它刪除。

主要控制部分說明:
summary_noimg = 430;
沒有圖片的文章顯示在首頁的字元數。
例如: 430就代表，該篇文章若沒有圖片，則會在首頁顯示430字元的摘要, 如果你有用內建的繼續閱讀，則會以字數少的設定來顯示。
summary_img = 340;
有圖片的文章所顯示在首頁的字元數, 通常會比上面的值小, 因為圖片佔了部分空間。
img_thumb_height = 150;
縮圖的高度。
img_thumb_width = 200;
縮圖的寬度。

這個網誌我設定了以下的值:
summary_noimg = 350;
summary_img = 300;
img_thumb_height = 150; <--┬這個是跟模板上面的小圖乘1.5,
img_thumb_width = 255; <--┘方便我日後相關文章使用縮圖, 不會出現變形

=====以上已經完成了首頁加上縮圖的功能, 之後進入第二步=====

---

加入了縮圖的代碼後, 就要進入第二步驟, 就是令到縮圖不變形!~

由於以上語法,是會把圖片強制性縮小/放大至指定值, 所以圖片有機會出現變形, 除非你網誌的圖片全都是同一比例@@"

解決方法:
1. 如果想將圖片縮至指定的高度, 把以下語法刪除(上面語法藍色位置):
width="'+img_thumb_width+'px"
2. 如果想將圖片縮至指定的闊度, 把以下語法刪除(上面語法藍色位置):
height="'+img_thumb_height+'px"
最後建議刪掉width留下，讓圖片一樣高，避免做攸成圖片過高，令版面錯位。

資料參考:嘎吱窩

繼續閱讀...

如何移除Blogger免費模板上的廣告。

這個Blogger模板是在網站上下載回來的, 是在 bloggerstyles網站下載得來的。

剛進入網誌的建立起步, 發現在文章的下方有一個不屬於『詹自文』的廣告橫幅, 雖然這個是免費模板, 但擺放的位置以及整體令到網誌很不美觀, 因此決定要將它移除。

工具主要係Google Chrome, 這是為了方便修改及查看, 不喜歡下載的也沒有問題, 但我是極力推介使用。

這個是原本這個模板的樣子, 可以見到文章的下方是帶有廣告。

第一步：當然係要尋找相關的代碼。

使用Chrome 瀏覽器時, 只要在網頁相關位置按【右鍵→檢查元素】就會開啟「開發人員工具」，在Elements 欄入要, 只要Mouse 移到原始碼上, 網頁上對應的的位置就會出現藍色顯示, 這樣就會好容易找出廣告的代碼。

只需要找尋相關的Div 標籤就可以輕易地找到對應的Code, 之後我們到Blogger 的後台, [設計]→[修改Html]→把[展開小裝置範本]剔上否則會找不到代碼。

在註解標籤可見廣告碼是由Post的開始直至POST的末段。

以下是找到的代碼：

<div class='blog-posts hfeed'>


    <b:include data='top' name='status-message'/>


    <data:defaultAdStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
        <data:adStart/>
      </b:if>
      <b:if cond='data:post.trackLatency'>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>
最後張紅色的廣告代碼刪除就可以, 在上面可以見到它並非一舨所見的Google 廣告代碼, 它是透過Js控制,這些廣告代碼可能並非每次都一樣, 我在這裡只不過記錄一個方法給大家一個參考。

繼續閱讀...