改造

以後blogger的改造就集中放這裡好了...雖然說應該是不會再大改了...


2013/05/07

• add evernote button

Evernoteにブログ記事をクリップするボタンを設置


2012/09/22

• 最新回覆．改

因為blogger沒有推出官方版的最新回覆，所以長久以來都是網路上的高手自行撰寫hack來造福大家。較常見的版本有Abin版、LVCHEN版以及蠻後面才出來的BloggerBust版，而個人偏好簡潔的Abin版。然而在某次blogger的更新之後A版的就變得無法正常運作，另外兩個雖然不會有這個問題(LVCHEN版在3.1修正了這個問題)，但是L版的個人覺得有點繁雜，而B版的無法看舊的留言所以根本就不考慮。

然後日子一天天過去......在原作者一直沒有更新的情況下，只好自己動手改了(炸。

A版出現的問題是：有留言者自刪留言後，該hack就會無法顯示回覆。因為更新後，留言者自刪留言也只會移除留言內容而不是移除整個留言(為什麼不刪乾淨一點~"~)，如此一來，hack就會視留言存在而去抓留言內容，然而留言內容已經刪除，去抓又抓不到，就當在那邊了。

最簡單的解法就是格主進控制後台「完全」刪除那些沒刪乾淨的留言，可是每次都要這樣搞實在很煩，還是從程式碼下手比較根本一點。

抓了回傳的資料一看，留言者自刪留言後，除了留言內容為空，連回該留言的連結網址也沒了。所以我多加了一個判斷，如果留言內容為空，就顯示「作者已經移除這則留言。」，然後連結連回該篇文章的留言處；反之則照常。

然後，我還參考了WFU：Blogger 最新回應＋留言者各種身份頭像加了留言者頭像，嗯......老實說，有點微妙...先用一陣子看看XD

程式碼在此。紅色是我修改的部份，藍色是參考WFU的程式碼所加上的部份。

希望blogger後台關於回覆的部分不會再有什麼變動了，不然可能又會當掉XDrz


2012/02/03

• Threaded Comment

1. blogger修正了留言行距過密跟按繼續閱讀後直接跳到留言區的問題。
2. 強調作者留言
   改成 threaded comment之後，作者的名字旁邊會多出一個小圖示來以示區別：
   
   有改過template的話，好像會無法顯示；如果想讓這個圖示顯示的話，在/* Widgets ----------------------------------------------- */之前加上這段即可：
   /* Comments
   ----------------------------------------------- */
   .comments .comments-content .icon.blog-author {
     background-repeat: no-repeat;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
   }
   
   老實說，這圖示很不明顯...如果要像以前一樣用背景色做區分的話，可以參考Southern Speaker v3.0: Highlight Author Comments in Blogger's New Threaded Comment System (之前的方法無法在threaded comment下運作)。這個方法也會對之前的作者留言起作用。
3. 留言的日期格式、時區不符合後台設定 (blogger已修正)
    ......算了，不管他。

2011/10/20

• Go to Top & Go to Bottom

0 與 1 謎詭世界：新增一個回到上方的按鈕(Go To Top)
Twolegers' Chobots Blog: How to make a Go to Bottom button
差別在於go to bottom要自己做一個標記。

• Page Navi：Beautiful New Page Navi For Blogger With Scroll

blogger的換頁功能一直都很陽春，只有 較新的文章／首頁／較舊的文章，雖然個人覺得頁碼條並非絕對必要的功能(要找特定文章用標籤和搜尋還比較快)，不過這個可以捲動(scroll)的頁碼條看起來還挺好玩的，所以就來試試。

1. 個人嘗試的結果，要讓頁碼條顯示，"網誌讀者"必須開放給"任何人"，且"允許網誌資訊提供"不得為"無"；不然頁碼條會無法顯示。  
2. 要使用這個hack，每一頁的顯示的文章數必須是固定的，而且hack的設定要跟管理後台的設定一致，大於管理後台的設定，有些文章就會被鬼隱；反之，有些文章就會重覆出現。但是自從blogger開始使用自動分頁(auto pagination)這功能之後，如果不是使用官方內建的繼續閱讀(jump break)的話，每頁的文章數會視資料量被server端(?)自動決定而搞得版面亂七八糟的，也會讓這hack運作不正常。所以只好下定決心，一篇篇手動改成官方內建的......○＜＼＿
3. 用了這hack之後，會讓火狐上一頁／下一頁的按鈕(手勢)失效(在使用頁碼換頁的時候)，此外，頁碼的超連結也沒辦法在新分頁開啟。

 雖然第三點有點小缺陷，不過應該是沒什麼大礙...先用一陣子看看：p


2011/06/11

• 繼續閱讀(建議後來才使用blogger的人直接用官方內建的就好)

說到這個繼續閱讀就...說來話長(炸

這個最基本的功能之一，blogger一直到很後面才推出官方版本，雖然說很早的時候在blogger的問答版上就有人(google的工程師？)提供了最初期的版本，以及後來的羊男改良版；但這版本有一個問題就是：不管有沒有縮文，都一定會出現「繼續閱讀」的字眼。雖然說網誌寫長一點再縮起來也就沒什麼太大的困擾，但如果要使用分頁網頁的話，這四個字消不掉又沒有縮文的功用，就有點礙眼。

有位老兄想了個辦法來解決這問題(Coder's Talk: How to create expandable post summaries in Blogger)，他的方法是多加一個more的tag，藉由判斷有沒有這個tag來決定要不要顯示「繼續閱讀」這四個字，這方法算是解決了問題，不過這樣一來有縮文的文章都一定會有一個more的tag，看了也還是有點討厭..

我結合了以上兩人的寫法，把「繼續閱讀」那段的code改成這樣：

然後為了消掉more這個tag，我去修改顯示tag的code，多加了一個判斷，如果這個tag是more就不要顯示：

這樣一來，這個一直不太完美的hack就算大功告成了.......................嗯？怎麼有股花很大的力氣做一件徒勞之事的感覺 Orz

• 增加pagelist(分頁列)

不太喜歡這個template原本的pagelist，所以就去改了一下參數，把它改成現在這個樣子。要改的參數(含版面)有：
tabs.font
tabs.text.color
tabs.selected.text.color
tabs.background.color
tabs.selected.background.color
tabs.separator.color
region.shadow.offset
footer.border.radius.top
tabs.background.gradient
tab.selected.background
tab.background
tab.border.radius
tabs.border.radius
tabs.spacing
tabs.margin.sides
main.background
main.padding.sides

.Header img, .Header #header-inner {
  -moz-border-radius: $(header.border.radius.top) $(header.border.radius.top) $(header.border.radius.bottom) $(header.border.radius.bottom);
  -webkit-border-top-left-radius: $(header.border.radius.top);
  -webkit-border-top-right-radius: $(header.border.radius.top);
  -webkit-border-bottom-left-radius: $(header.border.radius.bottom);
  -webkit-border-bottom-right-radius: $(header.border.radius.bottom);
  -goog-ms-border-radius: $(header.border.radius.top) $(header.border.radius.top) $(header.border.radius.bottom) $(header.border.radius.bottom);
  border-radius: $(header.border.radius.top) $(header.border.radius.top) $(header.border.radius.bottom) $(header.border.radius.bottom);
}

move pagelist position
.tabs-inner{
margin-top: -30px;
}

加入
header.border.radius.top
header.border.radius.bottom

----------------
之前的記錄

• Blogger改造2

• Blogger改造