公告版位

目前分類:Blogger Hack (13)

瀏覽方式: 標題列表 簡短摘要

跟 Blogger 舊範本時代的官方留言系統比起來,新範本的串聯式留言全部由 javascript 產生,讓習慣改 Blogger 範本的使用者難以下手 hack。不過對於熟悉 CSS 的使用者,想把串聯式留言的界面改漂亮一點,倒也不是難事。

本篇為 WFU 的修改紀錄,不一定能含括所有串聯式留言區塊。不過對 CSS 熟悉的讀者,可以參考這篇紀錄的概念,為留言區塊新增功能(留言編號)、或把版面改成心目中滿意的樣式。

Wayne Fu 發表在 痞客邦 PIXNET 留言(7) 人氣()


(Pic from: Lois Lin FB)
前幾天「蘋果報導」了一位美少女部落客,在文章安插「台灣是主權獨立的國家」字串,讓盜文者貼到大陸網站而渾然不覺,為何她能成功呢?

因為她把字串埋在標籤,而一般讀者看完本文後,通常不會注意標籤的字串,最後 copy & paste 就把標籤也一併複製了。

+跪婦阿冠 bigsishead 在這個「Blogger中文社群討論串」詢問 "blogger平台該怎麼設tag或埋連結比較能被一起盜過去?",WFU 想到兩種方式可以運用,以下說明原理及操作實例。

Wayne Fu 發表在 痞客邦 PIXNET 留言(7) 人氣()

在這個「Blogger社群討論串」討論的主題為 "Blogger 較新的文章與較舊的文章之連結",也就是 "上一篇/下一篇文章" 的功能(不是指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能)。在文章頁面時,這兩個 Blogger 在頁面下方所設計的按鈕,說實在一直以來認為是個滿雞肋的擺設。試想,時間有限的情況下訪客多半是性急的,豈能奢望訪客有閒情逸致像玩刮刮樂般,來點點看「較新的文章/較舊的文章」會出現什麼寶藏?



或許在十年前部落格剛興起的時候,網站數量還不多,在當時的時空背景,訪客的確有可能如此逛網站。但在資訊爆炸的今天,沒有先把牛肉搬出來,是不會有人買單的。想讓訪客點擊「較新的文章/較舊的文章」,唯有先把文章標題秀出來,這才是一個正確的網頁設計


<< 請注意!本篇文章含會員限定內容 >>



不過在 Blogger 要做到這件事不太容易,以下大致先說明一下原理,想直接安裝「改造較新/較舊文章按鈕」,請直接跳「二、安裝程式碼」,安裝完的效果大致像下圖這樣──

Wayne Fu 發表在 痞客邦 PIXNET 留言(18) 人氣()

在這個「Blogger社群討論串」有成員詢問 "如何令 blogger 標題圖片隨機出現 ?",除了當時沒有閒暇研究 js 如何寫,另外就是直覺認為此功能或許使用率不高。



後來想想某些性質的網站,例如攝影、美食、旅遊、遊戲(模擬市民 ths sims),也許站長會想把作品製作成橫幅圖片,能隨機出現在標頭的位置,讓常客每次來逛的時候都有新鮮感。

如此看來這個功能還是有一定的實用性,而且這個程式算是最簡單的等級,因此就稍微研究一下怎麼實現。想先看效果,可先參考這個 DEMO 網頁:

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(14) 人氣()

常可在一些知名的網站看到,在網站名稱(標頭)的上方放置了一排導覽列,在網站名稱的下方也有另一排導覽列。一方面可能是網站的主題很多,一方面也可將主要與次要的導覽項目區隔開來。



不過 Blogger 預設只能安裝一個導覽列,如果想要在部落格顯示兩個導覽列的效果,請參考本文以下的說明。想先看效果請點下面 WFU BLOG 分站「三國志11」的連結:

 

Wayne Fu 發表在 痞客邦 PIXNET 留言(13) 人氣()

這個問題看起來不像是個問題,只要重複安裝兩次不就好了?其實官方提供的小工具中,有某些只准安裝一次,因而這些「獨一無二」的小工具,無法在部落格上重複出現。



本文除了介紹如何重複安裝這些「獨一無二」的小工具,也探究一下有哪些合適的應用情境。

Wayne Fu 發表在 痞客邦 PIXNET 留言(0) 人氣()

對於從搜尋引擎而來的訪客,首次拜訪對於作者總是不太瞭解,在不熟悉的情況下看完文章很容易直接離開。如果自認經歷能夠引起陌生訪客的注目,那麼文末放個作者簡介會是個留住讀者的好主意。


(Pic from: iconfinder.com)


感謝 +Almighty Demiurge 於這個「Blogger社群討論串」 提到 "今天發現在版面配置的網誌文章編輯區塊裡有增加「在文章下方顯示作者簡介」的選項",不過對很多人來說,這可能是個「看得到吃不到」的功能。

如果也有同樣問題的話,以下先說明原理及簡易修復方法,若想直接瞭解安裝方法及進階修改,請跳至「三、安裝步驟」。

Wayne Fu 發表在 痞客邦 PIXNET 留言(2) 人氣()

Blogger 預設的留言頭像為正方形,有沒有發現「Google+」使用的頭像為圓形?由於 Blogger 預設的頭像尺寸很小,如果想將原本的正方形直接改為圓形,頭像會顯得太小。


(Pic from: freepik.com)


所以得先將 Blogger 頭像的長、寬都加大,再改成圓形,版面才比較美觀。本文將詳細說明如何修改頭像圖案的 CSS 語法參數,來達到需要的效果。

Wayne Fu 發表在 痞客邦 PIXNET 留言(9) 人氣()

Blogger 最近推出顯示 G+ 追蹤者的小工具,有人的反應是與 Google Freind Connect 的性質重疊,而 G+ 專頁也會顯示追蹤者頭像,如果再加上這個小工具,那版面真是好不熱鬧。



目前我暫時在網頁上只擺這個 G+ 追蹤者的小工具,可以裝作看起來很有人氣的樣子(XD);但是才剛裝上後便發現他會超出邊界,弄了一陣才瞭解到可能因為本站並非使用新範本,blogger 已經懶得測試這些老用戶的環境,如果是裝在新範本就不會有這個 bug 了。

而這陣子逛到不只一個部落格把這個小工具放在頁面底部,可能是發現放在側邊欄會超出邊界,所以才將位置挪到底部吧!或許會跟這個小工具不合的部落格,還是有一定的數量,若有以上情形的話,可參考以下我的修改方式──

Wayne Fu 發表在 痞客邦 PIXNET 留言(0) 人氣()

之前在「+Shu-Yuan Tien ── Office Worker」看到標籤出現在導覽列覺得挺神奇的,研究了一陣後發現可以在後台先把導覽列用滑鼠拖曳到網頁最上方,接著再把「標籤」小工具拖曳到導覽列,那麼網站所有的標籤就會自動出現在導覽列,不必像以前導覽列的使用方式,得一個個手動把標籤連結加上去。


(Pic from: Office Worker)


這給了我一個靈感,如果把「標籤」拉到導覽列,而側邊欄其他工具拉到最底下,那麼整個版面可以全部留給文章,閱讀起來實在太舒服了,而且所有重要的導覽功能仍在網頁上方,訪客不會找不到想要的功能,就像我的「三國志分站」這樣的效果。

只不過在實作時遇上了一些要解決的狀況:

1. 分站使用的官方範本為「圖片視窗」,導覽列的頁籤有圓角效果,當導覽列拉到網頁最上方時,頁籤變成飄浮在空中的感覺(囧~)。
2. 標籤拉到導覽列,按下標籤時,該標籤會顯示不正常。

最後花了一番功夫解決,以下第一點為大致說明 Blogger 運作的原理,想直接看安裝及解決過程的實作請跳「二、調整導覽列」。

Wayne Fu 發表在 痞客邦 PIXNET 留言(8) 人氣()

Abin 大發表的「標籤/搜尋頁面只列出標題」非常實用,過去曾使用過一段時間,但最後還是將此功能下架。原因無他,雖然自己使用時找資料快速,但畢竟部落格不是只有自己在用,訪客很需要看文摘來判斷文章是否值得閱讀,標題模式對訪客而言不是個友善介面。再加上現在每篇文章都花費了心力製作主題意象圖,如果訪客在「標籤/搜尋頁面」看不到圖片,那豈不可惜?


(Pic from: iconfinder.com)


最近在想,有沒有兩全起美的方法,讓我自己可以只看到標題,但訪客能看到完整的圖文簡介,而熟客若只想查資料時,也可自由選擇切換到標題模式?實作了一下發現這不是很容易的任務,最後是使用變通的方法解決,想瞭解原理請看「一、原理及 Blogger 語法」,對程式碼不熟可直接跳「二、安裝程式碼」。

Wayne Fu 發表在 痞客邦 PIXNET 留言(33) 人氣()


(Pic from: psdgraphics.com)
過去在「Blogger 小技巧」曾整理了一些公佈欄的筆記,以備實作時參考之用。一般而言,在 Blogger 要找到一個區塊能長期置頂實現公告的功效,大致有以下這幾個作法:

A. 放在導覽列上方
B. 放在文章區塊上方
C. 放在側邊欄頂端
D. 發一篇未來文章長期置頂

其中 A~C 的作法很簡單,在後台新增 HTML/Javascript 小工具,再拖曳到 A~C 的位置即可。而 D 的作法需要用到一點小技巧,因為如果開一篇新文章後選擇未來的日期發佈,那麼這篇文章會列入排程,等到日期到了才會出現在部落格,自然就無法長期置頂。

正確的作法為開一篇新文章後立即儲存發佈,接著再重新編輯這篇文章 → 文章設定 → 發佈日期 → 設定日期及時間 → 改為未來的日期 → 完成 → 更新。回到首頁之後,如下圖,就可以看到這篇到 2100 年之前都會置頂的文章了:

Wayne Fu 發表在 痞客邦 PIXNET 留言(21) 人氣()

撰寫 Blogger 的「留言欄訊息」(就是留言欄上方的張貼意見)時,長期以來一直有幾個困擾:


(Pic from: designdownloader.com,solarxsarasota.com)


1. 只有少數幾個 HTML 標籤可使用(例如 <a>、<b>、<i>)。
2. <a> 標籤無法使用 target="_blank" 屬性。
3. 訪客不太會注意這些內容。

關於第 3 點,如果字很少一點的話或許訪客會瞄一眼;只要字一多、看到密密麻麻的一片,相信沒幾個人會去細讀。

Wayne Fu 發表在 痞客邦 PIXNET 留言(6) 人氣()

找更多相關文章與討論