如何將Blogger標頭區分為兩個部分？

如果喜歡的主題模版標頭部份不含廣告顯示區, 但卻很想放廣告? 又或者是標頭只有一個區塊, 但想要分隔成二塊放置不同圖片或元件?

把一個區塊區分成二塊並不困難 (如上圖, 分割表頭區, 新增廣告欄位), 所以並不需要為了因為沒有廣告欄位而放棄這個主題哦.

步驟一:

首先, 先到Blogger後台的[主題]→[編輯HTML]→按下 Ctrl+F  →然後在搜查列輸入: <b:section class='header' 

然後找尋緊接在這個 <b:section class='header'  後面出現的第一個 </b:section>, 然後在它下面貼入下面的程式碼:

<!--加入標頭的右邊-->
<b:section id='header-right' showaddelement='yes'></b:section>
<div style='clear: both;'/>
<!--加入標頭的右邊結束-->

步驟二:

然後, 按下 Ctrl+F  →然後在搜查列輸入: ]]></b:skin> →在 ]]></b:skin> 上方貼入下面的程式碼:

/*區分標頭為2部份的寛度設定*/
#header, body#layout 
#header {width:33%;display:inline-block;float:left;}
#header-right, body#layout 
#header-right 
{width:65%;display:inline-block;float:right;padding:10px;}
#header-right .widget {margin:0;}
.Header1 {
width: 100%; display: flex;
}

.header {
float: left;
width:50%;
margin:0;
padding: 0;
overflow:hidden;
}

.header-right {
float: right;
width:50%;
margin:0;
padding: 0;
overflow:hidden;
}

#layout #header, #layout #header-right {
    padding: 0px !important;
    margin: 0px !important;
    width: 50% !important;
    }
/*區分標頭為2部份的寛度設定 - 結束*/

按下[儲存]後, 回到[版面配置]可以看到多了一個標頭區塊了.

步驟三:

回到[版面配置], 可以利用[+新增小工具]在header-right的區塊裡加入Google AdSense的廣告程式碼了.

同樣的做法也可以用在把頁腳部份切割成想要的區塊.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!