發表文章

目前顯示的是 12月, 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 首頁顯示等比例縮圖 」混合使用,幫文章

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

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?

解決 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】就可退出全螢幕。 (

繼續閱讀: