18.bmp

網路上可以查到許多Facebook浮動視窗的語法,但實際用起來發現缺點不少,例如IE瀏覽器觀看時無法順利讓視窗滑出,或是只是要捲動捲軸卻一直動到Facebook浮動視窗,等問題一直困擾著我,相信大家也深受其擾。最近比較認真研究語法,成功解決上述問題,且讓Facebook視窗能夠符合瀏覽器高度,訪客更清楚地看到所有的貼文。呈現效果可以看本頁右手邊,需要點擊Facebook按鈕才會有效果喔!

 

01.gif

效果大概像上圖這樣,但展開的方式有動畫的效果,語法很簡單,分成以下兩個步驟,放在不同的位置,請詳看說明。適用於任何平台、網站。

 

Step 1. JavaScript

放置位置(以下擇一):側欄 / 公告版位 / 頁尾描述

請把以上語法的 DribsAndDrabs 改成你的粉絲團網址後方的名稱 (用Ctrl+f很方便)

例如 https://www.facebook.com/DribsAndDrabs/ 的名稱為 DribsAndDrabs

 

Step 2. CSS

放置位置:CSS原始碼 ( 後台 > 樣式管理 > 部落格CSS原始碼 )

這段不需要修改,若想替換掉Facebook的圖樣,請搜尋 http://pic.pimg.tw/weilife/1464262350-2208202000.png

若想修改底色,請搜尋 #4867aa,共有兩處須修改

套用後被快捷功能bar遮住的話,可以修改#MYFB_slide{top: 0px;} ,數值改成30

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

創作者介紹
創作者 Dribs & Drabs 的頭像
Dribs & Drabs

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 留言(74) 人氣()