[教學] 自訂 Blogger 行動版範本與自適應設計原理

本篇會就 Blogger ( Blogspot ) 網誌的行動版 ( 手機版 ) 網頁,自訂 Blogger 行動版範本的開啟與設置 RWD 自適應設計教學原理說明。

當中包含行動版網站與電腦版網站網址 ( Url ) 對應之間的關係,與 RWD 自適應網站設定應用 CSS3 @media Query 初始化的方式。

[教學] 自訂 Blogger 行動版範本與自適應設計原理_001

如果想在行動版網站,安裝廣告、分享按鈕或是個別出現 Blogger 小工具,又或是個別調整電腦版網站與行動版網站的 CSS,可以參考本篇的介紹。

由於混合了 Blogger 電腦版、行動版、RWD 自適應版型調整,各類型網址的變化,所以大部份章節會以「使用方式」加上「一個例子」來做說明。創意的用法很多,你如果有遇到無法解決的問題,也可以留言一起研究討論。


章節流程

  1. 使用自訂 Blogger 行動版範本
  2. 行動版網站 HTML 範本:標頭
  3. 行動版網站 HTML 範本:文章內容
  4. 行動版網站 HTML 範本:CSS
  5. 行動版網站 HTML 範本:小工具 widget
  6. 電腦版與行動版網站的網址類型
  7. RWD 自適應版型原理
  8. 網站是否適合透過行動裝置瀏覽

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

Blogger 預設的情形下,即會開啟網站的行動版網站,也可以從手機瀏覽。由於預設的行動版範本,是被綁死的,如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕,就得開啟 Blogger 行動版範本的「自訂」功能。
Step 1

使用自訂 Blogger 行動版範本

登入 Blogger 後,前往 Blogger 後台,【 範本 \ 行動服務 】點擊【 齒輪 】
[教學] 自訂 Blogger 行動版範本與自適應設計原理_101



在跳出來的畫面中圈選,【是,在行動裝置上顯示行動範本】->【選擇行動範本 \ 自訂】->【儲存】
[教學] 自訂 Blogger 行動版範本與自適應設計原理_102



到此,即開啟 Blogger 行動版範本的自訂功能。



Step 2

行動版網站 HTML 範本:標頭

行動版網頁標頭的部份,是與電腦版網頁一起寫在 HTML 範本中的。回到 Blogger 後台點擊【範本 \ 編輯 HTML】,可以開始觀察標頭的結構。詳細電腦版與行動版標頭說明可以參閱:「Blogger 標頭判斷標記資料整理」。

[教學] 自訂 Blogger 行動版範本與自適應設計原理_201



Blogger 標頭包含了網誌名稱、圖片、描述等資料。如果需要調整行動版網頁的文章「h1、h2」,可以搜尋範本中的「id='mobile-index-post'id='mobile-post'」,在「mobile-index-postmobile-post」中就包含了文章標題的代碼設定。

要調整行動版網頁整體網站的「h1、h2」,就需調整標頭區塊與「id='mobile-index-post'id='mobile-post'」裡面的代碼,三者需要互相搭配。

電腦版與行動版網頁的「h1、h2」優化方式,可以參考『Blogger 範本:網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化』。



Step 3

行動版網站 HTML 範本:文章內容

行動版網站的「文章內頁 ( /2017/01/post_page.html )」與「靜態網頁 (/p/static_page.html)」代碼,都是寫在「<b:includable id='mobile-post' var='post'>」裡面的「<data:post.body/> ( 文章內容 )」上方,電腦版與行動版網頁的「文章內容」區塊,資料幾乎雷同,這也是大家比較容易混肴的地方。

下圖為範本搜尋「<data:post.body/> ( 文章內容 )」的技巧。(* 文章內容:相當於 Blogger 後台,「版面配置」頁的『網誌文章』區塊。)

[教學] 自訂 Blogger 行動版範本與自適應設計原理_301



