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

Views

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

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

步驟一:

首先, 先到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的廣告程式碼了.

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

喜歡或者 不喜歡 如果覺得這篇有用, 那就請我喝杯咖啡吧!請我喝杯咖啡吧!

2 則留言:

  1. hi, 不是很了解你标题的意思 “如何將BLOGGER標頭區分為兩個部分?”,是否有范例?

    回覆刪除
    回覆
    1. 加了圖片, 意思就是, 如果原本的主題在標頭區只有logo, 但不含廣告欄位, 可以輕易的自行分割成二個區塊, 範例如下:
      https://1.bp.blogspot.com/-tMegFdkxHoY/YVEjeUTtdsI/AAAAAAAAJ9s/esBL13nA1agsRJtW4upc6Vtm_ISIYWFRQCLcBGAsYHQ/s1022/ABB-TB.JPG
      謝謝

      刪除

顯示表情符號