[ Blogger ] [ 教學 ] 如何為 Blogger 文章加上密碼鎖（with JavaScript Encryption and Decryption 2.0）

網誌平台 Blogger 的文章預設沒有密碼保護的功能，因此如果想要鎖碼的話，可以使用「隱藏 JavaScript 」的方式，巧妙的達到類似「文章密碼鎖」的效果，來看看要怎麼做吧~


本篇 Blogger 文章密碼鎖教學使用的是 JavaScript Encryption and Decryption 2.0 ，請先前往網站：


JavaScript Encryption and Decryption 2.0

http://www.vincentcheung.ca/jsencryption/

[ Google AdSense ] [ 教學 ] 如何新增 AdSense 網頁層級廣告、相符內容廣告、搜尋廣告

Source: https://www.google.com.tw/adsense/start/

Google AdSense 廣告聯播網行之有年，越來越多內容創作者像是部落客或 Youtuber 都得力於這個領先全球的廣告分潤計劃。

雖說在同樣流量下， Youtube 的收益比網站或部落格還豐碩一點，不過努力經營網站或部落格的創作者還是大有人在喔！

門檻部分，Youtube 的經營門檻比較高（需要先投資設備、軟體等等），製作出一部優質影片也需要一定的技術能力和花費較多時間，相對的網站或部落格就非常容易入門，就看創作者比較偏好靜態寫作或是動態影音哪種創作模式囉！（也可以兩種都經營XD）

在這邊萊德將自己使用 Blogger 申請 AdSense 並獲利的經驗整理成一系列教學，其中包含一些申請卡住或審核遭拒的疑難排解，讓創作者也能輕鬆透過 AdSense 獲利，進而成為優秀的內容創作者以及發佈商，歡迎多加參考利用！


◆ Google AdSense 系列教學將分為五個部分，分別是：

1. 如何申請 AdSense （ with Blogger ）

2. 如何新增一個 AdSense 多媒體廣告聯播網廣告單元

3. 如何新增 AdSense 網頁層級廣告、相符內容廣告、搜尋廣告

4. 如何驗證 PIN Code 與新增付款方式（以西聯匯款為例）

5. 如何使用西聯匯款收取款項

其中，由於 Blogger 與一般已註冊網域域名網站的 AdSense 審核管道在 Google 系統中完全不一樣，特別新增了一篇：

1.5 如何註冊 Google AdSense 帳戶（一般已註冊網域域名網站作法）

此外，與 AdSense 緊緊相連的 AdMob 與 Youtube 也會釋出申請教學喔！

SP1 如何申請 Google AdMob 帳戶



還請讀者們各取所需喔:D



正文開始~

[ Google AdSense ] [ 教學 ] 如何新增一個多媒體廣告聯播網廣告單元

Source: https://www.google.com.tw/adsense/start/

Google AdSense 廣告聯播網行之有年，越來越多內容創作者像是部落客或 Youtuber 都得力於這個領先全球的廣告分潤計劃。

雖說在同樣流量下， Youtube 的收益比網站或部落格還豐碩一點，不過努力經營網站或部落格的創作者還是大有人在喔！

門檻部分，Youtube 的經營門檻比較高（需要先投資設備、軟體等等），製作出一部優質影片也需要一定的技術能力和花費較多時間，相對的網站或部落格就非常容易入門，就看創作者比較偏好靜態寫作或是動態影音哪種創作模式囉！（也可以兩種都經營XD）

在這邊萊德將自己使用 Blogger 申請 AdSense 並獲利的經驗整理成一系列教學，其中包含一些申請卡住或審核遭拒的疑難排解，讓創作者也能輕鬆透過 AdSense 獲利，進而成為優秀的內容創作者以及發佈商，歡迎多加參考利用！


◆ Google AdSense 系列教學將分為五個部分，分別是：

1. 如何申請 AdSense （ with Blogger ）

2. 如何新增一個 AdSense 多媒體廣告聯播網廣告單元

3. 如何新增 AdSense 網頁層級廣告、相符內容廣告、搜尋廣告

4. 如何驗證 PIN Code 與新增付款方式（以西聯匯款為例）

5. 如何使用西聯匯款收取款項

