Loading...
顯示具有 Blogger FixTune 標籤的文章。 顯示所有文章
顯示具有 Blogger FixTune 標籤的文章。 顯示所有文章

2011年6月4日 星期六

[Blogger Tune] 舊版型在官方 ShareButton 後面加入 +1 Button

image

Blogger 系統要加入 +1 Button 如果你不是使用 2010 年新版的可以使用範本設計工具的版型,那麼你需要加入一些小東西以及一些小修改即可使用。

一、勾選展開小裝置範本,記得備份你的版型先

二、找到 <b:includable id='shareButtons' var='post'> 和 </b:includable> 包的那一堆 code,其實 Google 官方已經幫你加了一個 DummyTag,那就是 +1 Button,會長得像這樣:

<b:if cond='data:top.showDummy'>
  <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>

三、雖然已經幫你加了那一個 Tag,但並沒有引入

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

你可以把上面那一行加到 </head> 之前的位置,我看了一下用 Blogger 新版版型的裡面,是放在另一個位置,且有 Blogger 內建的語法。

首先找到 <b:if cond='data:top.showStars'>….</b:if>,然後在 </b:if> 後面加入:

<b:if cond='data:top.showDummy'>
  <data:top.dummyBootstrap/>
</b:if>

然後你應該就會看到在官方的 Sharebutton 後面多了一個 +1 Button 了。

關於 Sharebutton 可參考之前寫的跟 Blogger Sharebutton 有關的文章:

Google +1 Button 的官方介紹網站和影片:http://www.google.com/intl/zh-TW/+1/button/

如果需要裝在其他網站或者你不想用官方 Sharebutton 旁邊那一個的話,你可以參考 Google 的文件選用適合大小的 +1 Button 及放在您想放的位置,文件在此:在您的網站中加入 +1 按鈕

那就請你試按看看囉!

2011年6月1日 星期三

[Blogger Tune] 回應區分部落格作者及訪客的簡單作法

image


就目前查到的可以做出在 Blogger 系統下回覆別人的回應功能的,是 Sean 所寫的這篇:Sean's Blog: 讓Blogger 的「意見回應」可以有「作者回覆」 (最終版),很久之前有試過,但就是弄不出來,後來我大概想了一下我自己需要的東西,大概是讓我回應的區塊可以跟訪客分別出來就可以,加上我訪客留言的人不算多,我只要能即時回覆看起來其實就蠻像回覆在底下的感覺。所以我就用 CSS 和判斷式土法鍊鋼了一下,以後有時間再來研究 Sean 大所實現的功能。

剛好 Steven 大有問到,所以我就在這裡分享一下我的爛招,大家還是應該要去看 Sean 大那一篇才是王道。

一、勾選展開小裝置範本,記得備份你的版型先

二、加一個作者回應的 DIV CSS:因為我想要我回應的框框內縮一點,不然其實不加也沒關係

#comment-header-me{width:525px;border:1px solid #cccccc;padding:5px 10px 5px 10px;margin:5px 0px 5px 30px;background-color:#eeeeee;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

三、找到 <b:loop values='data:post.comments' var='comment'>,我是加了一個判斷式 <b:if cond='data:comment.author == data:post.author'>,然後把作者回應要顯示的東西所需要的語法放在那裡面,你可以從原來的語法裡面先複製一份在判斷式裡頭再慢慢改,原來的語法就是接在 <b:else/> 後面。(紅字是加上去的判斷式,粗字是作者回應的區塊。)

<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div id='comment-header-me'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
  <div id='comment-name-url'>
  <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidiHOgmSbmXfaD1aMt4XzPnqfSIxtB41iZNcTHSNMkrverRND2FURKdNuIFNeBLjJOGgtLJyZdYj3Ejbj7E7gjZE4DkzyDjGZT3nykI2mjQ7nQ06JgBZXPUOg8O3ogg8GgNtXTjzUvaV1i/s45/n1558631551_185425_2612.jpg'/>
  <a class='comments-autor-name'>吉米回應&#12299;</a> <a class='comment-permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/>
  </div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>

<b:else/>
<div id='comment-header'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
  <div id='comment-name-url'>
     <!-- Fixed for display comment index -->
<div id='countcomment'>
<script type='text/javascript'> ShowCommentIndex(&#39;<data:post.id/>&#39;); </script>
</div>
<b:if cond='data:comment.authorUrl'>
  <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
  <a class='comments-autor-name'><data:comment.author/></a>
</b:if>
於 <a class='comment-permalink'><data:comment.timestamp/></a> <a class='says'>留言說&#65306;</a> <b:include data='comment' name='commentDeleteIcon'/>
</div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>
</b:if>
</b:loop>

參考參考就好,因為這基本上算是很懶惰的改法。

2011年5月6日 星期五

[Blogger Tune] 淺談 Blogger 的判斷式以及 PageType 的應用

這個東西很基本,卻可以做很多事,比如說你想讓某些東西不在首頁出現只在文章頁出現的應用,或者你也可以拿來區別不同 PageType 的 CSS,達到版型改變的效果。

首先,我們先來談現在 Blogger 的 PageType。

因為 Draft.Blogger 現在已經多了可以新增靜態頁面的功能 (類似 WP),目前最多可以新增 10 個 Page。

StaticPage on Blogger

因此目前有四種 PageType:

  • index:首頁,包含舊的 Search 以及搜尋 TAG 出現的頁面,還有首頁進行的分頁瀏覽 (較舊的文章、較新的文章)
  • archive:歷史文章列表
  • item:文章頁面
  • static_page:Draft.Blogger 新增的功能-靜態頁面

然後,怎麼用呢?這時我們要用到 Blogger 的 if else 判斷式。

基礎用法

如果 PageType 是 index 則裡頭可以填上你要加的語法,比方你想加的 Button 啦,或是在這個頁面才使用的 CSS 或 Javascript。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
……
</b:if>

進階用法

當是 index 時怎麼樣,然後如果不符合第一個條件怎麼樣。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
……
<b:else/>
……
</b:if>

接下來就請你參考實際使用情況,自由發揮囉。