2011-03-28 02:06

在 Blogger 加上各種推文按鈕(修正Plurk 的Bug)

網友提出了 Plurk 的 bug
說實在的找了半天的文件
Blogger 並沒有可以直接使用的參數
看來又只能依靠 JavaScript 來處理這種鳥問題了

最終版程式碼
在 Blogger 加上各種推文按鈕



CSS 程式碼

原始碼
  1. /*Social Icon*/ 
  2. .social{ 
  3. background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat; 
  4. /*16*16按鈕的圖片網址*/ 
  5.  
  6. display: -moz-inline-box; 
  7. display: inline-block; 
  8. height:16px; 
  9. margin:0 4px; 
  10. text-indent:-999999px; 
  11. vertical-align:middle; 
  12. width:16px; 
  13. opacity:0.75; 
  14. overflow:hidden; 
  15. } 
  16. .social:hover{ 
  17. opacity:1; 
  18. } 
  19.  
  20. a.toFacebook{ background-position: 0 0; } 
  21. a.toPlurk{ background-position: 0 -16px; } 
  22. a.toTwitter{ background-position: 0 -32px; } 
  23. a.toTechnorati{ background-position: 0 -48px; } 
  24. a.toDelicious{ background-position: 0 -64px; } 
  25. a.toBuzz{ background-position: 0 -80px; } 
  26. a.toDigg{ background-position: 0 -96px; } 
  27. a.toStumbleUpon{ background-position: 0 -112px; } 
  28. a.toDesignFloat{ background-position: 0 -128px; } 
  29. a.getAtomRSS{ background-position: 0 -144px; } 
  30. a.toReader{ background-position: 0 -160px; } 

首先打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾
找到 ]]></b:skin> 將 CSS 的程式貼在上一行
小技巧：所有的瀏覽器都有搜尋功能 (Ctrl + F)，只要搜尋 "skin" 就可以找到這行了



HTML 程式碼

找尋 <div class='post-footer'> 這一行
然後向下找尋相對應的 </div>
這裡沒有比較清楚的標示
找起來會比較困難一點
將下面的程式貼在 </div> 之前
原始碼
  1. <div class='post-footer-line post-footer-line-99'> 
  2. <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> 
  3. </div> 


JavaScript 程式碼

找尋 </body> 這一行,將 JavaScript 的程式貼在上一行
原始碼
  1. <script type="text/javascript"> 
  2. var data = [ 
  3.    {&quot;c&quot;:&quot;toFacebook&quot;, &quot;u&quot;:&quot;http://www.facebook.com/sharer.php?u=$url$&amp;t=$title$&quot;,&quot;t&quot;:&quot;Facebook&quot;}, 
  4.    {&quot;c&quot;:&quot;toPlurk&quot;, &quot;u&quot;:&quot;http://www.plurk.com/?qualifier=shares&amp;status=$url$ ($title$)&quot;,&quot;t&quot;:&quot;Plurk&quot;}, 
  5.    {&quot;c&quot;:&quot;toTwitter&quot;, &quot;u&quot;:&quot;http://twitter.com/home?status=$title$ $url$&quot;,&quot;t&quot;:&quot;Twitter&quot;}, 
  6.    {&quot;c&quot;:&quot;toTechnorati&quot;, &quot;u&quot;:&quot;http://technorati.com/faves?add=$url$ $title$&quot;,&quot;t&quot;:&quot;Technorati&quot;}, 
  7.    {&quot;c&quot;:&quot;toDelicious&quot;, &quot;u&quot;:&quot;http://del.icio.us/post?url=$url$ $title$&quot;,&quot;t&quot;:&quot;Delicious&quot;}, 
  8.    {&quot;c&quot;:&quot;toDigg&quot;, &quot;u&quot;:&quot;http://digg.com/submit?phase=2&amp;url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Digg&quot;},   
  9.    {&quot;c&quot;:&quot;toStumbleUpon&quot;, &quot;u&quot;:&quot;http://www.stumbleupon.com/submit?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Stumble Upon&quot;}, 
  10.    {&quot;c&quot;:&quot;toDesignFloat&quot;, &quot;u&quot;:&quot;http://www.designfloat.com/submit.php?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Design Float&quot;}, 
  11.    {&quot;c&quot;:&quot;toReader&quot;, &quot;u&quot;:&quot;http://www.google.com/reader/link?url=$url$&amp;title=$title$&amp;srcURL=$home$&quot;,&quot;t&quot;:&quot;Google Reader&quot;}, 
  12.    {&quot;c&quot;:&quot;toBuzz&quot;, &quot;u&quot;:&quot;http://www.google.com/buzz/post?url=$url$&quot;,&quot;t&quot;:&quot;Buzz&quot;}, 
  13.    {&quot;c&quot;:&quot;getAtomRSS&quot;, &quot;u&quot;:&quot;/feeds/posts/default&quot;, &quot;t&quot;:&quot;Atom / RSS&quot;}    
  14. ]; 
  15.  
  16.  
  17. var list=document.getElementsByName(&#039;post-social-icons&#039;); 
  18.  
  19. for (var li=0,ll=list.length; li&lt;ll; li++){ 
  20.    var title=encodeURIComponent(list[li].getAttribute(&#039;t&#039;));     
  21.    var url=encodeURIComponent(list[li].getAttribute(&#039;u&#039;));     
  22.    var home=encodeURIComponent(list[li].getAttribute(&#039;h&#039;)); 
  23.    var temp=&quot;分享至 &amp;#65306;&quot;; 
  24.    for (var di=0,dl=data.length; di&lt;dl; di++){ 
  25.        var href=data[di].u.replace(&quot;$title$&quot;,title).replace(&quot;$url$&quot;,url).replace(&quot;$home$&quot;,home); 
  26.        temp+=&quot;&lt;a class=&#039;social &quot;+data[di].c+&quot;&#039; href=&#039;&quot;+href+&quot;&#039; title=&#039;分享至 &quot;+data[di].t+&quot;&#039;&gt;&quot;+data[di].t+&quot;&lt;/a&gt;&quot; 
  27.    }; 
  28.    list[li].innerHTML=temp; 
  29. }; 
  30. </script> 


JavaScript 原始碼

原始碼
  1. var data = [ 
  2.    {"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"}, 
  3.    {"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"}, 
  4.    {"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"}, 
  5.    {"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"}, 
  6.    {"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"}, 
  7.    {"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},   
  8.    {"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"}, 
  9.    {"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"}, 
  10.    {"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"}, 
  11.    {"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"}, 
  12.    {"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}    
  13. ]; 
  14.  
  15.  
  16. var list=document.getElementsByName('post-social-icons'); 
  17.  
  18. for (var li=0,ll=list.length; li<ll; li++){ 
  19.    var title=encodeURIComponent(list[li].getAttribute('t'));     
  20.    var url=encodeURIComponent(list[li].getAttribute('u'));     
  21.    var home=encodeURIComponent(list[li].getAttribute('h')); 
  22.    var temp="分享至 ："; 
  23.    for (var di=0,dl=data.length; di<dl; di++){ 
  24.        var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home); 
  25.        temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>" 
  26.    }; 
  27.    list[li].innerHTML=temp; 
  28. }; 


圖片來源：

Social Media Network Icons | Komodo Media
分類： ,
相關文章 ：

0 回應:

張貼留言

訂閱： 張貼留言 (Atom)