[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

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

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

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

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

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



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

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




相關連結

Disqus 官方網站「http://disqus.com/

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

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

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



設置流程

  1. 安裝 DISQUS 最新留言
  2. 讓 Disqus 最新留言小工具,在行動版網站顯示

設定教學

Step 1

安裝 DISQUS 最新留言

首先在登入「Disqus」平台後,在設定頁面找到「Shortname」,路徑「Settings 〉General 〉Site Identity」。並記下「Your website's shortname is」後面的帳號。

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




接著複製以下代碼,將「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">
</script>
</div>

num_items 顯示的留言數
hide_avatars 是否顯示頭像 0為顯示 1為不顯示
avatar_size 頭像大小
excerpt_length 留言的字符數

前往 Blogger 後台,點開「版面配置」按下「新增小工具」,選擇「HTML / JavaScript」

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



在跳出的視窗裡,將剛才複制的程式碼貼入內容框格中,標題不用輸入。(* 如果要讓「Disqus 最新留言」在行動版網站顯示。可以在標題輸入「Disqus 最新留言」,可之後再刪除。)

接著,若需更改標題,可將「<h3 class="dsq-widget-title">」後面的「Recent Commets」更改為中文「DISQUS 近期迴響」或自己想要的名稱,接著按下『儲存』

<div id="recentcomments" class="dsq-widget">
<h3 class="dsq-widget-title">DISQUS 近期迴響</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">
</script>
</div>

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



最後,若需更改小插件位置,可拉動小工具至自己想要的位置,按下右上角的「儲存排列方式」完成設置。接著前往自己的 Blogger 前台,就可以看到最新留言小插件安裝成功了!



Step 2

讓 Disqus 最新留言小工具,在行動版網站顯示

要讓小工具顯示在行動版網頁上,得先開啟 blogger 的自訂行動範本,開啟自訂行動範本可參考:「自訂 Blogger 行動版範本與自適應設計原理|STEP 1:使用自訂 Blogger 行動版範本」。

接著在「STEP 1」的時候,我們有新增一筆「Disqus 最新留言」的小工具。於範本中搜尋 Disqus 的「小工具名稱 ( Disqus 最新留言 )」,在小工具「b:widget」裡面加入「mobile='yes'」。找到的「b:widget」整體代碼類似:

<b:widget id='HTML3' locked='false' mobile='yes' title='Disqus 最新留言' type='HTML' version='1' visible='true'>

最後,將「b:widget」裡面「title='Disqus 最新留言'」的「Disqus 最新留言」刪除,於『儲存範本』後,Disqus 留言板就會在行動版網站上顯示



小結

發現個有趣的狀態,只要有人在自己的 Disqus 留言板留言過,在我們的「 js ( http://show-gadgets-techcoke.disqus.com/recent_comments_widget.js ) 」中,裡面的數值都會自己做變動,大家可以在網址列試驗看看唷!



相關文章

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

Blogger 安裝 DISQUS 社群聚合留言板



參考文獻
tipsviablogging



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *