【推薦】Blogger改造教學



*圖與文完全沒有任何關係。

我發現玩Blogger改造實在會上癮……最近又找了幾個教學小改了一下版面,然後又順便逛到幾個有點想試試,但目前我還沒用到的教學,基於尊重原作者出處的精神(?),所以一併盜連整理在這邊,想玩的人可以試試。(雖然我覺得都是我自己一個人在這邊改得很高興……)

順帶一提,本篇與之前整理的那篇Blogger簡易上手懶人包系列不太一樣的是,這裡找的是一些比較進階一點的功能設置,也就是說,其實加跟不加都沒什麼差這樣,只是我覺得加上來會比較方便一點,至於要不要加就看各人啦~

【加入Blogger預設的「最新回應」功能】
Hajara's Blog:[Blogger]回應

剛開始用Blogger的時候,一定會覺得Blogger的後台居然沒「最新回應」功能這點很靠北,但是其實Blogger是有這個功能可以放的,只是它的元件名稱翻譯得很謎,所以很難看得出它其實就是「最新回應」的元件……

首先到後台的「網頁元素」介面,在邊欄加入新的元件,在元件列表中會看到一個叫做「資訊提供」的東西,這個東西其實就是Blogger的「最新回應」功能,點下「加入」,然後輸入http://你的部落格帳號.blogspot.com/feeds/comments/default,就OK啦~簡單到靠北啊~不過比較可惜的是,Blogger的這個功能最多只能顯示五篇最新回應,而且它抓資訊的速度不是很快,也就是說,當你留完言後,並不會即時顯示在這個最新回應的列表裡,而是可能隔個半天或一天才會看到,這是我覺得比較BG的地方,所以如果不喜歡這個預設功能的話,就只好去網路上找人家寫的外掛回來放了。

【調整Blogger的回應字樣】
Abin's Tech Note:調整 Post footer 的回應連結

其實本來沒有特別要改這個的,不過因為在別地方看到似乎很多人不知道在Blogger要怎麼留言,然後Blogger預設的回應連結字樣「張貼意見」這個翻譯又太奇怪,所以就想說來改一下這部份好了,之後找到的相關教學就是上面那個,但是這個語法其實又比較專屬於該版的樣子,也就是說,這個教學只是板主將他個人板上的用法寫出來分享,並不完全適用於我的情況,因為我只是想把「張貼意見」這個詞改掉而已,並沒有打算完全照他的改法弄,怕說到時改一改整組壞掉,自己又改不回來,所幸在該文底下的留言中我找到了改法,所以直接記在這邊:

到後台的「修改HTML」介面中,勾選「展開小裝置範本」,然後找到<data:postcommentmsg>這條語法,把它整段取代成你想改的字樣就好了,但要注意的是,必須將樣板中全部的<data:postcommentmsg>都改掉,不然到時版面上就會鬼打牆出現兩個回應連結。

當然該篇教學的板主也說了,這種改法有它的風險,就是如果你哪天想換樣板,或是想更換部落格語系時,像這樣直接將一段語法取代成中文的作法,可能會在這樣的轉換中發生問題,但我懷疑的是,都已經辛辛苦苦把一個樣板改成自己想要的樣子了,誰還會去動它的基本盤把它再從頭改一次啊?至少我是很滿意我現在用的這個樣板啦,而且也沒換樣板的打算(更別說改語系),所以就直接改成中文沒差哩~(揍)

而在這個部份,我把原先的「張貼意見」──也就是樣板中的<data:postcommentmsg>改為應該比較親切點(?)的「給個回應」,當然文章部份原本預設的那個「X 意見」也要改一下,這個部份就超簡單了,到後台的「網頁元素」中,編輯內文區塊的部份,把原先寫著「意見」的欄位改成「回應」就OK啦~~

另外,雖然已經把「張貼意見」這個很奇怪的翻譯改成「給個回應」了(其實你高興的話,也可以改成「有本奏來無事退朝」之類的),但是因為我覺得它看起來還是有點不夠明顯,所以就在旁邊加了隻小鴨鴨(巴),這部份也是一樣很簡單,到後台的「修改HTML」中,勾選「展開小裝置範本」,找到你剛剛改的字樣,在它旁邊貼上貼圖語法<img src="圖片網址">,至於圖片素材跟貼圖空間就自己找吧,本台服務沒有作到這個程度。(巴)

【在文章中加入「相關文章」功能】
Abin's Tech Note:加入相關文章功能 (Related Post)

之前在用PIXNET的時候,有個功能可以顯示同分類下的前一篇與後一篇文章,搬來Blogger後,就想找看看有沒有方法可以作到類似這樣,這裡我用的是上面這篇教學,基本上就是到後台→修改HTML→展開小裝置範本,然後照他教法複製貼上就可以了。(如果怕自己貼錯或改錯,可以先將樣板下載一份下來備份,改壞了再上傳上去即可)

不過貼完後,通常你會發現你的相關文章標題「Related Posts」跟標籤列黏在一起,不要擔心,該文底下的回應有教解決方法,在樣板程式碼中找到document.write('Related Posts: <ul>');,然後在Related Posts前面加個<br/>,就可以順利分行了~另外,Related Posts這行也可以任意改成你喜歡的詞,如「相關文章」或「同分類閱讀」等等。

只是有一點點美中不足的是,因為這個相關文章的做法原理是亂數抓取同分類標籤下的文章,所以不像PIXNET那樣會固定顯示前一篇與後一篇,而是亂數顯示的,所以不一定會照順序顯示出相關文,在這個部份,唯一的解決方法就是設定多顯示幾篇文章,不過顯示太多篇會拖慢開網頁的速度,所以這部份就見仁見智了。

【標示板主回應與訪客回應字樣的不同】
Abin's Tech Note:作者和一般回應的標示區別 (Author comment highlighting)

是說,Blogger沒有板主回覆的功能,不過其實沒板主回覆的部落格平台也很多,所以本來想說沒有也就算了,不過最近剛好逛到這個部落格,看到他有弄出板主回覆跟訪客回應字樣的區別,雖然跟PIXNET或天空那種可以讓板主個別回覆每篇留言的方法還是不同,但至少是一個比較方便區分的功能,因為不知道為什麼,Blogger的回應看起來就是比較亂,感覺不太容易分辨出板主與一般訪客的區別。(自己的板是還好,到別人的板上除非記得板主的帳號,否則看起來實在很混亂)

但這個用法還是有個BUG,就是如果有人使用的留言暱稱或ID跟板主一樣,那一樣可以「偽裝成」板主的回應,因為這個改法沒有辦法做更嚴謹的判別,不過反正我家的回應都是審核制,有人來冒充大不了我把他留言殺掉就好了,所以這方面就沒問題啦~

【色碼選擇器】
英文色碼表

另外,改板主回應字體顏色的這一塊,可以參考上面這個色碼表來更改,將color: #f00;改成你喜歡的顏色即可,#f00這個東西就是顏色,可以依各種顏色的色碼更改,或者直接將它改成該顏色的英文字也可以。

【讓「較舊的文章」介面及「標籤分類」介面中只顯示文章標題】
Chagg's 嘴砲日記:Blogger Beta讓Lable及Archive頁面只顯示標題

以前在用無名或PIXNET的時候,有個覺得還不錯的功能就是可以讓文章只顯示「標題列表」,而不用整串都是「標題+摘要」落落長,無名我記得是只要點選到「分類」的介面中,就直接只顯示標題列表,不會出現摘要,而PIXNET則是先顯示「標題+摘要」,但可以切換成「只顯示標題列表」,所以來到Blogger後,當然也要找看看有沒有人寫出這種方便功能可以加,找了幾篇類似的教學後,覺得改起來最簡單的就是這篇,所以就用了這篇的方法,一樣是到後台→修改HTML→勾選「展開小裝置範本」,然後照他寫的複製貼上就搞定收工~現在只要點標籤分類,出來的介面就是只有標題的文章列表啦~整個就是清爽啊~~

【隨機顯示版頭圖片】
想要旅行的念頭停不住...:【Blog】隨機更換圖片

這篇其實是亂逛看到的(巴),本來是想找如何讓首頁的部落格標題也有連結(其實可以直接在標題的地方寫語法,可是這樣就連部落格標題一起改了)──雖然說穿了,有沒有這功能是沒什麼差,反正單篇文章中一樣可以點部落格標題到首頁,只是以前用的部落格平台一向在首頁的標題都有連結,一下子沒有了,感覺不太習慣,結果找一找,就看到這個好像更有趣的作法,可以放好幾張不同的圖在版頭隨機顯示,不過目前我沒有用這個語法,想說哪天再來玩看看好了。

【更改內文字體大小而不更動到邊欄字體】
我與小崴崴的工作日記:[教學] Blogger 字距與行距調整

在Blogger的後台中,有基本的:字體、顏色與大小的更改介面,但是卻沒有單只改內文區塊字體大小的項目,如果你想讓內文字體放大一點,就勢必會連整個網頁的字體都一起放大,這個部份之前就滿想改了,只是到現在才找到改法,也就是上面這篇教學,到「修改HTML」介面,勾選「展開小裝置範本」後,找到開頭標示為.post的項目,然後在中間塞入這條語法font-size: 115%;,我是把它擺成這樣:



反白部份就是多加進去的語法,因為我覺得115%有點太大字,所以就把數字改成108%。

此外,雖然上面那篇說可以加入三條語法(字體大小、間距與行距),但我全部加進去後,發現若用IE來看的話,所有的行距都會變得一樣,也就是說,原本如果有空一行分段的話,那行就不見了,所以其實只要放字體大小的這一條上去就好了,行距跟間距沒什麼加的必要。