其中，由於 Blogger 與一般已註冊網域域名網站的 AdSense 審核管道在 Google 系統中完全不一樣，特別新增了一篇：

1.5 如何註冊 Google AdSense 帳戶（一般已註冊網域域名網站作法）

此外，與 AdSense 緊緊相連的 AdMob 與 Youtube 也會釋出申請教學喔！

SP1 如何申請 Google AdMob 帳戶



還請讀者們各取所需喔:D



正文開始~

[ Blogger ] [ Google ] 如何調整 Google CSE 搜尋框顯示模式

繼上一篇文章   [ Blogger ] [ Google ] 如何加入自訂搜尋引擎 Custom Search Engine



Google CSE 近期有在程式碼做了些許更新，現在新建立的程式碼會像下圖一樣，是以

<gcse:searchbox-only></gcse:searchbox-only>

做結尾。

[ Blogger ] [ Google ] 如何加入自訂搜尋引擎 Custom Search Engine

Google 自訂搜尋引擎 ( Custom Search Engine ; CSE ) 是 Google 公司面向網站站長的網路服務。

站長將 Google CSE 放在自己的網站上，除了方便使用者透過關鍵字搜尋網站內容，還可以結合 Google Adsense 來賺取收益。

然而只要簡單幾個步驟，就能夠在 Blogger 加入威力強大的 Google CSE 囉！

趕快來看看怎麼做吧~

[ HTML ] [ 教學 ] 如何將 JavaScript 程式碼內容在網頁置中顯示（ 廣告橫幅、文字、圖片、影片嵌入皆適用 ）

很多時候，為了版面美觀以及構圖美學，會需要將網站上的內容置中顯示，尤其是行動版網頁更是如此。

但在修改網頁的時候，讀者應該會碰到有些程式碼內容，像是使用 JavaScript 寫成的廣告橫幅（ Ad Banner ）程式碼，無法自動置中顯示，常常會靠邊站。

因此萊德在這邊整理了三種利用 HTML 的語法，只要把 JavaScript 程式碼包起來，就可以達到置中的效果，歡迎大家參考~


◆ 第一種方法：

較為簡潔的 <center>...</center> 寫法~

<center> your JS code </center>

P.S. <center> 標籤語法在 HTML5 不支援喔！

[ Blogger ] [ XML ] 如何在行動版網頁加入文字版 Related Posts 相關文章功能

繼上一篇文章   [ Blogger ] [ XML ] 如何在文章下方加入文字版 Related Posts 相關文章功能


*註：本篇文章的程式碼參考來源為這個部落格，但該篇文章也是參考他人的作法，並非程式碼原作者，而文章內註明的原作者網站已失去連結，所以原作者已不可考，因此程式碼在本站是以 Creative Commons 3.0 釋出。若你是程式碼原作者，認為這侵犯到你的著作權的話，請直接聯絡站長協助修改或撤下這篇文章。



文字版 Related Posts 相關文章功能除了可以在電腦版網頁呈現，只要把語法放置在適當的位置，在 Blogger 行動版網頁一樣也可以顯示喔！

只是要在行動版網頁加入文字版 Related Posts 功能，必須要先在行動版網頁顯示 Label 標籤，這樣 Related Posts 的程式碼才能藉由 Label 標籤顯示相關文章。


關於如何在行動版網頁加入 Label 標籤，請移駕至以下頁面學習：

[ Blogger ] [ XML ] 如何在 Blogger 行動版網頁加入 Label 標籤


如果行動版網頁順利呈現 Label 標籤，就開始學習如何在行動版網頁加入文字版 Related Posts 吧！

本文開始~

[ Blogger ] [ XML ] 如何在文章下方加入文字版 Related Posts 相關文章功能

*註：本篇文章的程式碼參考來源為這個部落格，但該篇文章也是參考他人的作法，並非程式碼原作者，而文章內註明的原作者網站已失去連結，所以原作者已不可考，因此程式碼在本站是以 Creative Commons 3.0 釋出。若你是程式碼原作者，認為這侵犯到你的著作權的話，請直接聯絡站長協助修改或撤下這篇文章。

相信大家都有注意到我們文章的下方會有一個 Related Posts 相關文章的功能吧~

