Friday, March 26, 2010

▌我的 Blogger Hack 筆記

11BloggerHacks

我是Blogger新手!搬來以後,擁有強烈個人風格版面一直是我持續努力的目標。我目前只用這些基礎而重要的應用。其實最新回應、最新文章的功能不是在無名痞客邦等BSP設定數字、按下儲存就輕鬆解決了?在自由度百分百的Blogger打造小模組,必須多花上幾倍的時間搜尋、閱讀、實驗,但真的很有成就感,很好玩!在經過無數教學的指導下,發現函式的神奇。這是給自己的統整筆記,也希望和大家分享。

在此深深向寫出好用hack的前輩致謝<(_ _)>

最後更新:2010

--

1. 最新文章及縮圖:讓讀者更明白近期書寫內容! via

不連續x思考斷x面解構: Blogger Hack: 最新文章 AJAX 縮圖版

副雜誌夥伴NS的最新外掛。安裝後,我一頁頁檢查以前縮圖是否正常出現,發現Flickr有幾張出現官方unavailable的圖示,憑著以前做網頁的debug魂找原因,發現若是當初上傳的圖不夠大,卻用最大尺寸的圖網址,縮圖就會出現問題,只要改選小一號就ok。熱血幫推,覺得不錯也來裝一個吧!(你的回覆太客氣了:P)

 

【原用】最新文章(含文章總數):功能就像所有文章迷你列表 via

Abin's Tech Note: 最新文章模組「終極版」 

因為九月底Blogger的feed修改了,必須更新函式否則會造成文章連到單篇comment feed的bug。2008.10.4

var title = Post.title.$t;
/*var link = Post.link[0].href; 這行要刪掉,用下面四行取代*/
    var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
  j++;
var link = Post.link[j].href;

    var timestamp=Post.published.$t.substr(0,10);

 

2.分類及封存之標題折疊模式 via

Abin's Tech Note: 標籤/搜尋頁面只列出標題 (Simplify the result of label and search)

因覺得一般BSP文章分類列表,無法知道有多少留言當閱讀參考,所以嘗試微調,也請多支持我的分類文章^^ 2008.9.13

<td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt (\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='展開/ 收合精簡模式。看留言請點標題^^'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a> - (<data:post.numComments/>)</h3>
</td>

 

3. 一目了然最新回應 via

LVCHEN: 最新回應安裝程式v2.0 

4. 作者回應與讀者回應顏色區分 via

良人的大秘寶: [筆記]標示作者的回應

經實驗作者回應不會顯示時間/永久連結,所以我有再重複某幾句語法 2008.9.12

<p><data:comment.body/></p> </dd>
<dd class='comment-footer'> 
   <span class='comment-timestamp'>
      <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
         <data:comment.timestamp/>
      </a>
         <b:include data='comment' name='commentDeleteIcon'/>
   </span> 
</dd> /*如法炮製作者也顯示留言footer時間*/

<b:else/>   

 

5. 讓讀者看單篇文章載入速度更快!Plurk外掛等這些元件選擇性顯示 via

堯@部落格: 如何讓某些元件只在首頁/內頁顯示[BLOGGER]

但這一句我是打讓該元件只有在首頁顯示

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
</b:includable>

讓單篇文章頁面,標題在前、部落格名稱在後,這是我的改造:

▌我的 blogger hack 筆記 (True Colours)
September 2008 (True Colours)

<b:else/>
<title><data:blog.pageName/>  (<data:blog.title/>)</title>
</b:if>
 

 

6. 讓讀者看單篇文章還能多看一點(把舊文拿出來曬XD)via

Abin's Tech Note: 加入相關文章功能 (Related Post)

這是我一直搞不定的hack,發生了Category顯示好幾次的跳針情況(OS: 我就是要找出原因(/‵皿′)/~ ╧╧)終於找出自己多了一段,導致呼叫重複的動作......2008.9.13

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</b:loop>
</b:if> /*標色區是多餘的,因我誤解意思把abin第二第三的程式區組在一起*/

 

7. 寫作月曆兼好查好用萬年曆 via

LVCHEN: 嘗試一個新的外掛-日曆文章列表

其實月曆並不太必要,安裝這個考慮了蠻久。但安裝再改完CSS以後,覺得為自己作一個回憶舊作的途徑也很好^^,月份和年份輸入欄位就像任意門一樣。而且比其他BSP的日曆感覺還精美又好用哦感謝!(這不是網頁安裝版)以下是我改的CSS:2008.10.4

<style> /*在小工具欄位貼上hack後,就直接加上*/
#blogCalendar {
margin-left:0px;
display:block;
text-algin:center;
border:1px dotted #ccc;
}
#CalendarCaption a {
text-decoration:none;
}
#CalendarCaption{
border-bottom:1px solid #ccc;
}
#CalendarTable a{
font-weight:bold;
color: #5D8ACB; /*有寫文章的日期數字變淺藍色*/
}
.Today{
background: #eee; /*今日的背景是淺灰色*/
}
#CalendarFooter{
padding-left:15px;
}
.yearInput{
background:yellow; /*按了年份後,輸入欄位背景是亮黃色*/
}
#monthTable{
background:#000; /*按了月份後,選擇欄位背景是黑色*/
} </style>

 

