【教學】部落格Blog如何加入臉書FB 粉絲團滑動、浮動標籤教學 @ 旅食玩家埃德溫手札記

主頁.png

現在很多人都在使用部落格，但使用者會想要美化自己的版面

或者想增加一些東西在版面上來提升版面的質感

應該都有逛過其他人的部落格，會看的到某些人的版面右側有『臉書粉絲團的標籤』

是不是覺得很酷呢!? 看教學吧!!

一步驟一步驟跟著做都可以成功才對

▼請先進入管理後台→側欄管理頁面

側欄管理.png

▼點選新增版位

新增版位.png

▼標題欄位可隨意打，接著請複製以下語法至內容欄位

<div class="fbbox" style="right: -292px;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fbusiness.facebook.com%2F274671149981887%2F&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="700" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true";background-color: white;></iframe>
</div>
<script>
jQuery(function($){
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-500"}, "medium");
}, 500);
});
</script>

輸入參數.png

▼(https://www.facebook.com/旅食玩家-274671149981887/)

其他人的後面只有英文(複製英文就好)

我的粉專沒變更過網址名稱，所以有《中文+一串數字》

所以只需要後半段的數字

(如果你的情形跟我相同，你複製中文+數字進去是無效的唷!!)

粉絲專業.png

▼範例如下

側欄.png

▼複製進去後點選底下【送出】，接著從暫存區拖拉至側欄區塊

才會有作用唷!!!

拖拉.png

▼請至【樣式管理】/【部落格CSS原始碼】內容區拉至到最底下

複製下面語法至最底層空白處

css新增語法.png

CSS語法

.fbbox{background: url("http://pic.pimg.tw/blogbackup/1416463254-1526616050.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 0 0 46px;width: 292px;z-index: 99999;position:fixed;right:-260px;top:20%;}
.fbbox div{border:none;position:relative;display:block;}
.fbbox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fbbox span a{color: #808080;text-decoration:none;}
.fbbox span a:hover{text-decoration:underline;}

▼點選【儲存】後，切回主畫面觀看有無成功呢!!

成功範例1.png