這個功能對一個網站來說是非常重要的，假如讀者看完一篇文章後，因為 " 相關文章 " 這個功能又看到了他們有興趣的文章，這樣除了能增加他們停留在網站的時間，對他們也有無比的好處。


Laird Studio 使用的 Related Posts 其運作原理是利用 Blogger 的 " 標籤 " 功能，當一篇文章是使用多個標籤的時候，程式就會從這些標籤中的文章裡面隨機挑選五篇 ( 預設 ) 顯示出來。

而這個功能目前只有文字版本，如果站長想要圖片版本，建議可以使用 Linkwithin 隨機文章小工具即可。


講了那麼多，到底 Related Posts 這個功能是怎麼做出來的呢~

趕快來一睹為快吧~

本文開始~

[ Blogger ] [ Google ] 如何在 Blogger 加入網站翻譯工具 Google Translate

Google Translate 是一個可以讓網站站長放置在網頁上的翻譯小工具。

只要輕鬆點選，就可以將網頁內容瞬間翻譯成另外一種語言，徹底實現了「網路無國界」這句話！

然而， Google 翻譯的技術目前依舊處於發展狀態，由於是直譯的緣故，文句常常會有不通順或是語意錯誤的情況發生。

因此建議站長們將網頁內容做一些修飾，減少不必要的語助詞，並增加英文的使用量，比較不會造成翻譯後語意表達不清的狀況發生。

講了那麼多，還是趕快來看看怎麼樣安裝 Google Translate 吧！

[ Blogger ] [ Google ] 如何在 Blogger 加入自訂搜尋引擎 Custom Search Engine

*此篇文章內容已經更新至以下網址，敬請繼續瀏覽:D

[ Blogger ] [ Google ] 如何加入自訂搜尋引擎 Custom Search Engine
http://www.laird.tw/2016/09/blogger-google-custom-search-engine.html

[ Blogger ] [ Shareaholic ] 使用 Shareaholic 在網站新增 Facebook Twitter Google+ 浮動式社群分享按鈕

社群分享是成就網站瀏覽率的關鍵要素，因此站長要去思考一個問題，就是如何使自己的網站內的文章讓讀者更容易分享到社群網站！

一篇好的文章，許多讀者看完都會想要分享給朋友，這時如果文章旁有個分享按鈕，大家只需要點一下想要分享的社群網站，非常輕鬆就可以幫網站分享文章給更多網友知道了~

這樣除了造福同樣碰到這類問題，或是剛好有這方面興趣的網友們能更快得到想要的資訊，也為網站帶來可觀的瀏覽量，可說是兩全其美啊~


而這篇文章是針對 Blogger ，使用 Shareaholic 這個網站的服務而做的教學！（使用 Chrome 瀏覽器）

只要輕鬆地經過幾個步驟，就能在你的 Blogger 邊側新增一個浮動式社群分享按鈕囉！

還等什麼，趕快來一起學習吧！

本文開始~

[ Blogger ] [ JavaScript ] 使用 JavaScript 在 Blogger 模擬 iPhone / iPad 網頁滾動效果

2015.12.22 更新

本篇文章所使用的捲動優化方法會因為網頁內容的多寡而有效能的差異，當你的網頁元素（圖片或廣告）越多時，在效能較差的電腦捲動效果就會越不好，因此請 Blogger 站長們可以先進行測試再考慮長久的使用。由於 Laird Studio 屬於三欄式版面配置，有部分網友反應網頁捲動不順的問題，因此已經暫時停用此優化方法。

Laird Studio 萊爾德工作室  敬上



2015.10.15 更新

本篇文章的教學內容已經更新，我們採用了另外一套程式碼達到網頁流暢滾動的效果，所以包括 Apple 軌跡板運作不順的問題都已經解決， Blogger 站長們可以放心採用以下方法優化你的網頁！

Laird Studio 萊爾德工作室  敬上



有沒有發現我們的網頁用滑鼠滾輪滾動的感覺和其他 Blogger 網頁不太一樣呢~

感覺就很像 iPhone / iPad 在滑動網頁一般，非常的流暢吧~

其實只要編輯一下 Blogger 的範本，加入優化網頁滾動的 JavaScript 程式碼，就會有這樣的效果喔~

以下是針對 Blogger 所做的網頁滾動優化教學~ 分享給大家一起學習~

本文開始~