[ 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/

[ 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 的方式設計行動網頁的話可以忽略此篇文章。

[ 教學 ] [ 巴哈姆特 ] 如何在巴哈姆特小屋文章中加入 GIF 動圖

這篇教學是記錄我把 GIF 動圖放到巴哈姆特小屋的過程，如果你也有這方面的困擾，敬請參考這篇文章~


首先，要讓 GIF 動圖完整呈現，必須要將圖檔存放在支援 GIF 格式的圖床，這樣嵌入到文章時才不會發生圖動不起來的尷尬情況。


在這邊萊德是以 Giphy.com 這個圖床做為示範， GIF 呈現的是台灣獨立開發團隊 Caliburn Studio 的最新 RPG 遊戲《泡泡星球的娜塔莉》的主角娜塔莉的角色行走圖。


起初開發日誌是 PO 在 Blogger 系統，所以可以直接使用以下 HTML 語法嵌入：

<a href="http://gph.is/1ZeVD0Z"><img src="http://i.giphy.com/3o72F7mwmU0CHDYkJq.gif" /></a>

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

Laird Studio 行動版網頁

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

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

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

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

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

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

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


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

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


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

趕快來一睹為快吧~

本文開始~

[ Blogger ] [ XML ] 如何在 Blogger 行動版網頁顯示 Google+ 留言板

Google+ 至今已推行多年，其便利留言系統對 Blogger 經營者的幫助尤其之大。

在網際網路日漸發達的現代社會，幾乎人人都有一組 Google 帳號，而且經常是跟隨著 Chrome 瀏覽器長期處於登入狀態，也因此讀者與網站站長的互動就更為便利。

再者，行動裝置的普及也促進許多網站以及部落格平台推出行動版的網頁，目的當然是讓使用手機或平板閱讀文章的時候，能夠有最好的閱讀體驗。

身為部落格平台的龍頭 Blogger ，當然也順著這波趨勢推出了行動版網頁。
在預設範本中， Blogger 會偵測訪客是否是使用行動裝置進入網站，如果是，就會呈現出行動版的網頁。
Blogger 也讓部落客可以自由的修改行動版的樣式以及排版，甚至是加入廣告盈利。

然而，目前 Blogger 行動版網頁和 Google+ 似乎還沒有連結起來。
站長們都知道，當 Blogger 啟用 Google+ 留言系統之後， Blogger 原本的留言系統就會被 Google+ 留言系統取代掉。

但是 Blooger 行動版網頁卻不會跟著出現 Google+ 留言板！

因此，本篇教學就是要解決這個問題，讓你的 Blogger 行動版網頁也顯示出 Google+ 留言板！



前置步驟：

1. 必須開啟 " 在行動裝置上顯示行動版範本 " 這個功能。
（ Blogger 管理後台 > 範本 > 行動服務 ）

2. 必須已經啟用 Google+ 留言系統。
（ Blogger 管理後台 > Google+ ）



本文開始~

[ SEO ] [ Blogger ] SEO 優化技巧：把文章標題更改成在網站名稱前面

搜尋引擎在為一個網站新增關鍵字索引的時候，會依照文章標題以及文章內容決定關鍵字。

但 Blogger 範本的預設值有個小地方會不利於你的文章被網友看到，那就是預設會把你的網站名稱排在文章標題前面！

乍看之下沒什麼問題，因為你或許會想這並不影響關鍵字搜尋，這點是沒錯的，但是網友搜尋資訊的時候，會先看標題再決定要不要點進你的網站。

有時候你的文章標題下得很好，而且文章內容可能就是網友想要找的資訊，但假如你的網站名稱太長，網站名稱又排在文章標題前面，搜尋引擎列出搜尋結果的時候，標題中會有一大部份都是你的網站名稱，最重要的文章標題卻只顯示出一點點，網友可能會認為這不是他要找的資訊，就不點進你的網站看你的文章了！

因此，我們可以把 Blogger 範本做一些修改，把文章標題更改成在網站名稱前面，這樣搜尋引擎在列出搜尋結果的時候，吸引人的標題才會起作用喔！

具體作法請觀看以下教學~

[ Blogger ] [ XML ] 解決 " The reference to entity must end with the ';' delimiter. "

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

這個常見的語法錯誤訊息為：

剖析 XML 時發生錯誤： The reference to entity must end with the ';' delimiter.

不過萊德我遇到的訊息有稍微不同，多了一個變數 "c" ，但事實上是一樣的語法錯誤問題！

剖析 XML 時發生錯誤： The reference to entity "c" must end with the ';' delimiter.

[ Blogger ] [ HTML ] 如何在網站或部落格中放入跑馬燈

相信讀者們都有注意到我們的網站上方有一個跑馬燈會一直跑吧~

究竟這個跑馬燈是怎麼做的呢？

這篇教學就是來教大家如何在自己的網站或部落格放置跑馬燈喔~

本文開始~