[Blogger] 在網頁側邊加入浮動式Facebook粉絲團外掛Widget,三分鐘搞定


相信很多人應該看過有些網站的側邊欄會嵌入浮動式的Facebook粉絲團Widget,預設的情況會收合起來貼齊著瀏覽器側邊,而當滑鼠移過去之後就會將整個Widget滑出,這樣的效果除了炫之外,另一個優點就是很容易被訪客看到,進而達到宣傳的效果,那麼在Blogger中怎麼加入這樣子的特效呢?網路上很許多的教學文章,我參考了幾個,都有不錯的呈現效果,但我選擇了一個最簡單的方式來介紹,熟練的話,用這個方法真的不需要三分鐘就可以搞定,可以說是懶人套用法,有需要的人快來試試吧,以下先捉個動態圖讓各位參考一下效果。

參考網頁:Two New Stylish Floating Facebook Like Box For Blogger
推薦閱讀:[Blogger] 如何在文章側邊加入浮動式的社群網站分享按鈕
實際DEMO:請點我觀看

使用教學

步驟一:進入後台,選擇「範本」→「編輯HTML」,搜尋「</head>」此關鍵字,並將以下語法貼在</head>之前

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" />

步驟二:把下列語法「Facebook粉絲團ID」替換成自己的,例如我的FB粉絲團網址是「http://www.facebook.com/jinnsblogfans」,那麼就把「Facebook粉絲團ID」換成「jinnsblogfans

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFacebook粉絲團ID&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://mbt33.blogspot.in/2012/12/two-new-stylish-floating-facebook-like.html" target="_blank">Get This!</a></span></div></div> </div> </div>

步驟三:在後台點選「版面配置」→「新增小工具」→選擇「HTML/Javascript」並把步驟二的語法貼上即可,就這麼簡單喔,如果你也覺得好用的話,請記得隨手按個讚喔!

註1:作者還有提供另一個樣式,使用的方法都是一樣,如果想套用另一種樣式的話,語法請到官方網頁取得
註2:語法中有用到「fb1-right.png」這張圖,若怕圖片的連結失連,可以自行將圖傳到自己的空間,另外,亦可以備份步驟一的Javascript檔