8. 單篇文章之年月份資訊列 via

Abin's Tech Note: 以年月份做分類的導覽連結列 (Year & Month Breadcrumbs)

但我卻喜歡把他放在文章「頁尾」而非導覽,所以擺放位置在Subscribe to黑灰雙色區塊的後面 2008.10.4

  <div class='feed-links'>
  Subscribe to &gt;&gt;
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
/*到這裡是 Subscribe to >> Post (Atom) 區塊*/

<!-- Year & Month Breadcrumbs -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
      <script type='text/javascript'>
        generateBreadcrumbs();
      </script>
<b:if cond='data:post.title'>
        &gt; <data:post.title/>
      </b:if>     
    </p>
  </b:if>
<!-- End of Breadcrumbs Hack –>

 

發現 Abin 的月份連結是用 /search?updated- 去做的。我又手癢自己改造,把月分連結改成例如 xxx.blogspot.com/2008_09_01_archive.html,因為我喜歡月份封存標題是September 2008,回應區下的黑色區塊兩邊各是 October 2008和August 2008的畫面。(超龜毛XD)2008.10.4

<script type='text/javascript'>
//<![CDATA[
<!-- Functions used for generating Year & Month Breadcrumbs: generateBreadcrumbs() -->
function generateBreadcrumbs() {
  var strHref = location.href.toLowerCase();
  var intWhereAt = strHref.lastIndexOf('/', strHref.indexOf('.html'));
  var intYear = parseInt(strHref.substr(intWhereAt - 7, 4),10);
  var strCrumbOutput = ' &gt; Year: <a href="/search?updated-min=' + intYear;
  strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + (intYear + 1);
  strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00">' + intYear + '</a>';
  var intMonth = parseInt(strHref.substr(intWhereAt - 2, 2),10);
  var intNextMonthYear = intYear;
  var intNextMonth = intMonth + 1;
  if (intNextMonth > 11) {
    intNextMonth = 1;
    intNextMonthYear += 1;
  }
  var strMonth = intMonth;
  if (intMonth < 10) strMonth = "0" + intMonth;
  var strNextMonth = intNextMonth;
  if (intNextMonth < 10) strNextMonth = "0" + intNextMonth;
  strCrumbOutput += ' &gt; Month: <a href="/' + intYear;
  strCrumbOutput += '_' + strMonth + '_01_archive.html">
' + strMonth + '</a>';
  document.write(strCrumbOutput);
}
//]]>
</script>

 

研究好久後發現,如果某文章有更改年月,導覽列還是以首發年月為準。為甚麼呢?函式如何知道單篇文章在哪天寫的?原來不是由標題之上的日期判斷,而是依照發文那刻Blogger產生的網址上。注意到這點的我更愛去思考,和靈光一閃的成就感(累XD)2008.10.10

 

9. 顯示第幾樓的回應? via

Abin's Tech Note: 增加文章留言回應的編號 (Show Comment Index) 

每次實驗都沒有一次成功的XD,按照Abin擺放的位址測試,發現我家計數不正常,或者只算回應者是「格主本人」的留言,我在想可能是與「作者回應與讀者回應顏色區分」的hack(<b:if cond='data:comment.author == data:post.author'>)衝突了,於是決定擺在留言者的部份。2009.3.15

         <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
          <a expr:name='&quot;comment-&quot; + data:comment.id'/><!-- Fixed for display comment index -->
