今天網友留言怎麼將共享書籤放在文章上方，其實有關這個部分的教學，網路上有好幾個人有寫，所以通常有人問我的話，我都會指引對方到某些網站去看，但想想還是把作法寫出來好了，因為我想還是有從一開始加入blogger就一直看我的文章的朋友需要用到，只是目前在台灣共享書籤並沒有那麼盛行，最多就是加入FunP或是黑米，最近又多了Plurk，因為Plurk現在我也沒有在用，目前不研究，所以就介紹基本方式，要加的可以自己再找語法添上即可。
首先還是給書籤區一個定義，用的名稱是addToolTip
先在CSS區(就是<head>和</head>之間)，加入addToolTip這個元素的定義，就是你的書籤列的外觀顯示
.addToolTip{
text-align:right;
margin-bottom:0px;
}
text-align:right;就是在右邊
其他如果你要加入背景圖片也可以，再設定background等等，自行設定。
而共享書籤的語法如下，目前我使用的有這些，以下是要加入Html段落的語法，加在哪裡？怎麼加入底下再說明，
<p class='addToolTip'>
加入共享書籤： <a class='addToolTip' expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&url=" + 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='"http://myshare.url.com.tw/index.php?func=newurl&url=" + data:post.url + "&desc=" + 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='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + 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='"http://www.technorati.com/cosmos/search.html?url=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://digg.com/submit?phase=3&url=" + 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='"http://funp.com/pages/submit/add.php?url=" + 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 == "item"'>
書籤語法.....略
</b:if>
</div>
但如果你跟綸太郎一樣是使用羊男的繼續閱讀，找到下列
<b:if cond='data:blog.pageType == "item"'>在下方直接加入上方的書籤語法<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 == "item"'>
書籤語法.....略
</b:if>
</div>
顯示如下，
但你如果想要首頁或是分類的文章摘要及單篇文章都要顯示共享書籤，就是將
<div>
<b:if cond='data:blog.pageType == "item"'>
書籤語法.....略
</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模板教學課程---概說及基本結構
