Tool Pages

留言版提示 - jQuery 展開收合效果

將Blogger留言板換成Google+留言系統時可能會遭遇一個問題, 那就是訪客留言門檻變窄了, 必須有Google+帳戶才能留訊息. 以往有多種Open ID服務可以登入, 或者隨性地以匿名留言. 現在從單純的部落格將觸角拓展至社群, 個人覺得這種整合有絕對的加分, 這和到臉書必須以臉書帳號才能留言一樣自然.
畢竟目前G+是全網絡第二大社群, 以Google帳號回應並不是困難的事, 何況還能指定群組或個人當作訊息的接收對象. 光是這一點就打敗大多數的社群和部落格、微網誌.

嘮叨了一堆, 今天的重點在於: 如何提示陌生訪客留言的方式. 列出留言要點顯得有些強迫性, 每一篇都要再看一遍; 連自己都覺得礙眼. 其實可以透過jQuery的收合展開效果, 將留言提示摺疊起來, 有需要檢視的網友再去"打開"它, 讓它不會顯得厚重.

jQuery開合效果也不是新玩意了, 剛好可以運用在提示、註解這方面, 順便分享給網友. 它的基本語法可參考W3C的教學, Sliding   原本想丟個連結讓大家自行研究就OK啦! 隨便找都可以找到教學文. 不過我可能會被網路的另一端丟石頭... 每次想到要寫粗略; 還是寫詳細都很煩惱, 打字很煩惱.

先看一下效果, 有興趣再繼續看:

出浴清涼照 - 個人私藏珍品
被騙了吧! 哈哈~


◆ Step 1. 先確認你的部落格裡面是否已使用jQuery程式庫? 已經使用則省略此步驟. 尚未加裝jQuery, 請將下列語法插入版型的CSS裡, </head> 之前.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
近期的版本都可以, 不要使用jQuery2.0以上版本. IE8以下的瀏覽器無法正常運作. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Suggestion',message:'查看你的 Google Analytics 分析, 訪問者的瀏覽器版本比例以新版本居多, 可排除 IE 8 之前的用戶, 盡情使用 jQuery 最新版本吧!',buttons:[{id:'btn-1',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});

◆ Step 2. 增添樣式至CSS, 或是打開模板CSS分類, 如:
/* Posts ------------------- */ 或是 /* Comments ---------------- */
找個位置插入以下樣式. background(背景)、border(框線)色碼請自訂.

.Gplus
{
margin:0px;
padding:5px;
text-align:center;
 background:#EEEEEE;
border:solid 1px #000000;
}
.Gnote
{
margin:0px;
padding:5px;
 background:#FFFFFF;
border:solid 1px #000000;
height:auto;
display:none;
}

◆ Step 3. 在 </head> 或 </body> 上方增加展開滑動的程式碼.

<script>
$(document).ready(function(){
$(".Gplus").click(function(){
    $(".Gnote").slideToggle("slow");
  });
});
</script>

◆ Step 4. 準備安裝要顯示的留言提示. 搜尋以下一組程式碼位置:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Blogger模板裡應該會有兩組相同的碼, 選擇第一組, 插入紅字部分的提示內容:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class="Gplus" title="按此展開．收合">Google Plus留言提示</div>
<div class="Gnote">
提示內容 (HTML格式)
</div>
<b:include data='post' name='comment_picker'/>
</b:if>

提示內容要自己寫嘿! var types=[BootstrapDialog.TYPE_DETAIL];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Detail',message:'此種展開收合效果在同一頁面多項運用時, 切記需要設定不同 id 或 class 命名',buttons:[{id:'btn-2"',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]})});
儲存版型後會發現的確有了jQuery的收合效果, 但看起來很平板.
希望有顏色漸層或是立體感, 不怕麻煩的人繼續下一步驟. (非必要)

◆ Step 5. 借用 colorzilla.com 的漸層編輯器, 左側可快速點選質感種類並修改個人化的色版. 設計完成, 複製右側CSS. (我知道很多字容易讓人眼花, 忍著點吧!)
你也可以省略部分的CSS, 只複製 /* W3C */ 的那一段. 它的作用是區分各種不同版本的不同瀏覽器. 現在的主流瀏覽器都符合W3C標準.
將這一大串CSS替換Step 2的其中兩行背景色 -- background: #EEEEEE; (以及 background: #FFFFFF; ), 亦可分設不同漸層, 完成.
後記: 這一篇去年就有網友詢問了, 直至現在才寫, 真抱歉...

◆ 進階運用：側欄工具的折疊效果


參考資料:
+Wayne Fu  Google+留言框
Blogger中文社群



悄悄地破百萬了! 截圖留念. 2013-05-27