[ 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



正文開始~

[ Google AdSense ] [ 教學 ] 如何申請 AdSense （ with Blogger ）

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 ] [ 教學 ] 如何申請 PChome 廣告聯播網

廣告聯播網平台眾多，像是知名的 Google AdSense 以及國內的部落格廣告 BloggerAds 都是廣告聯播網經典的例子。

如今台灣本土企業 PChome 網路家庭也推出了自己的廣告聯播網系統囉！想透過 PChome 增加網路廣告收入的站長可以嘗試看看~

這篇文章紀錄 Laird Studio 申請的過程，希望對有意申請 PChome 廣告聯播資格的站長們有所幫助~


首先進入 PChome 廣告聯播網的首頁。

網站連結：http://show.pchome.com.tw/pfb/


然後按下中間大大的綠色按鈕 " 網站主立即申請加入 "

[ Blogger ] [ XML ] 解決 Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

之前萊德我在修改 Blogger 的範本，遇到一個語法錯誤的問題，發現有蠻多人都有這樣的經驗，因此寫了這篇教學，希望對同樣使用 Blogger 平台的讀者有所幫助~

當時我是想要在網站的特定位置放置 AdSense 廣告程式碼，而 AdSense 前段的程式碼預設為：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

若直接從 AdSense 後台複製廣告程式碼並貼到 Blogger 範本，就會出現以下錯誤訊息：

剖析 XML 時發生錯誤：Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

[ Blogger ] [ 教學 ] 如何讓 AdSense 廣告在行動版網頁顯示或者不顯示

通過 AdSense 帳戶審核的 Blogger 站長，都可以直接使用 " 版面配置 " 的 " 新增小工具 " ，建立一些適合自己部落格的 AdSense 廣告來賺取收益。

然而，如果是使用小工具中的 " AdSense " 建立廣告的話，預設也會在 Blogger 行動版網頁中顯示。（如下面兩張圖的做法）

P.S. 這邊會顯示的前提是你有開啟 " Blogger 行動版範本 " 的功能，如果是使用 RWD 的方式設計行動網頁的話可以忽略此篇文章。