判斷電腦版與行動版網頁的「文章內容」區塊的方式就是,在範本中搜尋「<data:post.body/>」。如果在「<data:post.body/> 」上方,出現的是「<b:includable id='mobile-post' var='post'>」,則這一個「<data:post.body/> ( 文章內容 )」就是屬於行動版網頁的「文章內容」資料。

如果在「<data:post.body/>」上方,出現的是「<b:includable id='post' var='post'>」,則這一個「<data:post.body/> ( 文章內容 )」就是屬於電腦版網頁的「文章內容」資料。(* 一般情形下,大多數模板在電腦版網頁的範本區塊會配置兩筆「文章內容」。

知道了行動版網頁的「<data:post.body/> ( 文章內容 )」位置後,我們就可以在整個文章的上方或是下方加入分享按鈕,或是在文章的繼續閱讀中藏廣告,於文章中顯示。


分享按鈕

一般情形下,大部份網站都會將分享按鈕安裝在整體「文章內容」的下方。這時候,就可將分享按鈕的代碼,放在「<data:post.body/> ( 文章內容 )」的下方。

也就是說從 FBG+Twitter 或是 AddThis 取得的分享按鈕程式碼,放在「<data:post.body/>」的下方,在行動版網頁的文章內頁最下方就會顯示分享按鈕。

如果要更改 Blogger 官方的行動版網頁分享按鈕,可以在範本中搜尋「data:top.showMobileShare」以做變更。具體做法可參考『Blogger 行動版安裝社群分享按鈕』。


繼續閱讀隱藏廣告

有需求在行動版網頁的文章中自動安插廣告,則可以參考『Blogger 繼續閱讀隱藏廣告和物件』及『Blogger 文章中任意位置加入Google AdSense 廣告』這兩篇文章。



Step 4

行動版網站 HTML 範本:CSS

在行動版網頁中佈置 CSS 有兩種做法:
第一種做法是在範本的「<body>」中加入以下代碼

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

接著在範本的 CSS 區塊加入「.mobile」資料,例如:

.mobile .posts-title {
/* 想放入的 CSS 內容 */
}


第二種做法則是使用「<b:if cond='data:blog.isMobile'>」,將 CSS 歸屬在行動版網頁中,也就是說,只在行動版網頁中顯示。(* 有時候,只想要某個小工具中的 CSS 圖示或代碼,顯示在行動版網頁中,這個方式相當好用。)例如:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.posts-title {
/* 想放入的 CSS 內容 */
}
</style>
</b:if>


如果,某些 JavaScript 只想在行動版網頁出現,也可以這樣使用:

<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
//<![CDATA[
// 想放入的 JavaScript 內容
//]]>
</script>
</b:if>


下面這種方式,則是上段 CSS 代碼的相反用法。目的是不受行動版網頁影響,下段 CSS 資料「不在行動版網頁」顯示。

<b:if cond='data:blog.isMobile != &quot;true&quot;'>
<style type='text/css'>
.posts-title {
/* 想放入的 CSS 內容 */
}
</style>
</b:if>


又或是可以混合使用:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.posts-title {
/* 此段 CSS 內容只在行動版網頁顯示 */
}
</style>
  <b:else/><!-- 如果不是的話 -->
<style type='text/css'>
.posts-title {
/* 此段 CSS 內容會在電腦版網頁顯示 */
}
</style>
</b:if>


如果你的網站是「自適應設計」的版型 (* 沒有混合行動版網頁,從行動裝置上瀏覽網頁網址後方不會顯示「?m=1」。),直接使用「<style type="text/css"> ~ </style>」包 CSS 資料即可。



Step 5

行動版網站 HTML 範本:小工具 widget

如果要讓電腦版網頁的小工具,出現在行動版網頁中。可以在範本的任一個「<b:widget>」當中加入『mobile='yes'』。例如:

<b:widget id='HTML1' locked='false' mobile='yes' title='小工具' type='HTML' version='1' visible='true'>

只在行動範本顯示
mobile='only'

不在行動範本顯示
mobile='no'

行動範本與電腦版網頁皆顯示
mobile='yes'


上例的具體做法,可參考『Google 自訂搜尋嵌入 Blogger 行動版網頁』。


另一種「小工具 widget」的設定方式,是在小工具的「<b:includable id='main'>」下方加入「<b:if cond='data:blog.isMobile'>」,讓小工具只在行動範本顯示。具體做法類似於『Blogger 標籤頁面加入分類小標籤』。例如:

    <b:widget id='HTML1' locked='false' title='小工具' type='HTML' version='1' visible='true'>
      <b:includable id='main'>
<b:if cond='data:blog.isMobile'><!-- 只在行動範本顯示 -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if><!-- 只在行動範本顯示 -->
</b:includable>
    </b:widget>


如果想要自訂一個 div class 在範本中使用,我們也可以這樣使用。例如:

<div class='customize-class'>
  <b:if cond='data:blog.isMobile'>
<!-- 此段內容只在行動版網頁顯示 -->
  <b:else/><!-- 如果不是的話 -->
<!-- 會在電腦版網頁中顯示 -->
  </b:if>
</div>



Step 6

電腦版與行動版網頁的網址類型

以下各類型的網址,於 Blogger 後台「範本→行動服務」開啟使用『Ⓞ 是,在行動裝置上顯示行動版範本。』之後,就會開始運作在電腦版與行動版網頁中。(* 如果單獨使用「自適應版型」而不是混合使用,也可以關閉這個功能,讓網頁的網址統一為「電腦版網頁的網址」。)



( 2017 /01 / 21 ) 文章更新:
目前 Blogger 系統,即使在路徑「範本 〉行動服務 〉選擇行動服務」中選擇使用『Ⓞ 否,在行動裝置上顯示電腦版範本』,只要從行動裝置上連網到自己的網誌,都會將網址自動切換到「?m=1」的行動版網址格式。



電腦版網頁的網址:
https://www.techcoke.com/

行動版網頁的網址:
https://www.techcoke.com/?m=1

從行動版網頁切換回電腦版網頁的網址:
https://www.techcoke.com/?m=0



Step 7

RWD 自適應版型原理

宣告與裝置視野初始化

在部署自適應網頁時,首先可以在範本的「<head>」加入元資料標記,宣告目前瀏覽的網頁,螢幕視野的寬度等於設備的寬度,初始化的比例為 1。

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

設定視野寬度為裝置的寬度
width=device-width

設定縮放大小為1倍
initial-scale=1

設定縮放大小,最大為1倍
maximum-scale=1
(* 使用此設定,使用者會無法藉由放大或縮小,觀看網頁頁面的內容。)



CSS3 Media Queries 媒體查詢

由於我們限制了網頁在裝置上的螢幕視野寬度,在應用 Media Queries 時,我們則可使用「em%」做佈局,以百分比來做設定是較為方便的。以下是使用「@media Query」初始化的示例:

/* 設置最大寬度  */
@media screen and (max-width:1366 px){
/* 最大寬度,使用此段 CSS */
}

/* 筆電、桌機寬度 */
@media only screen and (max-width:1280px) {
/* 如果設備寬度小於 1280 px,使用此段 CSS */
}

/* 平板(橫向) */
@media only screen and (max-width:1024px) {
/* 如果設備寬度小於 1024 px,使用此段 CSS */
}

/* 平板(縱向) */
@media only screen and (max-width:768px) {
/* 如果設備寬度小於 768 px,使用此段 CSS */
}

/* 手機(橫向) */
@media only screen and (max-width:640px) {
/* 如果設備寬度小於 640 px,使用此段 CSS */
}

/* 手機(縱向) */
@media only screen and (max-width:480px) {
/* 如果設備寬度小於 480 px,使用此段 CSS */
}

/* 傳統行動裝置 */
@media only screen and (max-width:320px) {
/* 如果設備寬度小於 320 px,使用此段 CSS */
}

類似的具體用法,可參考『Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告』。


如果你的網站使用自適應版型與行動版網頁混合使用,我們還可以讓混合了自適應設計的行動版網頁,只在特定螢幕大小的裝置上顯示,加快頁面載入速度。例如:

<!-- 行動版網頁 ?m=1,在螢幕寬度小於 640 px 時使用 -->
<link expr:href='data:blog.url + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate' />


外連 css 的用法

<!-- 載入 theme-body-content.css -->
<link href='https://cdn.techcoke.com/css/theme-body-content.css' media='all' rel='stylesheet' type='text/css'/>

<!-- 螢幕寬度在大於 400px 小於 700px 的範圍時,載入 theme-body-content.css -->
<link href='https://cdn.techcoke.com/css/theme-body-content.css' media='screen and (min-width: 400px) and (max-width: 700px)' rel='stylesheet' type='text/css'/>



外連 css @import 用法

<style type='text/css'>
/* 載入外連 theme-body-content.css 資料 */
@import url('//cdn.techcoke.com/css/theme-body-content.css');
</style>

<style type='text/css'>
/* 螢幕寬度在大於 400px 小於 700px 的範圍時,載入 theme-body-content.css 資料 */
@import url('//cdn.techcoke.com/css/theme-body-content.css') screen and (min-width: 400px) and (max-width: 700px);
</style>


更詳細的 Media Queries 應用教學,可參閱『MUKI space*』。



Step 8

測試網站是否適合透過行動裝置瀏覽

在 Google 的 WebMasters 部落格中,於 2015 年 4 月 21 日有說明『如果網站的網頁不適合移動裝置瀏覽,那麼來自 Google 搜尋的移動流量可能會大幅減少。』。

如果要測試自己的網站,是否符合行動裝置瀏覽。我們可以透過 Google 的「行動裝置相容性測試 Mobile-Friendly Test」觀察網站的行動裝置測試情形。


留言

  1. 嗨coke~好久不見:)

    目前主要的網站 www.wanghenry.com 也受益於你之下功能上都還算穩定,至於之前提過的某篇文章手動插入廣告產生出來的問題,個人覺得是不知名原因卡死了那幾篇特定的文章XD

    因為...我有償試過把該篇文章的HTML複製在新開的站顯示是正常的、甚至把既有的文章全部清空(無任何HTML)隨便打幾段測試的內容,該網址的文章廣告還是異常XD(預覽可顯示、送出後卻消失),但由於新開的文章三個廣告的部分都沒問題,所以就打算先靜置這個問題了。

    同時之前也察看/詢問過把網址體換成https的文章,但目前想先以新的網站開始測試才不會被主站中已經雜亂不堪的語法給混淆XD

    而這次留言主要的問題點如下:(先行諮詢)

    1.目前不論是COKE或WFU等網路上常見的BLOGGER教學,是不是在【版型(現在官方以正名為"主題")】的部分都建議選用【簡單】的類別?

    因為目前我的主站是企業版為底,常在在查看一些教學時會有找不到語法的狀況,而回頭一看你們的教學版型基礎都是選【簡單】,所以救我目前想要重新做版型(新站)來說,是不是選【簡單】的底子比較好呢?

    2.主目前功能還算齊全,但有部分功能其實算是"硬上"的狀態,也就是跟網路教學的步驟有落差,雖然表面看起來沒事、但對後續要除錯或調整功能時就會出現找不到相關語法的問題。

    所以,我就在想說在製作新版的過程中,COKE有沒有一些打造部落格所需加入的功能中在順序上的一些建議?

    像是:目前我的新版還沒變動語法,如果想要加入【頭、延伸閱讀、尾】的廣告語法,是不是在範本內最乾淨的時候設計會比較容易?等等的~

    3.COKE站內有無新手架站順序的文章指引(先後順序、注意事項之類的)?

    謝謝^^

    回覆刪除
    回覆
    1. 嗨 ~ :)

      1.目前不論是COKE或WFU等網路上常見的BLOGGER教學,是不是在【版型(現在官方以正名為"主題")】的部分都建議選用【簡單】的類別?

      因為目前我的主站是企業版為底,常在在查看一些教學時會有找不到語法的狀況,而回頭一看你們的教學版型基礎都是選【簡單】,所以救我目前想要重新做版型(新站)來說,是不是選【簡單】的底子比較好呢?

      ---
      當初使用官方「簡單版型(主題)」做為教學示例,單純因為「簡單主題」排在第一個,所以使用「簡單主題」做為示例。如果會自行修改範本主題的話,使用「官方」或是網路上下載的版型主題,皆無差別。

      其實蠻多網路上下載的國外版型,對於 h1、h2、h3 的 HTML 標籤,SEO 的部份都已處理完成。大部份範本中的 HTML 標記,處理 SEO 的部份,只需要修改『小工具』及『日期』的原始 h2 標籤為 「h3 或 h4」即可。

      使用官方版型的優勢,就是可以使用 Blogger 後台版面配置頁面的「主題設計工具」。調整版面寬度、文字、顏色 ... 等,較為方便。

      如果要以官方的各種版型主題做底子,觀察「Blogger 範本:網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化」這篇 STEP4 的「主題設計工具」修改,不難看出,其實官方的各種版型主題還是有可以修改 CSS 的空間。

      如果是因為範本 h1、h2、h3 的 HTML 標籤 SEO,不會自行修改版型主題的「範本」的話,建議使用網路上下載的版型即可。可能要稍微找一下,最好找自適應版型,這樣就一勞永逸了。對於範本的 h1、h2、h3 的 HTML 標籤 SEO,大部份只需處理「小工具」標題的原始 h2 標籤,自行修改上應該沒有什麼大問題。

      如果想使用官方版型主題做修改,範本 h1、h2、h3 的 HTML 標籤 SEO,可以參考之前的「Blogger 範本:網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化」,以修改「簡單版型」做為示例。官方版型做為基底,要將網誌加上自適應狀態,CSS 就得上加 Media Queries。

      以上述這兩種情況來觀察。
      如果想使用官方版型,不會自行調整範本,網誌有無自適應皆可,不需要重拉 CSS,可以使用「簡單版型」做為基底。「簡單版型」的教學多的話,自行修改較為容易,不用花錢找別人幫忙。

      如果想使用官方版型,不會自行調整範本,需要使用「簡單版型」做為基底,也需要幫網站加上自適應功能,或是需要重拉範本 CSS。得花錢找人幫忙。

      使用網路上下載的國外版型,幾乎功能都已完善,不過無法使用 Blogger 後台版面配置頁面的「主題設計工具」,自行修改 CSS 較為不便利。建議,如果要找網路下載的版型,就找自己喜歡的或是和自己網誌風格相搭的。




      =======================================




      2.主目前功能還算齊全,但有部分功能其實算是"硬上"的狀態,也就是跟網路教學的步驟有落差,雖然表面看起來沒事、但對後續要除錯或調整功能時就會出現找不到相關語法的問題。

      所以,我就在想說在製作新版的過程中,COKE有沒有一些打造部落格所需加入的功能中在順序上的一些建議?

      像是:目前我的新版還沒變動語法,如果想要加入【頭、延伸閱讀、尾】的廣告語法,是不是在範本內最乾淨的時候設計會比較容易?等等的~


      ---

      如果沒有要製作 AMP 版型的話,也就是使用一般官方版型或是一般網路下載的版型。

      Henry 你說的加入的功能,應該是指 JavaScript,及廣告代碼的前後順序對嗎?如果是的話,建議『jquery.min.js 函式庫』可以放在「</head>」之前,

      『adsbygoogle.js 函式庫』可以單一放在「</head>」的 jquery.min.js 之後,或是單一放在「</body>」之前。adsbygoogle.js 的放置得視模版主題而定。放置在這兩個地方,主要差別在於網頁與廣告的載入速度。

      在網站中抽取『jquery.min.js 函式庫』相乎應的 JavaScript 或單一 JavaScript,有些功能會組合 CSS 和 HTML,如果再加上功能有設置網頁層數的話,可能會導致一些功能被「設置網頁層數」的 JavaScript 蓋掉而看不到,又或是程式之間強碰,導致一個功能有出現,一個沒出現。這得視功能放置的相關位置而定。建議,先放『jquery.min.js 函式庫』相乎應的 JavaScript,再設置單一 JavaScript。



      ==『如果想要加入【頭、延伸閱讀、尾】的廣告語法』:
      如果擔心廣告代碼放置後,廣告在網誌中不會出現。建議,『adsbygoogle.js 函式庫』及單一「文章頭段、延伸閱讀、文章尾段」的廣告代碼,可以比 jquery.min.js 及單一 JavaScript 還先早於放置於網誌中。(*也就是說,先放入廣告代碼,再放入 jquery.min.js 及與 jquery 依存的 JavaScript,最後再放入單一功能的 JavaScript。)

      建議最後再放入單一加入的 JavaScript 功能,通常會出現強碰的地方,大都為網站中單一加入的 JavaScript 功能。



      ==『是不是在範本內最乾淨的時候設計會比較容易?等等的~』:
      如果不常看範本。建議,在範本內最乾淨的時候,放入廣告代碼語法。



      ====================================================




      3.COKE站內有無新手架站順序的文章指引(先後順序、注意事項之類的)?


      ----

      抱歉,目前沒有。

      其實,我一直在想,要不要寫 Blogger 相關的基本功能介紹的文章。因為,寫了之後,後面的文章會變得很好寫。不用每次都要在每一篇文章,重複說明一些基本動作操作。像本篇文章,就是倒著寫的,總算是完成了「行動版範本」的介紹。




      刪除
    2. 謝謝COKE一一的回覆我的問題(疑惑)^^

      前面我提到的先後順序的部分是我沒有表達清楚,上面的意思是整個建立部落格功能/架構的工具,不一定是包含廣告位置的安排^^不過看到你給的回覆後這個答案也大致有個底囉~

      而別人提供的範本好像多半都有變動的限制,所以目前還是傾向自己一邊玩、一邊建立網站的樣貌,所以往後如果遇到問題的話還要跟COKE賜教了~~:)

      對了,COKE會這些網站的設計是自學的嗎?還是就學期間習得的?

      不知道有沒有甚麼書籍可推薦BLOGGER初學者閱讀的呢?(BLOGGER應該是HTML跟CSS相關的書籍對嗎?)

      謝謝~

      刪除
    3. HI COKE,補充一個問題向你請教:)

      前面第一則留言提到的部落格功能建置的順序,我想問的是...

      像是把http改成https這個大工程,是不是在沒有任何外掛(自己添加的功能)的時候先做會比較好?

      譬如:
      (順序)
      1.原始不變的blogger
      2.做https
      3.做文章內的固定廣告位置
      4.其他後續

      大概就是說:

      https"感覺上"最複雜、要變動的語法最多,所以在最乾淨的範本下執行會最不會出錯?

      之後再加入自訂位置廣告等功能時就直接按照教學製作也不會跟https的功能有衝突。

      是否這樣會比較好呢?謝謝

      刪除
    4. 自學的,2006年開始使用 Blogger,單純寫網誌。2010年開始玩範本,後來看範本越看越有心得,就購買相關 CSS、HTML、JavaScript 書籍補充。

      初期翻閱的書籍,建議選擇自己容易閱讀的 CSS3、HTML5 相關資料,或是線上翻閱以上兩者的資料。選自己與作者頻率相同的書籍,會是較為首選的方案。

      到後期,看習慣範本的整體架構時,不管哪個範本放到自己的網綕使用,你會發現都知道如何操作。這時,可以增加 JavaScript 或 jQuery 的知識,可以開始嚐試修改別人的小工具。

      建議先碰 jQuery。Blogger 範本看習慣了,會發現 jQuery 在學習上無壓力,很多原理跟 Blogger 判斷式相雷同。

      JavaScript 開始有心得後,就可以接著玩 Blogger v3 的 API,製作自己的 Blogger 小工具。


      刪除
    5. 好的,我再去多找一些資料來看:)

      刪除
    6. 前面第一則留言提到的部落格功能建置的順序,我想問的是...

      像是把http改成https這個大工程,是不是在沒有任何外掛(自己添加的功能)的時候先做會比較好?


      ---

      Blogger 自訂網址用戶使用 HTTPS。建議,不熟範本,可以於範本完全沒有「外掛功能及廣告」之前做 HTTPS 網址格式的部屬。

      須留意「廣告」,有些 AdSense 廣告推送到自己的網站時,廣告中的圖片會是 http 格式的圖片,這時因廣告出現的圖片「混合性內容」的問題,可以不用理會。



      建議 Henry 的順序:

      空的 Blogger 範本 → 標頭、標題、文章、小工具、文章日期 SEO h1 h2 h3 優化 → 完成『Blogger 範本基底』


      Blogger 範本基底 → HTTPS → 廣告 → jquery → 單一 JavaScript → 完成『Blogger 範本功能』


      Blogger 範本功能 → FB、Twitter 分享資訊 → Google 結構化資料 (含分享資訊)。




      =============================




      https"感覺上"最複雜、要變動的語法最多,所以在最乾淨的範本下執行會最不會出錯?


      ---

      其實不會,已經有國外及國內網友自行觀察文章,套用 HTTPS 成功。範本看習慣就不會複雜。不過,沒錯!在範本最乾淨時執行套用 HTTPS 較不易出錯。




      之後再加入自訂位置廣告等功能時就直接按照教學製作也不會跟https的功能有衝突。是否這樣會比較好呢?謝謝


      ---

      廣告代碼與 Blogger 自訂網址使用 HTTPS 兩者,不會有衝突。廣告代碼與 jQuery 和 JavaScript 會有衝突。


      刪除
    7. 果真,我用全新範本套用很正常! 但是套用一堆功能的主要網站套用後好像有點問題存在!

      概況有在cloudflare那邊留言描述了。現在主網站 www.wanghenry.com 就只有在cloudflare開啟強制https的動作、但還沒有執行相容性設定修正。

      不知道問題出在哪裡,應該不會跟blogger後臺自訂網址的地方,我有把wanghenry.com引導成www.wanghenry.com有關連吧!聽COKE回覆這段話,感覺是衝到了別的東西~

      刪除
    8. 不知道問題出在哪裡,應該不會跟blogger後臺自訂網址的地方,我有把wanghenry.com引導成www.wanghenry.com有關連吧!聽COKE回覆這段話,感覺是衝到了別的東西~


      ---

      與『 wanghenry.com 重新導向 www.wanghenry.com 』無關。目前觀察,「混合性內容」需要處理,行動版網站並沒有套用到 HTTPS。

      刪除
  2. 請問我在網路版 HTML 小工具如標籤 如上述步驟加入 mobile='yes' ,也順利儲存。但手機上標籤仍沒有出現?哪邊步驟有錯誤嗎?感謝!

    回覆刪除
    回覆
    1. 不好意思,現在才看到留言,您的問題解決了嗎。

      刪除
  3. 你好,我加了顯示語法的工具這樣我才能把語法貼出來給大家看!
    不過,我不知是不是我主題的關係,我這語法框後面的文字全無法置中!?
    而且,我看英文版型明明文字就不是置中,我套上去就置中...置中就算了,好不容易找到可以改的
    改了左邊,圖片也整個往左邊跑!
    不知怎麼解決研究好幾天了...

    文字也沒有套用到css,也有試過在.post上加入,但完全沒反應!?

    https://maizi-nonsense.blogspot.com/2020/03/bloggerlikebutton.html

    回覆刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