website widget
post | sidebar | footer

[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學

分享
0 意見
引用來源: 繼續閱讀懶人加強版

安裝前注意事項:
1.若有先前有安裝其他版本(阿土伯版本、本站的1.x版本)的繼續閱讀,請先完整移除後,再安裝
2.若你的模板本身有附繼續閱讀功能(ex:羊男的三欄式),可能會有衝突,請先想辦法移除,或是換其他模板....
3.某些特殊的模板(如:Blogcrowds的模板),因為模板結構和blogger預設的不相同,所以無法支援(安裝了也沒作用),請換其他模板之後,再安裝。


安裝步驟:
1.到Blogger的控制(後台)頁面
2.「版面配置」->「網頁元素」
3.按下「新增小工具」,出現可用的小工具清單
4.找一個名稱為「 HTML/JavaScript」,按下滑鼠左鍵,會進入設定的頁面
5.「標題」欄位,請填入 ##EasyReadMore##
6.「內容」部份,請複製以下程式碼填入



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.2.1.js" type="text/javascript"></script>
<script>
EasyReadMoreSettings.Enabled = true;
EasyReadMoreSettings.Read_More_Mode = 'mix';
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##ReadMore##';
EasyReadMoreSettings.Link_Style = 'directlink';
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';
EasyReadMoreSettings.Collapse_MoveToEnd = false;
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'title';
EasyReadMoreSettings.Collapse_Effect = 'none';
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
EasyReadMoreSettings.Index_Page_Style = 'abstract';
EasyReadMoreSettings.Tag_Page_Style = 'title';
EasyReadMoreSettings.Archive_Page_Style = 'title';
EasyReadMoreSettings.Controller_Enabled = true;
EasyReadMoreSettings.Controller_Default_Position = true;
EasyReadMoreSettings.Controller_Splitter = ' | ';
EasyReadMoreSettings.Controller_Full_Text = '完整';
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
EasyReadMoreSettings.Controller_Title_Text = '標題';
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
</script>
<script>EasyReadMore.main()</script>

在Blogger文章中插入程式碼

分享
1 意見
HTML Encoder網站

請到「HTML Encoder」這個網頁將你的程式碼貼上,按下〔Encode〕按鈕,就可以在下方看到已經將你的「<」和「>」都轉好了,複製起來就可以用了。

修改Blogger CSS


用Blogger/Blogspot的好處就是所有原始程式是公開的,只要你會改就沒有什麼太大的限制。接下來在你的Blogger後台選擇〔版面配置〕→〔修改HTML〕→勾選〔展開小裝置範本〕,插入這一段CSS程式碼:



.post pre {
background: #F0F0F0 url(http://你的圖片網址/blogger-code.gif) repeat-y scroll left top;
border: 1px solid #CCCCCC;
color: #333333;
display: block;
font-family: Courier New;
font-size: 10pt;
line-height: 120%;
margin: 5px 0 0 20px;
max-height: 200px;
overflow: auto;
padding: 10px 10px 10px 21px;
width: 90%;
}

請記得將「圖片網址」改成你自己上傳的圖片網址,還有這段程式碼我是放在「.post-body」的前面,你也不一定要放在這裡,但是相關的放在一起會比較好找,好了之後〔儲存範本〕就一切OK了。
發文

這樣子你以後要插入程式碼只要用包住即可

[測試文]Blogger hack: AJAX LOADING 動態文章

分享
0 意見
引用來源 :不連續x思考斷x面解構: Blogger hack: AJAX LOADING 動態文章

熱衷於blogger的人多半都帶有DIY改造的偏執,得了不把blog弄的很華麗就會死的病。畢竟這是自由度最高的BSP,不大改特改實在是對不起辜狗大神提供的免費午餐。這一路走來,從一開始看到什麼酷炫功能就胡亂加上,到後來越來越講究所謂的《讀者體驗》。我的改造之道漸漸趨向【不加不必要的東西】、【盡可能使用原生功能】,畢竟內容才是一個部落格的主軸,把邊欄妝點的花花綠綠實在有些譁眾取寵。

在NS近期的改造之道上,有幾個重點:就是追求載入極速、內容動態化、盡可能的強化讀者搜尋與閱讀的便利性。今天要教各位的這個小技巧,就是能把Blogger原生標籤與下方的Pager發揮淋漓盡致的動態載入功能。

如果有在碰blogger Hack的人一定有聽說過Hackosphere的Neo Template,這個可說是動態文章概念的始祖,它是透過讀取JSON的方式再用Javascript把內文格式給產生出來,誠如作者所說,這個模版超快、非常快、閃電霹靂快...



但是缺點也很明顯,作者捨棄了原有的部落格格式,透過JSON讀取所產生出來的內容會不完整(例如回應部份、還有後來blogger加入的評分、讀者觀感等新功能),再者全部透過Client端JS來作用,那麼只要碰到關閉JS的讀者,那整個blog就死掉了,因為種種原因而讓我覺得不是一個理想的呈現方式。

這當中NS也有試過hans的Table of content,還有Lvchen兄的標籤選台器2.0改造版,想讓讀者可以先快速瀏覽標題再決定要不要點選閱讀,不過成效普普通通,我想最主要是因為光看標題遠不如看文章摘要來的有吸引力。

這陣子因為blogger發佈了官方版的繼續閱讀功能,可以大幅縮減摘要文章的內容(以往的繼續閱讀只是用CSS把其他部份給隱藏,所以實際上在載入的時候還是會讀取這些html碼。官方版的則是直接在server端就把非摘要部份全部砍掉,Request回來的檔案會變清爽很多);加上我最近裝的Lazyload功能可以大幅提升含大量圖片的網頁讀取速度;再加上我最近認真的玩了一些Jquery,有種任督二脈被打通的感覺(笑)

因此我腦中靈光一現,為什麼不用AJAX了方式來Load remote page,再把現有的某區塊給更新就好呢?這樣我也不用煩惱什麼JSON解析完還要重新Render頁面的鳥事啦。

嘖~講到這大概大家要一頭霧水了,各位不妨直接體驗一下吧。

01.jpg
首先可以試試內文標籤的部份,點下之後...

02.jpg
文章不見了,出現了loading的圖示...

03.jpg
ㄟ~原本點標籤會出現的頁面怎麼出現了?!而且網頁並沒有reload的閃動,只有在主欄位這邊有變動而已。


人客阿!這就是AJAX阿!AJAX不是只有搞CSS特效而已,非同步Request跟動態更新才是箇中精髓。

04.jpg
同樣的,最底下的PAGER部份也可以完美的做到動態換頁的效果,如此一來讀者就可以快速的瀏覽整個blog的文章摘要,或者是特定標籤的文章摘要了。

05.jpg
當然~標籤Widget也可以加上這樣的動態效果,附帶一題,blogger這邊已經有了原生的標籤雲了,而且還多了【選擇欲顯示標籤】的功能,NS強烈建議原本用第三方hack的人換回正版標籤雲阿 :P

拉拉雜雜說了一堆,大家一定迫不及待想知道這個hack是怎麼做的!

06.jpg
其實原理非常簡單,如果你仔細觀察的話就會發現點選標籤會到達的頁面,跟點選pager切換的頁面,有影響到的都只有主欄位這個區塊,而呼叫這些頁面跟PHP加上一些參數值去控制頁面的內容的方法有點相似。所以,我們可以利用Jquery的.load()功能,丟進特定URL,抓取該頁面特定名稱的區塊,再載入現有的區塊內,即可達到動態載入內容的效果。

以我的部落格來說,這些文章entry都是被一個.blog-posts的div給包起來的(這應該是內建模板的預設類別,如果你不曉得自己部落格是叫什麼,可以利用Firefox外掛Web developer的顯示元素資訊去找),所以步驟就是:

  1. 將欲使用動態載入效果的超連結先綁定click事件
  2. 當連結被點擊就會觸發寫好的function
  3. function第一步是先抓到連結的href,然後在後面加上".blog-posts"字串,以方便待會使用.load()
  4. 再來就是抓到現有頁面的.blog-posts div,然後使用.load()把內容灌進去
  5. (optional)如果想讓pager也能有動態載入效果,最好把底下的pager區塊也一併更新到新的連結

打完收工,流程就是這樣而已,沒幾行程式好寫,當然你要厚工一點像我還加入loading.gif來做讀取中間的緩衝也是可以,流程部份就加上先用.html()寫入圖片這樣...

程式碼部份,請先加入大家的好朋友jquery,我建議沒有空間的人可以直連google網路函式庫
再來就是在document ready之後加入click事件綁定
這邊可以看出,NS是去找DOM裡面抓.ajax-link的連結,然後綁上這個事件function,所以只要連結有掛上這個類別都會觸發事件。至 於.live()這是為了讓動態載入的pager,讓載入之後仍能有作用,如果單純用.click去綁事件的話,動態載入後就算叫.ajax-link的 連結也會失效喔。

以上這些JS script請放在裡,完成這步之後就來對template動點小手術吧!(對欲作用的連結掛上ajax-link的class)

請先打開小裝置範本:

  1. 首先是內文標籤部份,找到,底下應該就是內文標籤的a tag了,加上class="ajax-link"。
  2. 再來是標籤Widget的部份,找到該widget的位置,裡面應該有兩個a tag,這取決於你是選原本的行列模式還是標籤雲模式,不過嫌麻煩的話就都加上class="ajax-link"吧
  3. 最後是Pager的部份,先找到,把底下的a tag掛上class,再下去沒幾行有,同樣的步驟。

NS只有針對這三種連結加入動態載入的功能,並沒有把全站的所有連結都掛上,原因是,在載入單篇文章含回應的時候,如果是使用內嵌式回應,則內嵌回應功能 會喪失;另外,動態連結並不會更新網址列的網址,會造成讀者讀到某篇文章,上頭卻不是該篇網址的靈異事件,最後一點就是,其實我也想騙一點廣告刷新的閱覽 數啦 XD 畢竟我的目的是要讓讀者可以快速瀏覽文章摘要,基本上這三種連結綁上動態載入就已達到我的要求了...

姆~教學大概就是這樣,請有興趣的各位自己試看看吧!有問題請各位同學自行發問~感恩

小提醒~記得一定要先備份template阿,免得改失敗了救不回來,壞了NS恕不負責 XD

[測試文][回顧] Google Blogger 10個值得一用的部落格內建功能

分享
0 意見
Blogger top10-00
我記得2007年初剛剛開始使用Blogger寫部落格的時候,那時的Blogger還真的是很陽春。事實上,當時已經有8歲的Blogger才剛剛進行了一次Blogger Bata的升級,比起更早期的Blogger已經有了很大的進步,但如果和其它功能豐富的部落格平台相比,當年Blogger的內建功能真的是缺東缺西,很多東西必須要用戶手動自己來。
但是為什麼那時候我還是選擇在Blogger寫作,並且建立電腦玩物部落格呢?老 實說,絕對不是因為它超自由的自訂性,雖然這一直都是Blogger的強項;當年,會選擇把電腦玩物安家在Blogger的原因說來也是滿好笑的,就是我 先用過其它台灣部落格平台後,覺得那些有修飾花邊的版面實在不太像是一個科技資訊部落格該有的樣子,所以最後選擇了看起來最樸素的Blogger,畢竟它 的全名還是Google Blogger^^



有些事情的起因其實就是這麼單純幼稚,但一路走來我也在Blogger上經營電腦玩物有三 年多的時間了,我一向不太花心思在版面與後台調整,大多時間都花在專心寫文章之上,所以Blogger有什麼我就用什麼,偶爾看到一些簡單好用的修改教學 就試試看,一直以來也和樸實無華的Blogger相安無事。


昨天心血來潮,幫電腦玩物換上新裝,說是換裝,但其實一點技術性都沒有,因為還是一樣使用Blogger內建的模板範本完成(電腦玩物換上了Blogger Super Simple新版型,歡迎測試回饋)。
於是也趁這個機會重新檢查一遍Blogger的部落格後台功能,發現這一兩年內,Blogger還真的有很大的進步,許多該有的功能都已經補齊,甚至還多出了一些優於其它部落格平台的新功能。所以,今天就讓我以Blogger忠實用戶的身分,來為大家介紹一下目前Blogger裡的優秀內建工具吧!

  • 1.阻擋垃圾留言
Blogger最近最重要的一個更新,就是終於在後台加入了留言統一管理功能,並且還添加了可以媲美Gmail垃圾郵件過濾機制的部落格垃圾留言自動過濾。
這個功能實在好用,而且只要進入後台切換到〔留言〕分頁即可進行管理,它主要可以幫我們做兩件事:
  • 1.一次管理大量留言,包括可以迅速閱讀最新留言,可以選取大量問題留言進行刪除等等,不用再進入單篇文章後才能管理。
  • 2.自動判別有問題的留言,並自動過濾到垃圾留言分類中。
Blogger的垃圾留言過濾機制非常有效且強悍,雖然有時會把正常留言誤判為廣告留言,但相對的錯失廣告留言的機率也不高;基本上那些加上大量連結語法、廣告詞彙的常見垃圾留言手法,現在都會被Blogger判定自動出局,無法出現在文章底下了。
blogger top10-02

  • 2.範本設計工具
Blogger的垃圾留言過濾機制著實夠強悍,而Blogger還有另外一個明顯優於其它平台的新功能,就是我最近常常推薦的範本設計工具
在這個新工具中除了可以讓你直接套用一些優秀模板範本、替換部落格背景、調整字型顏色外,更重要的是,在這個設計工具中我們可以直接用「選」的,就能把部落格變成單欄、雙欄、三欄,還可以欄中再分雙欄;另外也可以自行調整頁尾的欄位設定,或是用拉桿微調每個欄位的寬度。
這些原本需要透過語法修改才能完成的動作,現在都只要輕鬆點選,就能自由替換。
blogger top10-03

  • 3.即時流量統計工具
Blogger的統計資料功能,因為有強大的Google Analytics做後盾,所以也很自然的比其它平台的內建流量計數要更加深入且豐富。
這個內建流量統計提供了很全面的流量資料,除了基本的瀏覽次數外,也包含熱門文章、流量來源、觀眾地區等等細節。更值得一提的是,這份統計資料可以提供「即時」的流量數據,包含最近一兩個小時內部落格訪客的最新變化,提供站長一個很有效的觀察報表。
blogger top10-04

  • 4.內嵌留言欄位
如果你最近剛剛申請Blogger,那麼預設的留言模式就是使用內嵌欄位,會直接顯示在文章最下方,讓讀者可以方便的留言。
在這個功能上,Blogger可以說慢了其它平台好幾拍,而最後出現的欄位也還是很樸素,但起碼有實際效果最重要(但我一直很希望它的身分登入部分,可以整合Twitter、Facebook帳號,這樣一來就真的無可挑剔了XD)。
blogger top10-05

  • 5.分頁功能
Blogger會推出分頁功能,其實對我來說有一點像是意外的驚喜,雖然這個分頁功能基本上也是很簡單,但是已經可以達到一些利用價值,而且最重要的是現在不用自己去修改語法,就能在部落格加上分頁切換了。
blogger top10-06

  • 6.繼續閱讀
這又是一個慢了其它平台好幾拍的功能,但終於Blogger還是擁有官方的繼續閱讀了。我們在編輯文章時,可以在網頁編輯器中直接點選〔插入繼續閱讀標示〕按鈕,就能在文章裡插入分隔線,而在首頁中就只會顯示出文章的前段。
如果是使用Windows Live Writer等離線編輯器,只要在文章裡插入〈!-- more --〉即可。(請自行將語法修改成半型符號)
blogger top10-08

  • 7.匯出網誌
也別忘了現在Blogger內建有「匯出網誌」的工具,我自己會定期的做好整個部落格的內容備份,小心駛得萬年船總是沒錯的。另外如果你想在Blogger裡替換部落格,那麼這個匯出、匯入功能可以讓你把所有文章、所有留言完整搬家
blogger top10-09

  • 8.部落格最新留言
Blogger欄位設計中可以讓你添加許多小工具,除了Blogger官方內建的基本工具外,我們也可以在「新增小工具」裡找到一些其它來源的外掛。
其中最受歡迎的就是「Recent Comments」,可以讓你在側邊欄顯示最近幾則的訪客留言,很多部落格都會加上這樣的工具。
blogger top10-10

  • 9.站內搜尋
從剛剛講的新增小工具中,我們可以添加「站內搜尋」元件。做搜尋起家的Google,幫Blogger平台設計的這個站內搜尋工具當然也是非常優秀。
我們不僅可以設定搜尋目前部落格的內容,還可以延伸到部落格的相關網站。更重要的是,使用這個站內搜尋工具時,會將搜尋結果直接整合在目前頁面的最上方,不用換頁就可以看到搜尋結果!而且速度非常的快
blogger top10-11

  • 10.Blogger測試區
最後,如果你等不及Blogger那緩慢的更新腳步,也可以直接使用「Blogger Draft,亦即測試版的Blogger後台,在這裡你可以找到一些尚未正式發佈的新功能,其實大多都已經具有一定的穩定度,讓你可以搶先試玩。
blogger top10-01

如果你現在想要申請一個部落格,對於認真想經營網站的朋友,當然還是建議使用wordpress+自行架站的組合,才擁有最大運用空間。
但若你和我一樣單純只是想擁有一個文章發表的園地,那麼同時兼顧自訂性與功能性的Blogger,就是一個我很推薦的選擇。這不只是因為我自己使用Blogger,而是在Blogger持續的進步中,就像上述提到的內建功能一樣,現在的Blogger確實擁有一些比起其它平台更優秀好用之處,對於網路初學者來說更好上手。

[測試文][Blogger] – 如何讓Blogspot上方可惡的"導覽列"消失?

分享
0 意見
相信有很多人都會聽玩過Blogger,這一個Google旗下的一個免費Blog平台。Blogger在很多方面都很強大,功能十分完整,真是一個十分 不錯的資源!可是,網站上方總是有一條"導覽列",使頁面看來不太美觀。你是否一直都想把這個東西清掉?如果你是這樣想的,就看這一篇教學吧!



1. 進入Blogger後台 ( http://blogger.com/home )。

2. 按下〔版面設置〕。


3. 按下〔修改HTML〕。


4. 在 body { …. } 後加入以下程式碼:
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

This image has been resized. Click this bar to view the full image. The original image is sized 680x431px.

最後,按[儲存範本]就完成了。

6. 如果以上步驟無誤,"導覽列"就會消失了囉~

效果一覽:
This image has been resized. Click this bar to view the full image. The original image is sized 657x100px.

清除(隱藏)了"導覽列"後。。。
This image has been resized. Click this bar to view the full image. The original image is sized 664x76px.