作者wei76422 (wei)
看板Blog
標題[分享] 痞客MIB分潤廣告怎麼擺才好看CSS語法教學
時間Mon May 20 22:45:16 2013
網誌好讀版:
http://weilife.pixnet.net/blog/post/93584311
------------------------------------------------------------
http://pic.pimg.tw/weilife/1369054468-3135045421.jpg
今天中午午休前照慣例看了一下網誌,結果發現版面整個歪掉了
原來痞客幫的MIB分潤廣告計畫於今日正式上架
其實之前對MIB分潤計畫還滿有興趣的,只是很擔心會破壞部落格版面
原本猜想會像一般放置廣告那樣,在後台可以利用欄位調整廣告的位置
結果痞客幫很賊,直接將廣告置於側邊欄位的最高點,無法於後台更改
這點應該讓部落客們恨的牙癢癢的,雖然廣告可以賺錢沒錯,但還是想保有美麗的版面呀!
更..的是痞客幫還推出了一個去廣告的app,一年要價$600 (這根本是在騙不會CSS的人)
稍稍研究了一下,利用CSS調整了廣告的擺放位置,將小技巧分享給大家
http://pic.pimg.tw/weilife/1369056439-2516096141.jpg
要修改之前要先了解部落格版面的標籤,上圖是一些重要的標籤名稱與配置
- container: 整個部落格內容
- header: 頁首(部落格的橫幅)
- content: 文章區
- links: 側欄,作者資訊、最新文章、文章分類等
- footer: 頁尾
痞客幫將MIB廣告放於第一側欄的最頂端,標籤為
#mib-ad-sidebar
有了這個標籤,可以對MIB廣告做許多的事,當然包括隱藏或刪除廣告
* 修改廣告高度
#mib-ad-sidebar{
position: absolute !important;
top: 100px;
left: 0px;
}
將以上語法貼至CSS編輯,可以修改廣告的高度,往下降100像素
若很清楚知道要把廣告放在某個高度,這樣的方法很適合
如果想要將廣告放置所有側邊欄位的下方,此方法變得很不實際
因為側邊欄位的高度可能因發表一篇新的文章而改變
參數改成 top: 0px; left: -200px; 就可以偷偷隱藏廣告啦!
* 將所有廣告排排站,擺到網頁的最左方
接下來要介紹的是本篇文章的重點,別怪我沒提醒要看到最後喔
因為廣告繁多,想說乾脆都把廣告擺在一起,全都放到網頁左方一排
可參考文章第一張圖的廣告位置
重點是文章內容與一般側欄仍維持在網頁的正中央
螢幕解析度越高,廣告與文章便會越遠,也就是較不顯眼,版面看起來乾淨許多
不過此方法只適用於一個側邊欄位的版面,雙側邊欄位不適用
(1) 更改側邊欄位設定
至後台側邊欄位設定,將使用的欄位都移至側欄2
側欄1只擺廣告的部分(如BloggerAds),參考下圖
http://pic.pimg.tw/weilife/1369057298-3235030017.jpg
(2) CSS原始碼編輯
這邊的要改的東西比較多,將原本的標籤配置圖改成下圖,共需修改六個標籤的位置
ps. 以下修改依照目前圖中所繪的版面,版面不同的話要請各位想一下再修改喔!
03
* 以下標籤只修改標籤的寬度與位置,只要把這些屬性加進原本的標籤裡,其他的屬性請不要刪除
#container{
width: 100%; /* 將container的寬度調整成100%,讓廣告可以放置最左方 */
}
#header, #content, #footer{
left: 50%; /* 方框的左邊對其網頁的中央 */
margin-left: -500px;
/* 將方框往左移500像素,因為header+link-row-2總共1000像素 */
z-index: 2;
/* 若視窗太小時,廣告與文章區域會重疊,讓廣告不要遮住原本的文章 */
}
#links-row-1{
position: absolute; /* 將第一側欄限定絕對位置,網頁左上角 */
left: 0px; /* -200px 的話廣告就不會顯示在網頁上囉!!! */
top: 0px;
}
#links-row-2{
position: absolute;
left: 50% /* 方框的左邊對其網頁的中央 */
margin-left: 200px; /* 將方框往右移200像素, */
}
概念大概就是移動標籤的位置,只要搞清楚 left 與 margin-left 的涵義,就輕而易舉囉!
MIB廣告剛好與BloggerAds寬度一樣,擺起來真是整齊!!
昨天觀察的結果,MIB廣告有時候出不太來,拖慢了整個網頁速度,希望痞客幫可以盡快
改善這點
* 大家最關心的xx廣告
剛剛上面有提到怎麼將廣告隱藏,但網頁還是會讀取廣告資訊
只是將廣告放在使用者看不到的地方,一樣會拖慢網頁速度
怎麼將廣告整個拿掉,因為怕寫出來痞客幫會來關切,想知道的請以悄悄話留言
一樣,不適用於雙側欄版面,滿版面OK
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 122.116.218.218
推 aramaram:我今天也被突然跑出來的站方廣告版位嚇了一跳 05/20 23:53
推 IssacKr:請問那要如何把這欄位隱藏呢? 05/21 01:05
回信給你囉:p
推 nadoka:付錢 699/年 根本土匪= = 05/21 02:22
推 lsc929:找不到MIB的欄位? 05/21 05:39
痞客幫不讓使用者調整MIB廣告的資訊,所以在後台找不到欄位的
推 t03ao04:推,感謝w大的分享,這就來試試,超困擾的啊!!! 05/21 10:53
推 cucci104:請問要怎麼讓MIB廣告整個隱藏呢?謝謝! 05/21 15:51
如果只是要隱藏的話,內文有喔~請再找找看
如果要整個拿掉,請到我的痞客幫留悄悄話
推 BrianCC:已經留言 感謝 05/21 20:34
推 fourleaf1027:已留言 先謝過~ 05/21 23:22
推 pouy:千萬不要買那個app 他會把你掛的其他廣告通通移除 >"< 05/22 19:55
→ Tayako:CSS好像被痞克發現了 廣告又回來了... 05/23 15:31
痞客幫近期可能還會針對JS破解的方法來進行改版
只要一改標籤此樓上連結的方法便又失效,比較推薦一勞永逸的方法
雖然我的方法痞客邦也可能會破解,但依目前的架構來說是比較推薦的
推 BrianCC:版大的密技依然有效!! 另外樓上連結也OK!! 05/23 21:52
→ Tayako:我是用IssacKr那個語法~~ 05/23 23:52
→ Tayako:突然想到營利網頁和非營利網頁是差很多的..會有法律責任.. 05/24 11:04
推 petestar:實用好文+好連結推!!沒你們該怎辦 討厭大廣告啊… 05/24 11:27
推 udet:請教一下mib廣告單就點擊一次的實收金額大約是多少?謝謝 05/24 13:22
現在mib廣告都還在測試期間,所以無法知道好不好賺
也就是說現在應該是免費給他掛廣告的
等之後正式上線,後台會有廣告金與成效這些資訊可以看
※ 編輯: wei76422 來自: 122.116.218.218 (05/24 16:59)
推 BrianCC:推版大!! 好方法依然可用!! 05/24 22:50
→ BrianCC:現在文章底部也出現廣告了 CSS目前可解 05/24 22:50
推 xination:推一個 05/27 11:26