說實在的找了半天的文件
Blogger 並沒有可以直接使用的參數
看來又只能依靠 JavaScript 來處理這種鳥問題了
最終版程式碼
在 Blogger 加上各種推文按鈕
CSS 程式碼
/*Social Icon*/
.social{
background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
/*16*16按鈕的圖片網址*/
display: -moz-inline-box;
display: inline-block;
height:16px;
margin:0 4px;
text-indent:-999999px;
vertical-align:middle;
width:16px;
opacity:0.75;
overflow:hidden;
}
.social:hover{
opacity:1;
}
a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }
首先打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾
找到 ]]></b:skin> 將 CSS 的程式貼在上一行
小技巧：所有的瀏覽器都有搜尋功能 (Ctrl + F)，只要搜尋 "skin" 就可以找到這行了
HTML 程式碼
找尋 <div class='post-footer'> 這一行然後向下找尋相對應的 </div>
這裡沒有比較清楚的標示
找起來會比較困難一點
將下面的程式貼在 </div> 之前
<div class='post-footer-line post-footer-line-99'> <span class='post-social-icons' name='post-social-icons' expr:t='data:post.title' expr:u='data:post.url' expr:h='data:blog.homepageUrl'></span> </div>
JavaScript 程式碼
找尋 </body> 這一行,將 JavaScript 的程式貼在上一行<script type="text/javascript">
var data = [
{"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"},
{"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"},
{"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"},
{"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"},
{"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"},
{"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},
{"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"},
{"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"},
{"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"},
{"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"},
{"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}
];
var list=document.getElementsByName('post-social-icons');
for (var li=0,ll=list.length; li<ll; li++){
var title=encodeURIComponent(list[li].getAttribute('t'));
var url=encodeURIComponent(list[li].getAttribute('u'));
var home=encodeURIComponent(list[li].getAttribute('h'));
var temp="分享至 &#65306;";
for (var di=0,dl=data.length; di<dl; di++){
var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home);
temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>"
};
list[li].innerHTML=temp;
};
</script>
JavaScript 原始碼
var data = [
{"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"},
{"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"},
{"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"},
{"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"},
{"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"},
{"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},
{"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"},
{"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"},
{"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"},
{"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"},
{"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}
];
var list=document.getElementsByName('post-social-icons');
for (var li=0,ll=list.length; li<ll; li++){
var title=encodeURIComponent(list[li].getAttribute('t'));
var url=encodeURIComponent(list[li].getAttribute('u'));
var home=encodeURIComponent(list[li].getAttribute('h'));
var temp="分享至 ：";
for (var di=0,dl=data.length; di<dl; di++){
var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home);
temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>"
};
list[li].innerHTML=temp;
};
0 回應:
張貼留言