#
   <script type='text/javascript'>
     ShowCommentIndex(&#39;<data:post.id/>&#39;);
   </script>
| &#9829;
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
          想說... 
        </dt>

 

10. 加入推薦及書籤按鈕(單篇文章內顯示)via

BLOG 加入共享書籤按鈕 | 張可樂 - killing me now with ur pudding.

裝這外掛時很順利,真的很精美噢感謝^_^2009.3.22

11. 最後更新時間(單篇文章內顯示)via

Abin's Tech Note: 增加文章更新時間 (Show Post Update Time)

所謂日期,對習慣網路書寫、整理想法資訊已久的我意義非凡,而我也經常回顧心血舊文多次更動修改,所以加上這hack。2009.3.22

 

-不定期更新-

【同場介紹】Ajaxload - Ajax loading gif generator,分享我以前就作好的兩個小花等待圖:

1. 2.

// Technorati 標籤:

{ 目前有 39 則留言,一起加入回應吧!}

# | ♥ 白色飛魚 想說...

既然huijung會CSS語法,那麼偶爾不妨到這個網站挖寶,裡頭有一大堆BloggerHacks。

# | ♥ 電子羊 想說...

哦天啊,我剛剛也正在想怎麼讓列表模是只顯示標題XD 然後那個最新文章列表也太酷了喔喔喔喔(大開心),借我拿去研究囉>///< 謝謝妳的分享。

話說,到了Blogger之後真的有種從頭開始的感覺。

# | ♥ huijung 想說...

@白色飛魚
謝謝提供的資訊!

@電子羊
真的是從頭開始啊,雖然我的模組都是因為想跟pixnet的調調一樣XD

# | ♥ huijung 想說...

回應可以用語法
test test

# | ♥ 想說...

初次見面你好~
你的版面真的很不錯~
我也喜歡簡單~^^

# | ♥ huijung 想說...

謝謝小茶的肯定>///<
搬家的辛苦是值得的
我也會到你家晃晃~

# | ♥ 艾麗 想說...

感謝分享^^

# | ♥ huijung 想說...

不客氣~這些模組是想要延續痞客邦的習慣:D

# | ♥ 艾麗 想說...

再請問一下~
為什麼你的網頁圖示不是一個橘色的B?
而是一朵小花呢? 要怎麼修改成自己的?
謝謝!!

# | ♥ huijung 想說...

打開 html 範本,在 head 之後加上:
link href='http://你的存圖空間/favicon.ico' rel='SHORTCUT ICON'/
以上一行最頭最尾請分別加上「<」和「>」因為google留言不允許 Orz

# | ♥ elecsheep127 想說...

哦哦,話說我很久以前也想自己做個圖示,可是一直想不到要用甚麼當iconXD

話說那個「讓某些原件只顯示在首頁或是單篇文章」那個東西,我曾經試了很久每次都失敗沒成功過超氣餒的,這次終於知道了,因為我都少打了結尾'/b:if' 哈哈哈好笨。

# | ♥ huijung 想說...

favicon 選圖不簡單沒錯:p
在16*16 很容易東西都擠在一起了

b:if是我幫你解答的嗎,哈哈
其實程式碼範本太多,我瞭解的部份是皮毛呀~

# | ♥ Almighty Demiurge 想說...

你的版面風格真是太讓我嫉妒了啦

# | ♥ huijung 想說...

(羞)莫非就是極簡白的魅力
我也很喜歡自己的成果
灰色漸層超好配色!

# | ♥ Anonymous 想說...

謝謝你分享的這些BloggerHacks。
我有個排版上的問題,關於你下面"★按我就可以回應!"這個張貼意見的部分,請問要從哪裡去設定它的位置讓它可以再往右跑些呢 ?!
因為我從很多id和class裡面去修改好像都沒辦法讓這個部分移動,是要展開小裝置範本去裡面做設定嗎 ?! 謝謝。

# | ♥ huijung 想說...

p class='comment-footer'
a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>★ 按我就可以回應!
/a
/p

不知道你是不是要問這個地方?
我沒試過往右跑,不過可以試試用margin/padding看看^^

# | ♥ Anonymous 想說...

成功了耶 !! 大感謝 ^^
謝謝你的分享,若有問題希望能再跟你請教囉 !!

# | ♥ huijung 想說...

!!
很開心你成功和回饋留言喔~
hack問題,我能回答的都盡力幫忙

打造屬於自己的blog樣式真有趣的說

# | ♥ jia wei 想說...

請問 huijung 大大:

如果一般內建 Blogger 版模,但是我想加入版大右邊的 sidebar css hack 樣式,但不知道該如何修改?

由請麻煩大大了。

# | ♥ huijung 想說...

sidebar css hack樣式是指?
像我的整體黑白灰主題和sidebar標題的標籤感覺嗎XD?
在:版面配置/修改 HTML
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 4px;
....這邊自己加語法
}
以上要有CSS基礎以及時間去修改邊框