[ 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 囉！

趕快來看看怎麼做吧~

[ 軟體推薦 ] [ XnConvert ] 免費好用的浮水印軟體 XnConvert

繼上一篇文章   [ Paint.NET ] [ Blogger ] 如何在照片加上 Logo 浮水印

萊德最近發現了一款超好用的浮水印軟體 - XnConvert ，也因此幫 Laird Studio 站內的圖片全部都換上了新的浮水印囉~

只是圖片數量實在太龐大，要一口氣全部更換還真不容易啊~

好啦~ 這是題外話，趕快就來介紹 XnConvert 這款軟體吧！

有 Follow 我們網站的讀者就會記得，之前曾經介紹過 Paint.NET 這款繪圖軟體，當時也介紹了如何使用圖層的概念幫你的圖片加上浮水印。

（詳情請見 [ Paint.NET ] [ Blogger ] 如何在照片加上 Logo 浮水印 這篇文章的介紹）

使用繪圖軟體架上浮水印的好處在於，你不需要太熟悉座標的概念，就可以隨意調整浮水印的大小及位置，但缺點就是無法大量產出。

XnConvert 雖說是免費軟體，但對於有批量放上圖片浮水印需求的使用者來說，無非省下了很多寶貴的時間！

有這方面需求的讀者，相信這款軟體將帶給你無比的便利性喔！

趕快來看看怎麼安裝以及操作 XnConvert 吧~

[ 部落格 ] [ 智慧財產 ] 淺談著作權以及智慧財產權這回事

Source: https://creativecommons.org/about/downloads

這篇文章想跟大家討論一個主題 - 「什麼是智慧財產？」


如果你的領域與「創作」相關，想必對「智慧財產」並不陌生，但這邊我想特別針對「網際網路」當中的著作來討論。


「網際網路」是人類相當偉大的科技，讓我們輕鬆達成以往不容易的事情，比如說可以很輕鬆的跟很久不見的朋友聯絡等等。

「網際網路」具有龐大的資源以及資料庫，因此也加速了資訊的傳遞，讓每個可以上網的人都享有獲得資訊的權利。

我們可以說，「網際網路」是人類創造的「第二個地球」，而且在這個虛擬的地球裡面，幾乎沒有所謂的貧富貴賤，是一個平等的世界。


隨著最近幾年的快速發展，「網際網路」已經是人們不可或缺的一部分，而由於網路世界當中有眾多的資源以及素材，因此許多創作者都會在網路上尋找靈感來源，而這其中就牽扯到所謂的「智慧財產」問題。

依照大部份國家對個人「智慧財產」的保護規範，其實都是大同小異的，也就是當創作者完成的作品的那一刻，就享有這個作品的「智慧財產權」，包括但不限於「文章，繪畫，照片，音樂，程式設計」等等。

而我們常聽到的「著作權」，其實是涵括在智慧財產權的概念。

事實上，智慧財產權涵括了「著作權」，「專利權」，「商標權」等等的權利，每一項權利都有獨特的意義，因此並不相同。

而這篇文章要討論的智慧財產權主要偏向「著作權」方面。


擁有「著作權」意味著擁有這個作品的「所有權」，創作人可以將作品授權給合作廠商重製，發布在任何一個平台，或甚至是放棄轉讓「所有權」。

但前面所提及的創作，絕大部份都屬於現實生活中的「實體創作」，大部份在授權給他人之前是不會公開的，因此很少會有侵權的問題。

但如果這些作品是呈現在「網際網路」上面呢？

整個狀況就會不一樣了。

[ 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 ] 如何在 Blogger 行動版網頁加入 Label 標籤

Laird Studio 行動版網頁

讀者們使用 Blogger 一段時間後，漸漸會對「網頁設計」這個領域越來越親近，除了電腦版的網頁之外，自然也會顧慮到行動版網頁的呈現效果。

有開啟自訂行動版網頁的讀者應該會發現， Blogger 行動版網頁「預設」是不會顯示 Label 標籤功能的！

因此這篇文章是提供 Label 標籤的語法給大家，只要在你想加入標籤的 " header-line " 或是 " footer-line " Class 裡面新增 Label 標籤的語法，就能夠像 Laird Studio 的行動版網頁一樣顯示 Label 標籤囉！

[ Android ] [ App ] 淺談 Web App 這回事

Source: developer-tech.com

這篇文章想跟大家聊聊一個主題： Web App

App 這個詞大家耳熟能詳，最普遍的定義就是安裝在行動裝置上面的應用程式。

但什麼是 Web App ？

根據維基百科上的定義， Web App 是一種在瀏覽器執行的應用程式。


Web Application

https://en.wikipedia.org/wiki/Web_application

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

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

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

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


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

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


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

趕快來一睹為快吧~

本文開始~

[ SEO ] [ Blogger ] SEO 優化技巧：新增 URL 至 Google 的索引（提交內容給 Google ）

想要讓網友在搜尋引擎上找到你的文章，你的文章 URL 就必須要收錄在搜尋引擎的索引裡面。

不過當今的搜尋引擎都很強大，以 Google 為例，網路蜘蛛 ( Web Spider ) 和搜尋機器人 ( Robots ) 都是自動化的作業，站長通常不需要多做其他事情。

「新增 URL 至 Google 的索引」的用意在於：當你剛發表文章不久，可以主動把文章網址提交給 Google ，讓搜尋引擎優先處理你的網站資訊。


想知道要在哪裡提交你的 URL 嗎？

趕緊來看看吧~

[ Blogger ] [ 部落格 ] 淺談為何你要選擇 Blogger ?

Source: Blogger on Google+

這篇主要是分享 Laird Studio 選擇 Blogger 的原因，並且分析整理 Blogger 的優缺點，以及從各個面向談論 Blogger 的未來。

正文開始~



今天想跟大家聊聊一個主題：Blogger 的未來


會想寫這篇文章主要是因為看了 WFU Blog 的 這篇文章 ，突然有感而發。

問我當初為何會選擇 Blogger 成立 Laird Studio 網站，其實我的答案很簡單：「因為 Blogger 是 Google 公司的網路服務，同時也是目前全世界最廣泛使用的網站平台。」


萊德我國中的時候用過無名小站，但沒有開通過 VIP 服務，因為覺得免費會員就很好用了，當時對 HTML 以及 CSS 這些完全一竅不通，所以版面樣式全都是無名小站內建的，用途也只是純粹寫寫文章抒發心情與結交朋友而已。

但自從高中開始，因為課業繁忙，就沒有再繼續寫文章了。

更不用說， 2013年 12 月 26 日無名小站關站前，我還一度懶得備份之前寫過的文章呢......（最後還是備份下來了@@

不過上了大學，因為科系的關係，所以學會了一些程式語言，也因此就萌生了「建立一個屬於自己的網站」的念頭。


最一開始，我有想要自己「架設網站」，也就是包括網路主機什麼的，很想自己玩玩看。

但後來為何會選擇 Blogger ，然後只更換網域名稱而已呢？

且聽我娓娓道來吧~

[ 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 ] [ 教學 ] 如何在 Blogger 加入 Page 網頁導覽列

導覽列是一個網站最基本的功能之一，也是增加訪客停留時間的絕佳利器。

簡單大方的導覽列能夠顯得網站更有格調，人們的第一印象也會比較好。

在 Blogger ，你可以使用 " 網頁 " 這個功能建立子網頁，再配合小工具，就能夠配合你的網站風格做出導覽列囉！

趕快來看看怎麼做吧~

*請注意： Blogger 的網頁預設不會有留言板功能，若需要留言板功能，可以使用發表文章的方式，再利用網頁小工具新增外部連結，從導覽列連結到文章。