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模板教學課程---概說及基本結構

2009年6月21日 星期日

可愛鄉村拼布風的圖案網站


這是一個與眾不同的網頁背景圖案網站,為什麼這麼說呢?因為這是由一個線上販售的布料網站Red Rooster Fabrics所提供的,專為布料設計圖案的Patterns展示,有將近20個設計師為這個網站設計的布料款式,風格比較接近鄉村或是拼布的圖案。

2009年6月11日 星期四

Google Sites可以放AdSense廣告賺錢了


感謝來自馬來西亞的王子留言通知這個消息,剛才試用了一下,『是金的』,真的可以使用了,在側邊欄及主要頁面區塊都可以加上Google AdSense的廣告,只是目前沒法自定顏色,由官網根據你的模板來配色,不過還是令人覺得高興,因為在Google Page Creator逐漸消失之際,我想很多人會慢慢開始使用Google Sites的服務,而可以放上廣告,或許有人會更加努力的經營(例如我,哈哈!)。

模板templates的背景與標題列圖庫網站

常常我們想有一個屬於自己風格的部落格,但是尋找模板資源時看來看去都是差不多的版面,如果自己會設計的朋友,或許可以自行創造出屬於自己的模板風格,但像綸太郎一樣是設計苦手的使用者而言,如何想製作一個不會撞版的部落格,一些圖庫網站就相對的重要多了。

2009年6月4日 星期四

單篇隨機文章‧讓舊文出來透透氣


此功能已失效
先前綸太郎有介紹"隨機文章"的使用方法,請見如何產生隨機文章---B Stir一文,這次要介紹的是沒有顯示文章標題的真正的亂數配成的單篇隨機文章的工具。