還是小工具?
在:版面配置/網頁元素

# | ♥ jia wei 想說...

我的表達太差拉 xD

恩,例如版大的右邊 sidebar 的「歡迎^_^ 初訪請閱讀 About」外面那個框框。

我只是想加入外面框框,內建的版模很難看,只是把字體用大寫和粗體......

# | ♥ huijung 想說...

那是假框XD
邊框設底邊和左右邊
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 4px;
border-bottom: 2px solid #aaa;
border-top: 0px solid #bbb;
border-left: 3px solid #ccc;
border-right: 2px solid #ddd;
}
舉例像這樣^^

# | ♥ jia wei 想說...

太感激版大的指導。

對了,我一直想說卻一直忘記說:
您的「不完全。分類,標題折疊模式」這咕地方,真的是很新奇,也很好看哦!

^口^

# | ♥ huijung 想說...

不客氣~^____^謝謝
「不完全。分類」是以工人智慧排版的XD
blogger標籤排序無法調動

常常來玩喔!

# | ♥ jia wei 想說...

恩,看得出來是排的,
與眾不同真的很新奇。

呵呵
我會常來看文章的^_^

# | ♥ Anonymous 想說...

您真是太強悍了...
這篇看得我目瞪口呆呀!!

# | ♥ huijung 想說...

@Yen
>///< 我也是看研究blogger的前輩才摸索出來,沒有很高強~

住在別的BSP的你可能不太了解,所以會覺得很神奇^^

# | ♥ mookio 阿默 想說...

很認真的一篇筆記呢!!

# | ♥ huijung 想說...

@阿默
謝謝唷!這是我的熱門文章、得意筆記之一:P
也很希望給想改造的blogger大家參考~

# | ♥ mookio 阿默 想說...

哈哈,寫這類的文章真的很花時間和心力~
你的部落一定會越來越精采的~!!

# | ♥ huijung 想說...

謝謝你噢,我會繼續努力~

# | ♥ Unknown 想說...

這個筆記太龜毛了XD
支持支持。

# | ♥ huijung 想說...

感謝支持XP 寫出的blog打造筆記能收到共鳴蠻棒的!

# | ♥ jia wei 想說...

噗~你怎麼消失一陣子了 =_=

1. 最新文章及縮圖:讓讀者更明白近期書寫內容! via

這個功能真的很酷!

# | ♥ huijung 想說...

好久不見XD

這功能完全叫有圖有真相阿!

之前較忙,但我一直都有新想法,時機ok就會發新文~不會放棄!也歡迎翻翻我的分類舊文!(之前回味舊作連自己都會有驚喜XD)

# | ♥ Anonymous 想說...

你好,
最近剛接觸blogger,
拜google大神發現到你的blogger,
很喜歡你的"不完全.分類"
不知道是怎麼用的呢???

# | ♥ huijung 想說...

@Winnie

謝謝你喜歡哦:)

這是從pixnet搬來時想沿用的地方
blogger會自行依照文章標籤(分類)字母排序
但我想自己排序相近的分類
所以使用blogger有自訂html功能的邊欄小工具
運用全形空白和特殊線段,最後加上超連結

你可以用網頁軟體或在後台編輯新文章處編輯,再貼上原始碼再小工具裡就可以了!

歡迎常來坐~

# | ♥ Unknown 想說...

妳的小花好漂亮,借來用了,tks~~ ^ ^

# | ♥ huijung 想說...

@WFU
謝謝光臨~^^
很高興你喜歡久遠以前做的小花等待圖
先前翻到這篇整理文章,還想像應該還是有訪客會用到呢!