[教學]分割Blogger 網誌標題區塊(標頭)成左右兩個小工具，可加入Adsense 廣告

常常看到一些網站，在網站名稱的右邊放上Adsense 廣告，如：鉅亨網等。就在想若自己的Blogger 網誌這樣做，不知道Adsense 廣告的成效會如何？依以下的步驟，就能在Blogger上也做出這種效果。

步驟一、分割Blogger 網誌標題區塊(標頭)成左右兩個小工具
1. 請到 Blogger 後臺 →【範本 】→【 編輯 HTML】按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，
搜尋字串<div class='fauxborder-left header-fauxborder-left'>
刪除如下圖的程式碼

然後在同一位置貼上如下程式碼

<div class='region-inner cherrychili-header-inner'>
<b:section class='header-left' id='header-left' maxwidgets='1' name='Header-Left' showaddelement='yes'/>
<b:section class='header-right' id='header-right' maxwidgets='1' name='Header-Right' showaddelement='yes'/>
</div>

貼好應該如下圖

2. 接著按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，
搜尋字串]]></b:skin>，並在]]></b:skin>的前面貼上如下程式碼

.cherrychili-header-inner {
width: 100%; display: flex;
}
.header-left {
width:20%;
margin: 30px 0 0 0;
padding: 0;
float:left;
overflow:hidden;
}
.header-right {
width:80%;
margin: -28px 0 -5px 0;
padding: 0;
float:right;
overflow:hidden;
}

貼好應該如下圖

上面程式碼的20%、80%分別是指左、右兩邊小工具的寬，可改用px像素單位表示。margin、padding可用來調整小工具上右下左的位置。overflow:hidden是指超出的部分隱藏。
這樣便完成分割Blogger 網誌標題區塊(標頭)成左右兩個小工具。
回到 Blogger 後臺的版面配置，重新載入此頁，會看到如下圖的改變。

步驟二、在分割成左右兩個網誌標題區塊(標頭)，分別加入小工具
左邊的小工具(Header-Left)若要用原本Blogger的標頭小工具，可按下新增小工具後，找到[網頁標題]這個小工具加入。

右邊的小工具(Header-Right)可加入Adsense 廣告，可用回應式廣告自動大小，或將兩邊小工具利用程式碼中的width和margin，width(小工具的寬)可用px像素單位，再搭配margin指令調整小工具的上右下左，將位置設定好，加入自己想要的廣告大小。當然也可以不加入Adsense 廣告，新增其他的小工具。
下圖是利用此方法做出的效果。

推薦網誌：宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