image

如何放置宣傳粉絲專頁的外掛或是浮動在畫面右方的粉專外掛呢?

 

(如果想看怎麼設定側欄連結分享看這篇痞客邦新手入門[2] 如何編輯推薦連結區)

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg *開發人員工具*


部落格整體 #body 箭頭粉.jpeg *換背景底圖*箭頭-15.png*換字體*箭頭-15.png*換部落格ICON*箭頭-15.png*設計LOGO* 


封面橫幅#banner/#header 箭頭粉.jpeg *換封面底圖*箭頭-15.png*部落格標題敘述大小位置*


文章區塊 #content 箭頭粉.jpeg *改文章標題字體、背景*


公告版面 #spotlight 箭頭粉.jpeg *公告版面應用*


側欄區塊 #links 箭頭粉.jpeg *改側欄標題的背景*箭頭-15.png*Facebook粉專外掛image箭頭-15.png*音樂外掛image箭頭-15.png*YouTube外掛image箭頭-15.png*分享連結階層*


實用推薦 箭頭粉.jpeg *看所有語法筆記文章*箭頭-15.png0074.gif梅花的語法筆記本0074.gif箭頭-15.png*看梅花的CSS標籤筆記*箭頭-15.png*文章內的目錄(錨點)image箭頭-15.png*關閉遮蓋版面的廣告*箭頭-15.png*隱藏上方藍色選單*箭頭-15.png*連結Google相簿*箭頭-15.png*圖片瘦身不失真*箭頭-15.png*讓部落格可以被Google*箭頭-15.png*Google Analytics分析*
箭頭-15.png精美分隔線圖片大全箭頭-15.png語法DIY美美的標題分隔線

 

 

痞客幫新手入門

痞客邦新手入門⑴|新手基礎入門設定 開啟部落格 設定作者名稱 痞客邦新手入門⑹|如何自訂個性化ICON圖標
痞客邦新手入門⑵|如何編輯側欄推薦連結區 痞客邦新手入門⑺|用語法外掛來撥放音樂
痞客邦新手入門⑶|宣傳Facebook粉專、浮動FB粉專外掛​​​ 痞客邦新手入門⑻|移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷|利用公告版位製造多樣性 痞客邦新手入門⑼|如何自己設定文章顯示的縮圖
痞客邦新手入門⑸|修改版面的字體字型 痞客邦新手入門⑽|如何在痞客邦發表文章

 

 

《在側欄放FB粉專外掛》

 

以下文章有參考這一篇教學,因為它寫的步驟很清楚,大家也可以直接參考這位大大的做法就行囉!!

 

進到FB官方的代碼產生器網頁粉絲專頁外掛程式,輸入你的粉專網址,下面可以自行設定寬度、高度

因為我想要讓粉專的動態圖片能夠完整顯示,我有自己設定寬、高,設定好之後下面都會自動跑出外掛的預覽

image

設定好之後按下面的"取得程式碼"image

image

 

然後在你的右上角頭像image我的部落格後台側欄管理新建一個側欄欄位

 

image

 

之後把編輯好的欄位直接拖曳到側欄一即可在部落格顯示(兩欄式的版型放側欄一;三欄式版型側欄一、二都可以放)

image

 

※如果你的粉專外掛用出來之後發現會跟你的文章版面有互相重疊(遮擋)的情況

建議到右上角頭像image我的部落格後台樣式管理 部落格CSS原始碼,按Ctrl+F搜尋 #links

看一下這個標籤裡面的width(寬度)設定是多少,假設你的width設定是240px,在上面的步驟用粉絲專頁外掛程式

設定外掛寬度的時候就可以採用跟你的版面側欄一樣大小的寬度,這樣就不會跟文章區內容衝突囉!

 

