Blogger Hack

新加入一些功能，在輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!一文中，
擴充了很多blog功能喔, 而且目前已經寫成了plugin的型式。
大家一起來擴充blogger吧~ 許多有用的功能....如下
##CONTINUE##

• 部落格會笑了！Blogger Smiley！
  
• 隱藏 Blogger NavBar
  
• 隱藏 Widget
  
• 繼續閱讀功能
  
• Sidebar 側邊網頁元素 折收/展功 功能
  
• 讓網誌作者的回應文章高亮度顯示
  
• 標籤雲 Label Cloud 功能
  
• Sidebar 側邊網頁元素 Icon 圖示功能
  
• 加入社群書籤功能
  

11種表情輸入對照碼： ※記得表情前面要空一格!
• 微笑 :) or :-)
• 大笑 :D or :-D
• 害羞 :$ or :-$
• 難過 :( or :-(
• 吐舌 :p or :-p
• 眨眼 ;) or ;-)
• 親親 :k or :-k
• 火大 :@ or :-@
• 閉嘴 :# or :-#
• 囧臉 :x or :-x
• 驚訝 :o or :-o
也許之後還會有更多擴充.

Tag Cloud

其實本來Blogger就有Tag排序的功能，只是沒有做成Tag Cloud的樣式。
所以我們只需要把原有的Tag List製做成Tag Cloud即可。
首先，先改CSS的設計部分：
/* Style for Label Cloud */
#labelCloud {
text-align: center;
}
#labelCloud .label-cloud li{
display: inline;
background-image: none !important;
padding: 0 5px;
margin: 0;
vertical-align: baseline !important;
border: 0 !important;
}
#labelCloud ul{
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#labelCloud .label-count {
padding-left: 0.2em;
font-size: 9px;
color: #777;
}
接下來，加入製做Tag Cloud的js code
紅色部分是自訂的地方，諸如blog網址、大小字型、顏色…等。
<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Functions used for Label Cloud: adjustLabel(), generateLabels()-->
var labels = new Object;
function adjustLabel(min, max, weight, total) {
  if (min &gt; max)
    var temp=(min-max)/Math.log(total), result=min-Math.floor(Math.log(weight)*temp);
  else
    var temp=(max-min)/Math.log(total), result=Math.floor(Math.log(weight)*temp+min);
  return result;
}  

function generateLabels(){
  var blogURL = 'http://abinlee.blogspot.com';
  var maxFontSize = 18;
  var minFontSize = 11;
  var maxColor = [204,204,204];
  var minColor = [119,119,119];
  var showCount = true;
 
  var labelColor= [];
  var labelSize = 0;
  var labelCount = new Array(); 
 
  for (var i in labels)
    if (!labelCount[labels[i]])
      labelCount[labels[i]] = new Array(labels[i])
 
  total = labelCount.length-1;
  section = document.getElementById('labelCloud');
  ul = document.createElement('ul');
  ul.className = 'label-cloud';
 
  for(var tag in labels) {
    for (var i=0; i &lt; 3; i++)
      labelColor[i]=adjustLabel(minColor[i], maxColor[i], labels[tag], total);
   
    labelSize = adjustLabel(minFontSize, maxFontSize, labels[tag], total);
    li = document.createElement('li');
    li.style.fontSize = labelSize+'px';

    a = document.createElement('a');
    a.title = labels[tag]+' articles with Label: '+tag;
    a.style.color = 'rgb('+labelColor[0]+','+labelColor[1]+','+labelColor[2]+')';
    a.href = blogURL+'/search/label/'+encodeURIComponent(tag);
   
    if (showCount) {
      span = document.createElement('span');
      span.innerHTML = '('+labels[tag]+') ';
      span.className = 'label-count';
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
      li.appendChild(span);
    }
    else {
      a.appendChild(document.createTextNode(tag));
      li.appendChild(a);
    }
    ul.appendChild(li);
    ul.appendChild(document.createTextNode(' '));
  }
  section.appendChild(ul);   
}
</script>

最後把widget code展開，找到id='Label1'的widget，將這整個widget以下面的code取代掉。
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <!-- Add Label Cloud -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'> 
  <div id='labelCloud'/>
    <script type='text/javascript'>
      <b:loop values='data:labels' var='label'>
        labels[&quot;<data:label.name/>&quot;] = <data:label.count/>;
      </b:loop>
      generateLabels();
    </script>
    <noscript>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>)
        </li>
      </b:loop>
      </ul>
    </noscript>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>   


ps. 因為這樣子做出的Tag Cloud是以Blogger給定的Tag list製做的，所以排序就是以Blogger的設定為主，以次數或是字母排序。當然，改成了Tag Cloud之後，還使用次數排序，就看不出效果啦~

Toggle/ Untoggle Your Blogger's Sidebar

參考自abintech的Blog hack系列
要做的工作就是：

1. 把想展開摺疊的區塊找出來，
2. 做一個按鈕或連結，當按下去的時候，去切換該區塊的狀態（display inline or none）。

打開完整範本原始碼，首先貼入處理這個動作的 Javascript (貼在head標籤內)：

<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName(&#39;div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
if (element[i].style.display == &#39;none')
element[i].style.display = &#39;inline';
else
element[i].style.display = &#39;none';
}
}
}
</script>

接下來，要去修改元件 (Widget) 的程式碼。同樣以個人資料 (Profile) 元件為例，找 <b:widget ...> 開頭 </b:widget> 結尾的區段，應該是類似下面這樣：

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
............. (程式內文略過不表)
</b:includable>
</b:widget>

這個元件的 ID = Profile1，是範本裡用來識別該元件的方法，接下來要插入動態切換的連結，可以用圖片(此處我用[+/-]代替)

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/><a href='javascript:void(0); style='float:right;margin:-23px 0;' onclick='javascript:ElementToggle("Profile1");'>[+/-]</a></h2>
</b:if> <div class='widget-content' id='toggle' style='display:none;'>
............. (程式內文略過不表)
</b:includable>
</b:widget>

搞定 !