2009年6月23日 星期二

單篇文章加入共享書籤(Social-Bookmarks)


今天網友留言怎麼將共享書籤放在文章上方,其實有關這個部分的教學,網路上有好幾個人有寫,所以通常有人問我的話,我都會指引對方到某些網站去看,但想想還是把作法寫出來好了,因為我想還是有從一開始加入blogger就一直看我的文章的朋友需要用到,只是目前在台灣共享書籤並沒有那麼盛行,最多就是加入FunP或是黑米,最近又多了Plurk,因為Plurk現在我也沒有在用,目前不研究,所以就介紹基本方式,要加的可以自己再找語法添上即可。

首先還是給書籤區一個定義,用的名稱是addToolTip

先在CSS區(就是<head>和</head>之間),加入addToolTip這個元素的定義,就是你的書籤列的外觀顯示
.addToolTip{
text-align:right;
margin-bottom:0px;
}

text-align:right;就是在右邊

其他如果你要加入背景圖片也可以,再設定background等等,自行設定。

而共享書籤的語法如下,目前我使用的有這些,以下是要加入Html段落的語法,加在哪裡?怎麼加入底下再說明,
<p class='addToolTip'>
加入共享書籤&#65306; <a class='addToolTip' expr:href='&quot;http://www.hemidemi.com/user_bookmark/new?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' src='http://sunyata.c.googlepages.com/hamidemi.gif'/></a>
<a class='addToolTip' expr:href='&quot;http://myshare.url.com.tw/index.php?func=newurl&amp;url=&quot; + data:post.url + &quot;&amp;desc=&quot; + data:post.title' target='_blank' title='加入MyShare分享書籤'> <img alt='MyShare個人書籤' border='0' src=' http://sunyata.c.googlepages.com/myshare.gif'/></a>
<a class='addToolTip' expr:href='&quot;http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' target='_blank' title='加入Yahoo分享書籤'><img alt='Yahoo分享書籤' border='0' src=' http://sunyata.c.googlepages.com/yahoo.jpg'/></a>
<a class='addToolTip' expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' target='_blank' title='加入Technorati分享書 籤'><img alt='Technorati分享書籤' border='0' src='http://sunyata.c.googlepages.com/technorati.jpg'/></a>
<a class='addToolTip' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='加入 Del.icio.us分享書籤'><img alt='Del.icio.us個人書籤' border='0' src=' http://sunyata.c.googlepages.com/delicious.jpg'/></a>
<a class='addToolTip' expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' target='_blank' title='DiggIt!'><img alt='DiggIt!' border='0' src=' http://sunyata.c.googlepages.com/digg.jpg '/></a>
<a class='addToolTip' expr:href='&quot;http://funp.com/pages/submit/add.php?url=&quot; + data:post.url' target='_blank' title='貼到funP'><img alt='funP分享書籤' border='0' src='http://funp.com/images/tools/post_04.gif'/></a>
</p>

其中的title='加入xxxxxx分享書籤'裡的的文字可以自己修改你想顯示的字,這是滑鼠移到圖片上方會顯示的文字。

如果你要再增加其他書籤,可以在</p>之前自行加入
<a class='addToolTip' expr:href='加入書籤的語法連結網址' target='_blank' title='貼到XXX'><img alt='xxx分享書籤' border='0' src='圖片網址'/></a>
不過每家的加入書籤的網址方式都不一樣,要自己Google搜尋,我知道的就是上面那幾個。

另外這裡的圖片你可以先自行下載,或是網路上抓更多是用的圖片,再傳送到你的空間上,把src='圖片網址'改成你的,因為我是存在Google Page Creator裡,過一陣子就會消失,所以請改成你自己的圖片網址。

首先顯示共享書籤的位置有兩種,文章上方或是下方,我的方式是顯示在單篇文章裡,首頁不顯示,也就是說文章摘要的地方不顯示,只有在整篇文章展開的時候才出現共享書籤,不然那個書籤小圖,會讓整個首頁覺得很花。

切記一定要備分,因為這部分有些複雜,所以才一直不想寫,因為大部分的人都有使用繼續閱讀的功能,作法會不太一樣,如果你是使用阿土伯的繼續閱讀,我記得裡面已經有共享書籤的語法,應該就不用看這教學了。

將共享書籤加在文章上方
版面配置→修改HTML→展開小裝置範本,找到
<div class='post-body entry-content'>就是 class='post-body的這個敘述的那一行,因為每個版本都不一樣,不一定用post-body這個敘述,要自己判斷,記得這是你沒有使用繼續閱讀Hacks的朋友,是這樣用的,
在下方加上以下語法
<div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
書籤語法.....略
</b:if>
</div>

但如果你跟綸太郎一樣是使用羊男的繼續閱讀,找到下列
<b:if cond='data:blog.pageType == &quot;item&quot;'>
在下方直接加入上方的書籤語法<p class='addToolTip'>到 </p>即可,那個上下各兩行的語法就可以不用加入。

另外用其他繼續閱讀語法的朋友,也是參照上面羊男的作法,如果沒法成功,可以請教該作者,是否願意多寫這方面的語法,或是有成功的朋友,也可以分享我再把資料補充上去,先謝謝大家。

顯示效果如下,


有的人或許會問,我不要書籤的框框,怎麼拿掉呢?
這是因為你的單篇文章圖片的設定,本來就有框,找到類似
.post img {
padding: 4px;
border: 1px solid $borderColor;
}

這是原先的設定,
你可以把他改成
.post img {
padding: 1px;
border: 0;
}

把padding改成1px圖片就會緊密些,border改成0;顯示如下,看起來就順眼多了。