《在右邊的浮動FB粉專外掛》

                                       2020.07.01更新(引用語法來源: https://tw.piliapp.com/ )

1075864935971_5020.gif1075864935971_5020.gif1075864935971_5020.gif

浮動粉絲專頁外掛生成器(不能自己調整大小) 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>

1075864935971_5020.gif1075864935971_5020.gif1075864935971_5020.gif

 

 

《住右邊但要打它才會跳出來的FB粉專外掛》 (教學語法by Dribs&Drabs)

     因為它的語法設計有她的版權,請大家自行過去看一下--------------------------------------------

我原本把她這段語法外掛放在側欄,不過應該是因為版型設計的關係,我放在側欄反而沒有成功

後來我是改成放在"側欄管理"內容欄的"頁尾描述"裡面,就成功顯示出來囉!!

 

這個外掛有兩個步驟,

第一步的語法放在以下三個地方任選側欄、公告版位、頁尾描述

我放的是 天界之舟 粉絲專頁

 

第二步的語法放在CSS原始碼裡面,就自己進去然後貼在原本語法的最前面或是最後面吧!

梅花是選擇貼在最後面,給大家參考囉!

 

 

 

 

 

歐風灰色分隔線-1.png以下筆記保留,請勿使用歐風灰色分隔線-1.png

《其他舊的筆記》

為了讓標題完整顯示,寬度width設定325,但是放置了之後我遇上了一些小問題!!

image

因為版面設計的關係,兩邊打架了!! 

但是我任何一邊都不想犧牲,繼續踏上我的語法修改旅程(debug預備!!)

image

這裡真的完全沒有任何用處...

側欄的語法是什麼呢? 我在這裡找到答案! (小白鯨教學) #links

image

我原本的width只設定了200px

直接把width:200px改成325px,然後按了"預覽".....沒變化

接著我又參考了一篇教學文章

image

在我的的樣式語法裡面把#container寬度從950px先調到1100px

然後看一下我的#content寬度是670px  (#content是指文章區塊)

#container 、#content、#links  1100px 、670px、325px

image

看完這段梅梅覺得崩潰

 

好吧,秉持著不放棄的精神,我們繼續尋找看看問題在哪裡...

來看一下#links-row-1結果我在我的CSS裡完全搜尋不到

再來檢查一下 #content、#links 有沒有用到margin的語法

image    image

結果我也看不出端倪

先來了解一下margin是什麼!!  

我又一次參考了這篇告訴我側欄是#links的文章(小白鯨教學)

然後了解了margin指的是內文文字跟邊界的距離

在小白鯨發表的這篇文章有很詳細的可以比對看到調整margin數值會帶來什麼樣的改變,大家也可以前往參考~

 

會打這一篇邊測試邊紀錄的文章,靈感也來自小白鯨

這樣可以一邊記錄自己遇上什麼問題,怎麼解決的,就像是做筆記

如果有人遇上相同的問題,就可以省去很多摸索的時間了!

 

這裡都是引用小白鯨的教學做探討

我們可以把語法分開如下方所示的設定

18802.gif

image    (引用小白鯨的內文)

18802.gif

或者是全部把語法寫在同一行

18802.gif

image    (引用小白鯨的內文)

18802.gif

 

先紀錄一下我要動刀前的語法好了

我先針對#links底下的做紀錄還有更改

06004083.gif

#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;
}

06004083.gif

我的.box-title裡頭沒有width(寬度)的設定,如果有這段的話

.box-title裡的width指的是"標題的寬度",要注意這裡設定的width不可以大於#links裡面的width設定的數值

image    (引用小白鯨的內文)

 

#content裡面的margin(邊界距離)也要算進去 

我的#content(670px)+#links(325px)=995px

接著看一下#content裡面margin的設定     (複習一下如果margin寫在同一行是 上、右、下、左)

image  image

 

大概評估一下左、右的邊界距離,但...em...單位不一樣怎麼換算阿....

參考這一篇了解一下-CSS 文字大小 em 和 px 的單位換算比較表,得知1em=16px

不過就在我一直不停的在我的CSS裡找尋線索的同時我發現我的CSS裡面竟然有兩個#container

我把兩個#container底下的width都改成1100px,整個links(側欄)+content(文章區)寬度就有拓寬

雖然我的封面橫幅(banner)長度變成不夠長了......(這意味著我又要繼續debug)

來看一下成功改寬度之後的樣子

image

 

我的粉絲專頁iframe終於不會擋住文章了(成功!),banner就再去找另外一個長一點的圖吧....

我的banner圖片應該至少寬度也要有1100px或是1200px..... (原本選的圖是1000px)

我把#banner寬度從原先設定的1000px1100px暫時先把右上的空白處裡掉囉...

image

 

lib01.gif

複習一下語法筆記

 

#container是整個#links(側欄)#content(文章區)的總和

但是在計算的時候要記得注意一下margin(邊界設定)的寬度也要計算進去

如果margin語法寫在同一行,依次代表的是上、右、下、左

 

如果用的是三欄式的版型,才會有#links-row-1(三欄式第一欄)、#links-row-2(三欄式第二欄)

#links-row-1(三欄式第一欄) + #links-row-2(三欄式第二欄) 要小於等於 #links(側欄)的寬度


 

arrow
arrow
    創作者介紹
    創作者 梅梅 的頭像
    梅梅

    梅花問路

    梅梅 發表在 痞客邦 留言(2) 人氣()