【折疊邊欄選單】
白花花:[分享] 折疊blogger側邊選單的作法

是說,因為之前用的「最新文章列表」與「最新回應」都是屬於JavaScript語法,雖然列表好看是好看,但網頁開起來實在太容易LAG了,所以就又改回Blogger預設的最新文章列表(網誌存檔),不過Blogger的最新文章顯示方式,其實比較像是「每月存檔」,只是它可以顯示文章標題而已,所以顯示起來就整個落落長,看了很礙眼,因此就去找了這個可以折疊邊欄選單的方法,要看近期文章或回應就點一下旁邊的那個【開/關】,不想看就再點一次把它收起來這樣,之所以用這個方法,主要是因為我不想讓部落格開起來太LAG,如果本身不是很在意這點的話,就用不用都無所謂囉。

【將連結列表改為下拉式選單】
leven en laten leven:外行人教學: 下拉式選單 x 2
白花花:[分享] 將Blogger的文章標籤(Label)與連結清單(Link List)變成下拉式選單

這邊找到兩個教學方法,我目前用的是第一個做法,不過不知為啥看上去排列不大整齊,所以這個部份還在研究中,是說,第一個做法麻煩的地方在於,必須一個一個把連結重新貼上去,沒辦法直接把連結列表改成下拉式,而第二個做法,則是可以直接將Blogger的連結列表改成下拉式選單,不需要重新一個一個貼。

不過,第一個做法算是各種部落格平台都適用,但第二個就比較只專屬於Blogger的使用者,所以就端看個人需求而定啦~

以上,就是個人拿來改造本站的各篇神人教學文,整理在這邊算是備忘,也是註明一下原出處,都是個人覺得滿推薦的教學,要用的話可以參考看看,至於其他還有什麼想找的麻煩就問孤狗吧。(喂)

留言

  1. http://www.vietwebguide.com/2008/06/cch-to-cc-bi-lin-quan-chuyn-nghip-dng.html
    翻譯:
    http://share4vnn.blogspot.com/2009/06/blog-hack-related-posts-in-advanced.html

    這語法好像可以依序(不是亂數)顯視同分類「前」幾篇,可惜沒有「後」幾篇。原越南文好像有提到某些越南字tag會認不出來。

    奇怪的是,這語法套用在我blog上並不成功(我的tag都是英文)。不知你有沒有興趣試試這語法。

    by 很久以前留過言誇你美麗的查理、然後記得你說過有同分類code要記得與你分享的 MKnight

    回覆刪除
  2. 喔喔感謝分享!

    可是我好懶(被拖去掄牆)
    那……看其他人有沒有要用好了(爆)

    回覆刪除
  3. 親愛的冥王星懶爵(怎麼有一整個糟糕的感覺XD):
    不好意思,我試出來了。之前失敗是因為我給錯網址了,正確更新版在這:
    http://www.vietwebguide.com/2009/07/tien-ich-cac-bai-lien-quan-20.html
    語法俐落,一試即成。

    偷偷造訪您的鼻血主站(我用Mac Safari與FireFox),但框架被一個謎圖騰擋住,眾連結失效無法點選:
    http://img199.imageshack.us/img199/3963/picture1qxz.png
    善意提醒(羞怯),望您莫見怪。

    回覆刪除
  4. 什麼!我又被改名了!=D=(驚恐)

    我點進去他說偵測到惡意程式也!(大驚)

    主站那個我之前也有發現,那個圖騰好像是他官方自己多餘加上去的東西,
    我也不知道要怎麼對付他(死)

    只能把最上面的連結列下拉按掉那個「閉じる」這樣……
    連結沒有失效,只是亂碼而已,把編碼改成繁中應該就可以了=w=

    是說FC2因為是日本的空間……真的很愛亂碼=__=
    看來我又要去尋找備份空間了(死)

    回覆刪除
  5. 我用Mac,毫無反應……真不好意思。不過McAFee好像說它沒問題:

    http://www.siteadvisor.com/sites/vietwebguide.com

    (希望這個沒有惡意程式orz)

    我剛剛突然發現冥王星已經被踢出九大行星之列了~可憐的矮行星懶爵大人!

    回覆刪除
  6. 不要!你一定是姑異底!我柴不咬相信逆哩!(錯字有夠多)

    而且你也LAG太久!我取這個名字的時候他就已經是矮行星哩!(指指點點)

    回覆刪除

張貼留言

★ Blogger有時會誤把真人留言當成廣告擋掉,過很久我才會發現有留言,建議登入再留言比較不會被擋(つд⊂)

★ 因為Blogger擋太兇,所以現在設成只有兩週前的文章才會審核留言,新文章沒有審核制,先試營運一陣子看看,歡淫大家留言~ヽ(゚∀。)ノ

隨機文章(踩雷區)

熱門文章