不過post img這個定義,會影響到文章裡面其他圖片的編輯,所以這是要注意的地方。

將共享書籤加在文章底端
版面配置→修改HTML→展開小裝置範本,找到<p class='post-footer-line post-footer-line-1'>
然後將以下語法加在這行的上方,是上方歐,不要看錯了,
<div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
書籤語法.....略
</b:if>
</div>


顯示如下,


但你如果想要首頁或是分類的文章摘要及單篇文章都要顯示共享書籤,就是將
<div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
書籤語法.....略
</b:if>
</div>

上方書籤語法的上下兩行的語法都刪除即可,只剩書籤語法,但是這不適用羊男的繼續閱讀,這是要提醒大家的。

這樣一來你也就可以擁有一個推薦文章或是自己收藏書籤的功能列了,方便自己也方便網友使用,還有這篇真的有點複雜,建議頭腦比較清晰的時候再來嘗試,因為自己寫了2個多鐘頭,才把這篇文章生出來,有問題的再來討論吧。

2009.6.25補充
先謝謝Steven暗夜咆哮也分享他們修改的心得,
首先有些模板在文章標題上方會出現程式碼,Steven提出解決之道,是將.AddToolTip放在/* Variable definitions這行敘述上即可。

其實.addToolTip這個定義是可以省略的,只是他的預設位置是在左邊,如果因為這個定義讓你的版面出現錯誤,把這個定義刪除,然後直接在書籤語法裡用div來定義位置也可以。
<div align="right">
書籤語法
</div>

暗夜咆哮則是提供使用繼續閱讀懶人法的除錯方式,
將語法放在
<p class='post-footer-line post-footer-line-1'>之上
可以讓書籤列出現在文章下方
或是
<div class='post-body entry-content'>之下
可以讓書籤列出現在文章上方
這是大家可以試試看的。

參考來源:
在每篇文章底端放置各大共享書籤 for blogger
Google AdSense只顯示在單篇文章裡 for Blogger
延伸閱讀:
Blogger template模板教學課程---概說及基本結構

11 則留言:

  1. 設定完成了,的確是蠻複雜的,
    感謝您的分享與辛苦。

    回覆刪除
  2. 這次真的很複雜耶~
    但是我發現兩個問題,也許是因為我是用"繼續閱讀懶人加強版"吧?
    首先,我發現我就算不加入addToolTip的錶頭定義,還是可以用?如果加了,反而會在標題出現語法。
    第二的問題,我只有想放在文章上面,但是都會自動跑到留言的上方,文章的下方,而且我沒改語法都已經變成在左邊...
    不知道,有沒有解呢?

    回覆刪除
  3. To 暗夜,不加入addToolTip是可以用,但是預設是在左邊,那你就使用文章裡說的,直接加入書籤語法,上下兩列的程式碼不要加入看看,如果成功再告訴我,我再來修改,因為我沒有用繼續閱讀懶人版。

    回覆刪除
  4. 如果位置對了,還是跑出語法,那就是在書籤語法上下加入,
    <div align="right">
    書籤語法
    </div>
    然後.addtooltip這個定義刪掉
    這樣看能不能成功

    回覆刪除
  5. 你好我有貼成功了,只不過…位置我不知道是不是我弄錯了,變成在文章的最下方~~不過謝謝你辛苦的寫出這一篇文

    回覆刪除
  6. 你加到post-footer-line post-footer-line-3後面,所以會跑到最下方,如果要放在文章上頭,應該是加在<div class='post-body entry-content'>這個做法才是。

    回覆刪除
  7. 關於二樓--會在標題出現語法--的問題,我也有出現,
    但我將.addToolTip安插在
    /* Variable definitions這一段上面,
    就正常了,供大家參考...

    回覆刪除
  8. 謝謝steven提供的方式,其實這也是我一直以來的疑問,一樣的css語法,放在不同的地方不同的模板呈現效果就不同,傷腦筋,因為我也有試過放在A成功,放在B失敗,所以這篇很難寫就是這樣,不知有什麼可以完全解決的方式,如果是放在文章頁尾是沒有問題,文章上頭就有問題。

    回覆刪除
  9. 綸太郎:
    經過一番小小的測試,我終於成功的安裝了,也是過那兩行語法。我大致歸納一下,雖然不知道其他的網友能不能OK拉。

    1.定義.addToolTip是不需要的,然而就像您寫的,必須在書籤語法中加入
    div align="right">
    書籤語法
    /div>
    否則將會出現在左邊。

    2.使用繼續閱讀懶人加強版,不能比照羊男的方式,狀況也會與大大寫的稍微差那麼一點;如果要放在文章上方,就必須放在
    p class='post-footer-line post-footer-line-1'>
    或者
    div class='post-body entry-content'>
    的上下(我試過,沒有影響)。
    如果是放在羊男版的語法位置
    b:if cond='data:blog.pageType == "item"'>
    下方,則會出現在"意見"的上方(也算文章下方吧)。

    其他則是與文章相同。

    回覆刪除
  10. 附帶一提,因為HTML留言問題,所以我把"<"都拿掉了,要煩請大大自己加回去

    回覆刪除
  11. 我是用羊男的,就是照我上面的用法,可是我是出現在文章上方。

    其實正確的是放在
    <div class='post-body entry-content'>的下方,就會出現在文章上方,但是首頁和單篇文章都會出現,所以我才把它放在 b:if之後,不過你的模板是出現在文章下方,我有空再來試看看,和addtooltip定義是否有關,每個人情形都不太相同,我會把你這部份補上的,謝謝你的分享。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能