技研可樂

這篇的的設置需求，主要是想在 Blogger 中利用 繼續閱讀 隱藏廣告 和 物件 ，另外我們也可以使用第二個或第三個「read more」，使得文章頁面可以在隨意位置，快速重複擺放廣告或特定物件。 為了避免文章頁「read more」錯亂，在第一個「read more」使用標準的寫作用「繼續閱讀」，第二和第三個「read more」則使用匯入文章用的「read more」。 由於在 Blogger 的首頁只會引動第一個正規「繼續閱讀標示」，所以我們可以利用這個特性來做更靈活的運用。 文章更新： 使用本篇來「隱藏廣告」在匯出或匯入 Blogger 文章後，會產生「 <a href="https://www.blogger.com/null" name="more"></a> 」代碼；若以後有需求轉換到 WP 部落格平台或是需要將文章移至新的 Blogger，建議使用「 [教學] Blogger 文章中任意位置加入Google AdSense 廣告 」的方式來隱藏廣告，文章匯入或匯出只會有「 <!-- adsense --> 」的註釋代碼，不影響文章本體。 目前 AdSense 廣告政策有做過變更，網頁上單一頁面，已經可以投放三個以上的廣告。由於 AdSense 廣告投放政策可能會隨著時間而有不同。建議每隔一段時間，就要到「 AdSense 廣告政策 」中觀察實際廣告投放數量的限制，與相關條款。 設置流程 找查需要置入程式碼的 HTML 區段 放入繼續閱讀隱藏廣告程式碼 放入 CSS 置中語法 隨意位置加入第二個隱藏物件的方法 相關連結 範例 DEMO 頁面｜電腦版：「 電腦版 」 範例 DEMO 頁面｜行動版：「 行動版 」 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 找查需要置入程式碼的 HTML 區段 前往 Blogger 後台，點選「範本 〉編輯HTML」 在程式碼頁框裡面用滑鼠左鍵點一下，並按下鍵盤組合件「Ctrl + f」( 按著

一般推廣網站裡的文章，我們都會在站內加入常用的社群分享按鈕，以供往來自己部落格的訪客方便存儲文章或進一步做文章分享的動作，而目前在社群分享的活動力上還是以 Facebook 最為頻繁！ 除了「Like」和「Share」按鈕，若要在網站中加入 Facebook 裡的特定社群插件，那就必須申請「Facebook APP ID」獲得開發者權限才能使用。例如 ：留言板、粉絲專頁插件、追蹤 . . . 等等。 「Facebook APP ID」在社群應用上，除了上段敘述的特定插件安裝外，我們在「APP ID」申請完成後，若有幫網站及 Facebook 做關係上的互聯，那在 Facebook 應用程式介面也可以獲得一份統計資料。也就是說，我們不一定要建立「粉絲專頁」，但一樣能夠有往來訪客的洞察報告！ 趁著最近 Facebook 應用程式 APP ID 申請 介面改款，順道將註冊流程做個 教學 記錄，這裡就以建立一個 FB 留言板的「 APP ID 」為例，過程中也會取得 APP 密鑰 。 相關連結 「 Facebook Developers 」 設定流程 申請註冊一個 Facebook APP 開發者帳戶 建立新的應用程式 APP ID、取得 APP 密鑰 網站與 Facebook 應用程式建立連結 設置前準備 準備一個 Facebook 帳號 操作教學 Step 1 申請註冊一個 Facebook APP 開發者帳戶 登入 Facebook 帳號，前往開發人員頁面「 Facebook Developers 」；在網頁上方的【My Apps】下拉選單，選擇【Register as Developr】 這裡選擇【是】，並按下【登記】 到這裡就完成 FB 的開發者帳戶的申請了；系統提示可以將 「Facebook」應用關聯至網站或應用程式，這邊點擊【完成】 應用程式介面導航，若最近有新推出的功能介紹，可以在看完介紹後可以按下【關閉】 Step 2 建立新的應用程式 APP ID、取得 APP 密鑰 申請過開發者帳戶後可以接著建立 APP ID，我們在【My Apps】下拉選單點選【Add a New App】 在跳出

本篇 教學 ，我們會將「 Google 自訂搜尋 」整合到 Blogger 當中。使用自己製作「Blogger 搜尋框」，來調用「Google 自訂搜尋」，且將搜尋結果顯示於網站的「靜態網頁 (* /p/static_page.html )」，並將它偽裝成「站內搜尋」的一部份。 設置的過程中，我們會將範本的搜尋框與「 Google 自訂搜尋 」做連結，利用 Google 的強大搜尋檢索功能，來幫自己的「 Blogger 網站 」作更精確的關鍵字搜尋！ 過程中，會先在 Blogger 的後台「網頁」裡面，建立一個名為「 search 」的靜態網頁，再將我們原先已有的「 Google 自訂搜尋引擎 」程式碼，放置在「search」頁面的「HTML」頁籤，最後在自定義搜尋框的「小工具」裡，設定將網址指向至「search」，即可完成！ 先來看一下完成後的成果。我們會在「靜態網頁：/p/search.html」建立一個「搜尋框」和「Google 自訂搜尋結果頁面」。而側邊欄的搜尋框，不加入灰色的搜尋按鈕，使用輸入文字按鍵盤「Enter」進行搜尋。 相關連結 Google 自訂搜尋：「 Google 自訂搜尋引擎 」 範例 DEMO 頁面｜電腦版網頁：「 電腦版 」 範例 DEMO 頁面｜行動版網頁：「 行動版 」 設定流程 申請 Google 自訂搜尋引擎 建立網站搜尋引擎，取得 Google 自訂搜尋程式碼 Blogger 後台建立名為「search」的靜態網頁 製作「搜尋框」，並將網址指向「search」靜態網頁 讓 Google 自訂搜尋框能在行動版網頁上顯示 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 申請 Google 自訂搜尋引擎 首先前往「 Google 自訂搜尋引擎 」，點擊『建立自訂搜尋引擎』。到這裡，就完成 Google 自訂搜尋的申請了。 Step 2 建立網站搜尋引擎，取得 Google 自訂搜尋程式碼 接著選擇『新增搜尋引擎』，並在「要搜尋的網站」輸入框中『填入自己的 Blogger 網站網址

這篇主要說明，如何在 Blogger 的「 行動版 」網頁中加入 Google 自訂搜尋 ！一般我們大都使用 Blogger 後台拖拉編輯頁的小工具來安裝「Google 的自訂搜尋」。 要將它顯示於「移動版」網站的方法很簡單，只要在 HTML 編輯框中找到 Google 自訂搜尋的 「小工具 widget」，並幫這個 「widget」加上移動屬性，那小工具自然就會在手機版的網頁出現了！ 不過，既然是要在手機版網頁顯示！那麼， Google 自訂搜尋的小工具在網站裡安置的位置上就需要做一下安排。接著我們就開始實做，動工了！ 相關連結 範例為完成本文「STEP 4」後的顯示情形： 範例網址：行動版網頁「 DEMO 」 範例網址：電腦版網頁「 DEMO 」 設定流程 開啟自訂行動範本 申請 Google 自訂搜尋，安裝到 Blogger 讓小工具能在「行動版」網站顯示 「行動版」及「電腦版」網頁各別顯示 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 開啟自訂行動範本 開啟行動範本的自訂功能，可參考「 自訂 Blogger 行動版範本與自適應設計原理 ｜STEP 1：使用自訂 Blogger 行動版範本」。 Step 2 申請 Google 自訂搜尋，安裝到 Blogger 申請 Google 自訂搜尋與 Blogger 安裝自訂搜尋，可參考「 申請 Google 自訂搜尋，將搜尋結果嵌入 Blogger 網站 」。 Step 3 讓小工具能在「行動版」網站顯示 首先，前往 Blogger 後台的「版面配置」，找到自己的「自訂搜尋」小工具。 幫「自訂搜尋」小工具，標題暫時命名「Google 自訂搜尋 1」並按下『儲存』及『儲存排列方式』。 接著，點選「範本 〉編輯 HTML」 在程式碼頁框點一下，並按下鍵盤上的「Ctrl + f」按著( Ctrl 再按一下 f ) 於出現的搜尋框中輸入「  Google 自訂搜尋 1  」並按下鍵盤上的『Enter』 此圖為範本的程式代碼搜尋