用masthead_function在Blogger做成「書籤分享盒」及「物件收納盒」

此法是用masthead_function，將先前設計的一長串、共18個書籤分享圖示(以後若再增加、會越來越長)，隱藏在一個「書籤分享盒」之內，當移動你的滑鼠指標到此一「書籤分享盒」圖示時，會呈現一個下拉的小視窗、讓你選擇你要的書籤分享目的地。此構想是當看到瓦特比「自訂網址列圖示﹝FavIcon﹞ 」文章後的Bookmark而起的，我花了幾天時間的試驗、總算成功了。

簡而言之，此法共分三部分：

準備工作，還是照慣例：

1. 請先備份你的 「Blogger 範本 HTML」，以防出錯時可以救回來；

2. 勾選「展開小裝置」範本；

3. 在「Blogger 範本 HTML」內，分別安裝，

A. 第一部份，是定義小視窗的外觀(可自行更改其中參數)。以我的template為例，我將其放在

.comment-footer {
margin-bottom: 2px;}


的後面：

以下是第一部分語法

/* 加入書籤
------------------------------ */
.masthead_function {
font-family:Arial;
font-size:12px;
margin:0;
padding:1px 6px;
position:relative;
}
.masthead_function img {
border:0;
margin-bottom:-3px;
padding:0;
}
.masthead_function span {
background:#fff;
border:1px outset #768499;
display:none;
left:6px;
top:16px;
position:absolute;
text-align:left;
}
span:hover.masthead_function span {
display:block;
}
.masthead_function span a {
border-bottom:solid 1px #e2eeff;
color:#000000 !important;
display:block;
min-width:6em;
padding:1px 5px;
text-decoration:none;
white-space:nowrap;
}
.masthead_function span a:hover {
cursor:hand;
background:#e2eeff;
text-decoration:none;
}
/*ie patch*/
.masthead_function span.block {
display:block;
}
.masthead_function {
behavior:expression(void((window.ie_css_masthead_function_fix!=null) ?
ie_css_masthead_function_fix(this):0 ));
}


B. 第二部分，是設定滑鼠移到「書籤分享盒」圖示上時、讓上述的小視窗顯現。我放在

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 10px;
margin-bottom: 5px;
margin-$startSide: 0;
border: 1px solid #7C78B5;
padding: 4px;
}；


的後面：

以下是第二部分語法

function ie_css_masthead_function_fix(el)
{// 加入書籤
el.runtimeStyle.behavior="none";
if(window.navigator.userAgent.indexOf("MSIE 7")<0) onmouseover =" ie_css_masthead_function_mouseover;" onmouseout =" ie_css_masthead_function_mouseout;" classname="block" classname="">


C. 第三部分，是「書籤分享盒」語法。先將前一篇的「書籤語法」改成「新書籤語法」，如下：


<a class='addToolTip' expr:href='&quot;http://funp.com/pages/submit/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to FunP'><img alt='FunP' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/funP.gif' style='border:0;'/></a><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='Add to HEMiDEMi'><img alt='HEMiDEMi' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/HEMiDEMi.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.google.com/bookmarks/mark?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Google'><img alt='Google' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/google.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://tw.myweb2.search.yahoo.com/myresults/bookmarklet? title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Yahoo'><img alt='Yahoo' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/yahookimo.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://bookmark.udn.com/new?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Udn'><img alt='Udn' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/udn.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://favorites.live.com/quickadd.aspx?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to WindowsLive'><img alt='WindowsLive' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/live.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://myshare.url.com.tw/index.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to MyShare'><img alt='MyShare' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/MyShare.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.plurk.com/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Plurk'><img alt='Plurk' src='http://img.atlaspost.com//albumimages/226402/412303_normal_6c87b.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://cang.baidu.com/do/add?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Baidu'><img alt='Baidu' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/baidu.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.fiigo.com.tw/bookmark/add.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Fiigo'><img alt='Fiigo' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/fiigo.jpg' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.push-reporter.com/submit.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to push'><img alt='push' src='http://www.im.tv/blog/images/bookmark/yp.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.youpush.net/submit.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to YouPush'><img alt='YouPush' src='http://img.atlaspost.com//albumimages/226402/412303_normal_dd3cd.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.pushba.com/UrlPromotePage.aspx?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to PushBa'><img alt='PushBa' src='http://api.ning.com/files/IyNLC6ZAIJV1M7OxNmM4GynW-d45ce-jAX4HC1E0pEzhY9MuqYKS5N6mBdUjr8DOTJARiEJuvRwbUImbraWkpZJHcBMftTbD/Pushba.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://del.icio.us/post?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to delicious'><img alt='delicious' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/del.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://technorati.com/faves?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to technorati'><img alt='technorati' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/Technorati.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.furl.net/storeIt.jsp?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to furl'><img alt='furl' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/Furl.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://digg.com/submit?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to digg'><img alt='digg' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/digg.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.reddit.com/submit?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to reddit'><img alt='reddit' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/reddit.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.facebook.com/sharer.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to facebook'><img alt='facebook' src='http://img.atlaspost.com//albumimages/226402/412303_normal_faec8.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://twitter.com/home/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to twitter'><img alt='twitter' src='http://img.atlaspost.com//albumimages/226402/412303_normal_db420.jpg' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.addthis.com/bookmark.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to AddThis'><img alt='AddThis' src='http://s3.addthis.com/button1-bm.gif' style='border:0;'/></a>


再放入「書籤分享盒」語法，如下：

以下是第三部分語法

<div style="TEXT-ALIGN: left">
<span class="masthead_function">
<img src="http://www.taiwanus.net/photo/pics/Bookmark1.gif" border="0" />
<span>
插入「新書籤語法」
</span>
</span>
</div>



最後，如同前一篇的做法，再找到"post-labels"的位置，然後將 "完整的"「書籤分享盒」語法放在"/b:if"之後。

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
插入上述「書籤分享盒」語法
</span>


同樣地，你也可以選擇放在其他地方，我就不用贅述了。

結果請看我的文章標籤後、「書籤分享盒」隱藏時的狀態。此方法雖複雜，但可以將所有分享書籤都隱藏起來；當你要用時、將滑鼠移到其上面，就可讓它再顯現出來。我將它跟AddThis整合書籤展開時的狀態放在一起比較，請看標題下的圖。

相關文章：
簡單地在Blogger安裝「分享書籤」按鈕
__________________________________________________________________

後記：

在安裝第一及第二部分語法於template後，還可將你要收納的物件語法放入下列的「收納盒」語法，

<span class="masthead_function">
<img src="物件圖示網址.gif" border="0" />
<span>
你要收納的物件語法
</span>
</span>


然後再將 "完整的"「收納盒」語法，放入邊框中一個新的"HTML/JavaScript" Gadget中。