♡*。｡ღ雲端上的背包客ღ｡。*♡

許多人喜歡在部落格上加FB的粉絲團的側邊欄，其實他的製作也算是容易；經過驗證測試後，這兒記錄下製作的方式：

【步驟一】尋找側邊欄圖片

第一個步驟當然要找到可放在側邊並且意義明顯連結FB的圖片，並且記下這個圖片的超連結位址，例如下圖：

 
（提示：最好能夠收藏到固定的位置，否則一旦這個連結不見了，那側邊欄的效果也會消失；也許Google的圖片蒐尋可以幫上忙）

【步驟二】修改自訂樣式的CSS語法

有了上述圖片的超連結位址，接著就要到痞客邦的自訂樣式裡去修改CSS的語法，也就是要把痞客邦的預設圖片的位址改成我們自己的位址（就是前述的圖片超連結位址）。感覺好像有點可怕、又很技術性，不過其實步驟很簡單。

首先先到《管理後台》，在左側最下方找到《自訂樣式》，點擊後右邊會出現《CSS 原始碼編輯》，點擊《前往》的按鍵；如下圖所示：

     

然後在所出現的編輯框框中的最下方，找到“.fbbox{background:url("…")”，再把前述的圖片超連結位址替換掉預設的圖片位址，如下圖的藍色框框：

     

【步驟三】連結FB粉絲專頁

走到這裡感覺有點累了，不過這是最後一個步驟了。

首先要先知道粉絲團的超連結網址。進到FB後點選要連結的粉絲專頁，從瀏覽器上的網址列就可以查到粉絲專頁的網址，記下那個名稱，如下圖所圈起來的地方。

   

再來就是要把這個名字連結到前面所製作的圖片了。

進到部落格的後台管理，選擇左側的《側邊欄位設定》後，再選擇最右側的《新增版位》；

 

在出現的《自訂欄位標題》填上你的粉絲專頁的名稱或是其他你喜歡好記的名字，例如「雲端上的背包客」；這個主要是作為這個側邊欄的辨識名稱

在其下的《自訂欄位內容》填上下列內容，並且把「你的粉絲專頁網址上的名稱」改成剛剛查到的字串。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $(".fbbox").hover(function(){
      $(this).stop().animate({right: "0"}, "medium");
    }, function(){
      $(this).stop().animate({right: "-250"}, "medium");
    }, 500);
  });
</script>
<div class="fbbox" style="">
  <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F你的粉絲專頁網址上的名稱&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
  </div>
</div>

按「送出」後就可以把這個新增加的版位拉到側邊欄裡就大功告成了。