如何放置宣傳粉絲專頁的外掛或是浮動在畫面右方的粉專外掛呢?
(如果想看怎麼設定側欄連結分享看這篇痞客邦新手入門[2] 如何編輯推薦連結區)
梅花的語法筆記
檢視CSS標籤F12 (Ctrl+Shift+I) *開發人員工具*
部落格整體 #body *換背景底圖**換字體**換部落格ICON**設計LOGO*
封面橫幅#banner/#header *換封面底圖**部落格標題敘述大小位置*
文章區塊 #content *改文章標題字體、背景*
公告版面 #spotlight *公告版面應用*
側欄區塊 #links *改側欄標題的背景**Facebook粉專外掛**音樂外掛**YouTube外掛**分享連結階層*
實用推薦 *看所有語法筆記文章**梅花的語法筆記本**看梅花的CSS標籤筆記**文章內的目錄(錨點)**關閉遮蓋版面的廣告**隱藏上方藍色選單**連結Google相簿**圖片瘦身不失真**讓部落格可以被Google**Google Analytics分析*
精美分隔線圖片大全語法DIY美美的標題分隔線
痞客幫新手入門
《在側欄放FB粉專外掛》
以下文章有參考這一篇教學,因為它寫的步驟很清楚,大家也可以直接參考這位大大的做法就行囉!!
進到FB官方的代碼產生器網頁粉絲專頁外掛程式,輸入你的粉專網址,下面可以自行設定寬度、高度
因為我想要讓粉專的動態圖片能夠完整顯示,我有自己設定寬、高,設定好之後下面都會自動跑出外掛的預覽
設定好之後按下面的"取得程式碼"
然後在你的右上角頭像我的部落格後台側欄管理新建一個側欄欄位
之後把編輯好的欄位直接拖曳到側欄一即可在部落格顯示(兩欄式的版型放側欄一;三欄式版型側欄一、二都可以放)
※如果你的粉專外掛用出來之後發現會跟你的文章版面有互相重疊(遮擋)的情況
建議到右上角頭像我的部落格後台樣式管理 部落格CSS原始碼,按Ctrl+F搜尋 #links
看一下這個標籤裡面的width(寬度)設定是多少,假設你的width設定是240px,在上面的步驟用粉絲專頁外掛程式
設定外掛寬度的時候就可以採用跟你的版面側欄一樣大小的寬度,這樣就不會跟文章區內容衝突囉!
《在右邊的浮動FB粉專外掛》
2020.07.01更新(引用語法來源: https://tw.piliapp.com/ )
浮動粉絲專頁外掛生成器(不能自己調整大小) https://tw.piliapp.com/pilipress/float-fb/
外掛的語法生成之後,可以放在部落格描述的地方,或者是放在公告版位都可以喔!(梅花問路外掛放在側欄)
執行上述網址粉專浮動外掛生成器之後語法如下,後面梅花有對這個浮動外掛進行改良 黃色標示改成你的粉專網址
<script id="float_fb" src="//pic.sopili.net/pub/float_fb/widget.js" data-href="https://www.facebook.com/heavenfortress" async></script>
可以調整大小的浮動粉專(梅花優化版浮動粉專語法)建立一個側欄區塊把語法放進去即可生效
黃色標示改成你的粉專網址 綠色標示調整粉專外掛顯示寬度 紫色標示調整粉專外掛顯示高度
<script id="float_fb" src="//pic.sopili.net/pub/float_fb/widget.js" data-href="https://www.facebook.com/heavenfortress/" async data-tabs="timeline" data-width="500" data-height="500"></script>
《住右邊但要打它才會跳出來的FB粉專外掛》 (教學語法by Dribs&Drabs)
因為它的語法設計有她的版權,請大家自行過去看一下--------------------------------------------
我原本把她這段語法外掛放在側欄,不過應該是因為版型設計的關係,我放在側欄反而沒有成功
後來我是改成放在"側欄管理"內容欄的"頁尾描述"裡面,就成功顯示出來囉!!
這個外掛有兩個步驟,
第一步的語法放在以下三個地方任選側欄、公告版位、頁尾描述
我放的是 天界之舟 粉絲專頁
第二步的語法放在CSS原始碼裡面,就自己進去然後貼在原本語法的最前面或是最後面吧!
梅花是選擇貼在最後面,給大家參考囉!
以下筆記保留,請勿使用
《其他舊的筆記》
為了讓標題完整顯示,寬度width設定325,但是放置了之後我遇上了一些小問題!!
因為版面設計的關係,兩邊打架了!!
但是我任何一邊都不想犧牲,繼續踏上我的語法修改旅程(debug預備!!)
這裡真的完全沒有任何用處...
側欄的語法是什麼呢? 我在這裡找到答案! (小白鯨教學) #links
我原本的width只設定了200px
直接把width:200px改成325px,然後按了"預覽".....沒變化
接著我又參考了一篇教學文章
在我的的樣式語法裡面把#container寬度從950px先調到1100px
然後看一下我的#content寬度是670px (#content是指文章區塊)
#container 、#content、#links 1100px 、670px、325px
看完這段梅梅覺得崩潰
好吧,秉持著不放棄的精神,我們繼續尋找看看問題在哪裡...
來看一下#links-row-1結果我在我的CSS裡完全搜尋不到
再來檢查一下 #content、#links 有沒有用到margin的語法
結果我也看不出端倪
先來了解一下margin是什麼!!
我又一次參考了這篇告訴我側欄是#links的文章(小白鯨教學)
然後了解了margin指的是內文文字跟邊界的距離
在小白鯨發表的這篇文章有很詳細的可以比對看到調整margin數值會帶來什麼樣的改變,大家也可以前往參考~
會打這一篇邊測試邊紀錄的文章,靈感也來自小白鯨
這樣可以一邊記錄自己遇上什麼問題,怎麼解決的,就像是做筆記
如果有人遇上相同的問題,就可以省去很多摸索的時間了!
這裡都是引用小白鯨的教學做探討
我們可以把語法分開如下方所示的設定
(引用小白鯨的內文)
或者是全部把語法寫在同一行
(引用小白鯨的內文)
先紀錄一下我要動刀前的語法好了
我先針對#links底下的做紀錄還有更改
#links {
font-size:14px;
font-family:新細明體; Arial;
float:left;
width:325px;
overflow:hidden;
}
.box {
font-size:14px;
font-family:Arial;
margin:0 auto 10px;
}
.box-title { 側欄標題
height:32px;
font-size:15px; 標題文字大小
font-family:Arial; 標題字型
line-height:32px; 每一行文字的行距(小白鯨原文也有測試不同行距產生的效果)
overflow:hidden;
color:#333; 標題文字的顏色
background:url(https://pic.pimg.tw/w08232003/1364543200-652809323.jpg);
padding:0 10px 3px 30px;
}
.box-text {
font-family:Arial;
color:#999;
font-size:14em;
padding:10px;
}
.box-text a {
color:#777;
}
.box-text a:hover {
color:#444;
}
.inner-box ul {
margin:0 0 0 1.3em;
}
.box-more {
text-align:center;
margin:5px auto;
}
.box-more a {
font-size:14px;
font-family:Arial;
color:#999;
background:#eee;
border:1px solid #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:1px 4px;
}
.box-more a:hover {
color:#444;
text-decoration:none;
background:#f5f5f5;
border:1px solid #ccc;
}
我的.box-title裡頭沒有width(寬度)的設定,如果有這段的話
.box-title裡的width指的是"標題的寬度",要注意這裡設定的width不可以大於#links裡面的width設定的數值
(引用小白鯨的內文)
#content裡面的margin(邊界距離)也要算進去
我的#content(670px)+#links(325px)=995px
接著看一下#content裡面margin的設定 (複習一下如果margin寫在同一行是 上、右、下、左)
大概評估一下左、右的邊界距離,但...em...單位不一樣怎麼換算阿....
參考這一篇了解一下-CSS 文字大小 em 和 px 的單位換算比較表,得知1em=16px
不過就在我一直不停的在我的CSS裡找尋線索的同時我發現我的CSS裡面竟然有兩個#container
我把兩個#container底下的width都改成1100px,整個links(側欄)+content(文章區)寬度就有拓寬
雖然我的封面橫幅(banner)長度變成不夠長了......(這意味著我又要繼續debug)
來看一下成功改寬度之後的樣子
我的粉絲專頁iframe終於不會擋住文章了(成功!),banner就再去找另外一個長一點的圖吧....
我的banner圖片應該至少寬度也要有1100px或是1200px..... (原本選的圖是1000px)
我把#banner寬度從原先設定的1000px1100px暫時先把右上的空白處裡掉囉...
複習一下語法筆記
#container是整個#links(側欄)和#content(文章區)的總和
但是在計算的時候要記得注意一下margin(邊界設定)的寬度也要計算進去
如果margin語法寫在同一行,依次代表的是上、右、下、左
如果用的是三欄式的版型,才會有#links-row-1(三欄式第一欄)、#links-row-2(三欄式第二欄)
#links-row-1(三欄式第一欄) + #links-row-2(三欄式第二欄) 要小於等於 #links(側欄)的寬度
留言列表