發表文章

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

Blogger 行動版安裝社群分享按鈕

圖片
這次的設置,主要是想安裝「LINE、Google+、Facebook 及 Twitter」的社群分享按鈕,在「Blogger行動版網頁」上,裝設的位置安排在文章頁腳作者區塊的下方。

雖然行動裝置上的社群分享源已經很完善,不過在文章尾增加一個 LINE 的分享按鈕,除了可以提醒經過的朋友可以用 LINE 分享文章之外,提供一個直接按就可以觸發分享的動作也許是更直觀方便的選擇!

若你的網站也在 Blogger ,想為自己的「行動版網站 ( 移動版 )」加入額外的「社群分享按鈕」,可以接著往下觀看以下的相關設置流程。




設定說明 大家如果用手機瀏覽自己的 Blogger 行動版網頁會發現,在文章最下方頁腳區塊預設的分享按鈕為一個土色隱藏跳出式按鈕,及一個 Google+ 數值式分享按鈕。如下圖:




完成後的狀態為,去除內建的 Google+ 按鈕,保留土色的跳出式按鈕,增加 LINE 及 Facebook 、 Google+ 、 Twitter 等數值式按鈕。如下圖:




相關連結 Line 官方網站|用 Line 傳送「https://media.line.me/howto/zh-hant/

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



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



設定教學 Step 1 開啟「自訂」Blogger 行動範本 如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕,就得開啟 Blogger 行動版範本的「自訂」功能。

登入 Blogger 後,前往 Blogger 後台,「範本〉行動服務」點擊【 齒輪 】。




在跳出來的畫面中圈選,『⓪ 是,在行動裝置上顯示行動範本」〉「選擇行動範本 \ 自訂」〉【儲存】。




Step 2 範本中找查需要置入分享按鈕的程式碼區段 接著點擊【範本〉編輯 HTML】。




滑鼠點一下程式碼內頁,按下鍵盤中的【Ctrl + f】 ( 按著 Ctrl 再按一下 f )。在搜尋框中輸入「data:top.showMobileShare」並按下鍵盤的【En…

[教學] Blogger 快速安裝 DISQUS 留言板

圖片
Blogger 網誌模板範本應用教學:最近更換 Blogger 模版,試裝「Disqus 留言板」的時候發現,用 Disqus 官方的 Blogger ( 小工具 ) 安裝法安裝留言板,在安裝完成後留言板已經可以直接使用了!留言框只會出現在文章頁面。

早前介紹過一篇「Blogger 安裝 Disqus 社群聚合留言板」 ,是於 Blogger 後台中使用「編輯HTML」的方式安裝 Disqus 留言板,動作繁複且容昜把 Blogger 模板的 HTML 弄的亂亂的。

會使用該方式安裝是因為用原本官方提供的 Blogger 安裝法安裝 Disqus 留言板,在網站中的每一個頁面都會出現留言框,所以才用更改 HTML 的方式安裝 Disqus 留言板 ( HTML 方式安裝完成後只會出現在文章頁面 ) 。

既然現在直接用「新增小工具」就可以安裝使用,當然一樣把安裝流程記錄下來,以供未來安裝時方便查閱。




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

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

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



設定流程註冊 Disqus 帳號用 Blogger 的「新增小工具」安裝 Disqus 留言板讓留言板相容 IE 瀏覽器,在首頁及文章頁面顯示留言數同步 Blogger 留言至 Disqus 留言板導入 Blogger 留言至 Disqus 留言板驗證 Disqus 電子郵件註冊信驗證 Disqus 安裝讓 Disqus 留言版,在行動版網頁顯示
設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。




設定教學 Step 1 註冊 Disqus 帳號 進入 DISQUS 官網,按下畫面中的「Add Disqus to Your Site」




輸入要登入的「帳號名稱、電子郵件、登入的密碼」,按下『Next step』




輸入「網站名稱、Disqus帳號網址、網站屬性」,點擊『Finish registration』




Step 2 用 Blogger 的「新增小工具」安裝 Disqus 留言板 接著到了 Disqus 後台,選擇「Settings 〉install 〉Blogger 圖示」




點選畫面中的「Add 你的網站名…

繼續閱讀: