發表文章

目前顯示的是 十二月, 2013的文章

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

圖片
這次的設置需求是想在 Blogger 文章頁面,標題下方與作者區塊上方加入 AdSense回應式廣告,文章中段則利用「Blogger 繼續閱讀隱藏廣告和物件」,當在「行動版」或「電腦版」的首頁點擊標題或繼續閱讀超連結時,可以在內文顯示 Google AdSense 廣告。

另外,由於「電腦版」網頁的廣告較大,若在手機上瀏覽自己的「行動版」網頁時,有可能導致廣告超出文章區塊,所以也利用 Google AdSense 提供的「回應式廣告單元設定」,來實現廣告在移動版網頁能夠正常推送。

這篇的廣告放置運用,以多媒體廣告為示範主體, AdSense 的超連結廣告大家可以如法泡製,本文裡就不再多做超連結方面的設置方式了。

由於 Google AdSense 的審查非常嚴謹,一個不小心我們就有可能觸碰到潘朵拉的盒子,好不容易申請的 AdSense 帳號被凍結可不是鬧著玩的。

所以不小心經過這裡看到本篇文章,又剛好有需求在自己的網站上使用本文所做的相關設置的朋友,在做設定前一定要先熟悉「AdSense 條款及細則」與「AdSense 政策與流量品質指南」裡的相關使用規則,才不至讓我們的 Google AdSense 使用權限被凍結!




在瞭解了 AdSense 相關規範後,接著就可以著手規劃廣告要擺放的位置了,目前 AdSense 規定單一頁面可以放置三個多媒體或文字廣告 ( 加起來三個 ) 。

規劃的方向如下圖「( 圖片一 ):橘色框格」為用小工具安裝的廣告、 「( 圖片一 ):暗藍色框格」為文章內頁的廣告。圖左為首頁、圖右為文章頁。




在確定廣告的擺放位置之後,會發現 ( 圖片一 ) 文章頁面裡,由上數下來的第一及第二個廣告擺放位置很危險,大致上有兩個問題。

問題一、我們的文章在發表後, Blogger 會抓文章內最頂端的第一張圖片當作首頁的文章圖片 ( 文章標題之下的第一張圖片 ) ,所以,若是將 AdSense 廣告放在文章標題的下方,就會造成圖片與廣告並列,有一定的機率違反 AdSense 政策。

這裡的解決方法有兩種:
a. 使用「選擇喜歡的圖片當作 Blogger 文章縮圖 ( 封面圖 )」及「讓 blogger 首頁顯示等比例縮圖」混合使用,幫文章中的第一張圖片縮放至適宜大小,並將它隱藏只在首頁顯示。
b. 將社群分享按鈕放在廣告和圖片之間,且造成圖片和廣告有一個較…

Blogger 電腦版行動版文章中安裝社群分享按鈕

圖片
這篇的規劃需求是想在 Blogger行動版 ( 手機版 )」及「電腦版」網站的文章頁面,標題下方及文章最下面的作者區塊上方,安裝「社群分享按鈕」。Facebook、G+、Twitter、LINE 分享按鈕,是這次設置的主要分享源。

在這兩個區間安裝「分享按鈕」有個好處,在用手機瀏覽網頁時,這段區間顏色區塊大,放入較多按鈕擠到第二排也不至於感覺肥大。而文章標題下方的「分享按鈕」,我們一樣選擇數值式按鈕,讓來訪文章頁面的訪客知道這篇文章的熱門度!



首先,我們可以觀察一下完成後的「行動版網站」(*「STEP 3-2」的文末可觀看「電腦版網站」的完成圖 ) ,如下圖綠色框格部份。




相關連結 範例網址:行動版網頁「DEMO

範例網址:電腦版網頁「DEMO



設定流程開啟「自訂」Blogger 行動版範本範本中找查需要置入分享按鈕的程式碼區段文章內頁加入社群分享按鈕程式碼部署分享按鈕「JS、CSS」
設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學 Step 1 開啟「自訂」Blogger 行動版範本 如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕,就得開啟 Blogger 行動版範本的「自訂」功能。可以前往「自訂 Blogger 行動版範本與自適應設計原理」的「STEP 1 使用自訂 Blogger 行動版範本」,查看開啟「自訂」 Blogger 行動版的步驟。



Step 2 範本中找查需要置入分享按鈕的程式碼區段 接下來,點選【範本 \ 編輯HTML】




在程式碼頁框裡面用滑鼠左鍵點一下,並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ,在出現的搜尋框中輸入「<data:post.body/>」按下鍵盤【Enter】




此時在程式碼區間,可以找到兩處有「<data:post.body/>」的程式碼片段。



2-1「行動版」範本的文章內頁程式代碼資料 第一處「<data:post.body/>」為「行動版」範本的文章內頁程式代碼資料,如果模板改的很亂不確定是否為手機段的區間,可以在「<data:post.body/>」上方搜尋是否有「<b:includable id=&#…

Blogger 安裝 DISQUS 最新留言 ( 最新回應 )

圖片
這次的實作設置主要是想在 Blogger 中,利用後台小工具增加一個「Disqus 近期評論 ( 最新留言最新回應 )」的小插件,安裝完成後會在網站右側欄顯示訪客最近的留言及訪客的大頭照。

在網路上逛街找方法的時候,發現網友製作了一個方便安裝的生成器,只要輸入 Disqus 帳號及一些小設定即可馬上完成。

下面為安裝流程,如果你剛好需要在 Blogger 網站上顯示 Disqus最新留言回應 ( 近期迴響 ),不妨參考以下相關設置流程。




先觀察一下完成後的樣貌;在用 Blogger 小工具安裝完成後會在網站右側加入 Disqus 最新評論的小插件,如下圖可以看到安裝完成。





相關連結 Disqus 官方網站「http://disqus.com/

Disqus 後台捷徑「https://disqus.com/admin/moderate/

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設置流程安裝 DISQUS 最新留言讓 Disqus 最新留言小工具,在行動版網站顯示
設定教學 Step 1 安裝 DISQUS 最新留言 首先在登入「Disqus」平台後,在設定頁面找到「Shortname」,路徑「Settings 〉General 〉Site Identity」。並記下「Your website's shortname is」後面的帳號。





接著複製以下代碼,將「show-gadgets-techcoke」改為自己的「shortname」
<div id="recentcomments" class="dsq-widget"> <h3 class="dsq-widget-title">Recent Comments</h3> <script type="text/javascript" src="http://show-gadgets-techcoke.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=100&qu…

解決 CentOS 6.4 Chrome 無法退出全螢幕的方法

圖片
CentOS 6.4 上使用「Chrome」一段時間,發現一個蠻大的 bug ,視窗在開啟「全屏顯示」的時候會無法縮回,雖然畫面中提示「按下 F11 」可退出全螢幕狀態,但是按了 F11 之後會連給我們退出的 F11 超連結也消失。

更可怕的是螢幕會卡正在瀏覽的網頁,按右鍵也沒有選項可縮小視窗,而且在桌面的工作區及各面板會完全被正在瀏覽的視窗擋住,無法退出。

解決辦法是 . . .,先在 CentOS 系統上建立一個「F11」的退出全螢幕鍵盤快速鍵,以解決在使用「Chrome 瀏覽器」瀏覽一般網頁時被卡在畫面的冏境!若你剛好在找解決全螢幕卡屏的方法,可試著做以下設置。




使用環境 作業系統:CentOS 6.4 64bit   CentOS 6.5 64bit
瀏覽器:Chrome 版本 31.0 1650.57 ( 此版 Youtube 容昜當掉 )
瀏覽器:Chromium 版本 28.0 1500.95



設定流程使用鍵盤快速鍵離開全螢幕狀態在 CentOS 系統上,建立「F11」退出全螢幕鍵盤快速鍵
設定教學 Step 1 使用鍵盤快速鍵離開全螢幕狀態 在卡住的畫面中按下鍵盤組合鍵【Alt + 空白鍵】( 按著 Alt 再按一下空白鍵 )
此時可以在跳出的選項中看到其他的快速鍵,這邊可選擇【Alt + F4】or【Alt + F9】( 關閉或縮小視窗 )




Step 2 在 CentOS 系統上,建立「F11」退出全螢幕鍵盤快速鍵 在桌面上點選,【系統 \ 偏好設定 \ 鍵盤捷徑鍵】
跳出的視窗中選擇,【視窗管理員 \ 切換全螢幕模式】,在右邊的捷徑鍵框格中按下鍵盤上的【F11】,關閉視窗後即可完成設定





小結 在做完設定後,某些 Youtube 影片中還是會出現無法退出全螢幕的現象 ( 例如:這裡 ),無法退出的情況都是影片在放大全螢幕後,屏幕上方提示白底超連結「www.youtube.com 已顯示為全螢幕  退出全螢幕 ( Esc )」,若影片全螢幕時畫面上方提示為白底超連結狀態,在按下鍵盤「Esc」或按下影片右下角縮小視窗後,都會造成卡屏。

解決辦法是,不按「Esc」及右下角縮小視窗,直接按下【F11】就可退出全螢幕。 ( 上面的連結請開新視窗測試,因為會卡全屏,目前無解,只能一開始按【F11】退出全屏或卡住時按【Alt + 空白鍵】解套。 )

另外也…

繼續閱讀: