這個Blogger Hack我已經使用很久了,也是我個人非常喜愛的一個Hack,在我的Kubrick版型中,也有提供之功能!我覺得在回應文章時,同時顯示回應者的圖像是很酷的一件事,看圖片很快就可以辨認出是某某某,同時此iCon也具有特別的意義,像徵著你的Blog Spirit..等同於一個人的網路身份..口桀口桀 (XD..當我在亂講就好...是我個人特別癖好罷了),當初在找這個Hack的時候,覺得明明Blogger就可以自行提供個人Profile Image的link,很簡單就可以辦到了,沒什麼技術上的問題,但為啥不提供...後來在Google Groupgs有看到,聽說官方的回應是,會有關於安全性方面的問題,所以不提供...至於問題是如何,當然就沒提到囉...※Demo1: example
※Demo2: 以這篇回應較多的文章來看看吧...
因為之前較沒空,所以一直懶得翻譯...並且有不少網友來信問說是如何弄的,所以就直接來篇翻翻教學吧,請往下看吧...參考資料來源:Step1.首先開啟你的Template(記得要是完整的,也就是到"Edit Html"頁面勾選"Expand Widget Templates"),找到底下的code
New Comment Photo Hack (Blogger) (新方法,較簡易,底下講解此方法..)
comment photos and highlighting hack (這篇是舊方法)<dl id='comments-block'>在這段code底下插入下面的code
<b:loop values='data:post.comments' var='comment'><div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
<!--底下這段,針對IE修正了些小bug-->
<b:if cond='data:comment.authorUrl'>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});</script>
<b:else/>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});</script>
</b:if>
Step2.接著往下滾,你會找到一個相對應的</b:loop>,在</b:loop>之前新增底下的code</div>
Step3.在tempalte中,找到</body>,接著將底下這段code貼在</body>上面,底下有maxwidth(限制最大圖像寬度)和defaultimage(若在Profile中沒有圖片時,所使用的預設圖片)參數供你自行調整<script type='text/javascript'>
//<![CDATA[
function commentPhotoDo() {
var tag;
for(var i = 0; i < commentPhotoIds.length; i++) {
//上面那行,相較於原文,也作了些小修正了,解決一些怪異的行為
tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
document.body.appendChild(tag);
}//end for var i in commentPhotoIds
}//end function commentPhotoDo
if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); //在首頁不執行此script
//]]>
</script>
Step4.接著就是存檔,就ok啦...快去看看你的成果吧..
Tags Cloud
My Secret Notebook (我的火星文記事本)
mm0NiDU82M4jV6t2RBCBrz25cuC9sjNwAuamtlEmcM1VguTu
hVs5vX7xayeXoDLwLRIsXDdxVSYNoZecdMY16+hwqpbgm2ch
78a90t0Gr9zL74TcZYwjdl3BbmnCRBJjD88dRHxdcPqIiDGp
zWe9q/XdSxe6yXKdh/hwQJ+D+o6XPWboby+RmoOtn9wmdQnN
o8h7BKWLQQMO+5XEV0RDZmUO3X7ADN8bzC8JmhP1BVP2V80d
Fs3ohWPSt7UBKnHCwI5tyeakRQihDKCzfiP7F0J+spSxCSlR
PqAj0w88PWB2ax8Y2++K/XMFHF6VuSeRhSMCaExmTTLqngxc
WlEA551OvUriquyW8QQc6jVg8lQn4m4H78QgUPvc2F3LsYKm
fd9HLa+mXrnTgh4SfgyUmS84BZdoGpMbfM4OpuWgFVZcN2e/
uKhuJm7md4G0wyo7efCLPwWWWqxZG8yzwQAHDQr5p/3xZeX4
qjMXzpXiwCqLzTGbZPqx9XMDqtrardSQNAw3dJgxgWALNzyu
/OOiDZGnobvYgDXDRuMQHo1k7gvSR7J+SNIbw7cd4696ChIL
c97GW+hdMcpTOcK9dhIKK8tXDJxiM7OSA28KCN4Wn3N1iJ9y
w4Y6W4GqbSiRxrze5zwOGeG5SbvrYvJ4LSDgND6fszdE43uk
PoPKYyfg3r4JcwrcqDJXcv1jWDuLi1swUK8lXhLLA7Ahfl8a
r+3IJJ4bnUASn9UiEMRZsOKJvK83A/TVZTS5QTz9etA60x7T
67VlH432PnH/ktoaE1XmqhbFgZ7v9UD7ujgxFMYvJ7Y9dNcI
bd3iUVa9EmudYLEuw4Otze1lLL3NQgUb+NNjgKx7r6bUHdmZ
WW7V9g==
My Flickr
| [+/-] |
[Blogger Hack] Comment Photo Hack (在Comment處顯示回應者圖片) |
| [+/-] |
[公告] 更新之前發佈過的一些 blogger 相關網頁 |
由於之前所發佈過的一些blogger hack,原作者已經不再hosting此javascript file ( http://www.anniyalogam.com/widgets/hackosphere.js ) ,所以牽涉到了底下幾個hack是否能夠正常運作,所以有使用到下列相關功能的人,請更新一下!
(只要看底下各篇中有註明 [Updated 2007/07/14] 的部份即可)
※還有一個重點就是,我之前porting到Blogger的kubrick ([Template] Kubrick style for Blogger beta) 這個template,也由於我所使用的googlepages空間,和 http://hackosphere.blogspot.com/這個站的作者 Ramani 糟遇到同樣的問題..."Bandwidth exceeded",也就是超越了googlepages所提供的頻寬上限,導致很多放在 http://chenkaie.googlepages.com 底下的東西都load不出來了..OMFG,所以我想有很多有使用Kubrick template的網友,可能要忍耐一下了(好像要過個兩三天,權限才會復原),囧囧囧囧rz.... 因此你的Blog暫時會醜個幾天,見不得人!!
若怕再遇到此情形,請自己host所使用到的檔案(也就是以http://chenkaie.googlepages.com/ooo.xxx 這個型式存存的檔案),比較保險...
(謎:到底是啥檔案將我的googlepages帳號搞掛的...兇手快出來自首,自首無罪,抓到絕對嚴懲 >"< )
| [+/-] |
[AJAX/JSON] Kaie's Blog 2.0 (beta) |
之前所提到的「Neo for everyone」這個Cool Template,離釋放出來的時間,已經過很多天囉。最近終於手癢忍不住,下海啦...再度花了我不少寶貴時間惡搞 XD...
幸好效果還蠻滿意的,真低素很快很快低內…至於美中不足之處,在 Neo FAQ 和 Installing Neo template in your blog 此兩篇文章中有提到,作者說,為了追求更快的反應速度,於是在單篇文章Label部份以及Comment部份的功能,可能較不完整…但不影響整個BlogSite的操作..有興趣的人,也趕緊來動手作看看吧...改天若真的太閒時,再來把功能改修改得完整一些,那麼以後就可以直接切換成此平台了,使用Google所提供的Blog平台,當然就要跟上Google的腳步,Hack成Google所提供的服務[Google Reader,GMail...]一樣,這些利用AJAX所implement出來的產品,Page Loading時間超短、反應迅速、互動性高,這些賣點太吸引我鳥...果然能留住客戶的腳步
感謝Ramani免費提供的Neo Template,我Hack完之後,所展視出來的效果,請點擊底下連結 操作方法相當簡單,如下:
| [+/-] |
[Template] Neo for everyone |
哇呼…這是個天大地大的好消息呀!! 我曾經有提過一個國外的Blogger Hacker所設計出的新Template,利用 AJAX/JSON 的技術,使得整體Blog的速度飛快,就好像在操作本機端所架設的網站一般,幾乎沒有什麼Page Loading的感覺,(在此篇中 [Blog] A not only Awesome but Lightning Fast Blog),如今此位Hacker免費釋放出此template供大家使用(之前可是要價10美金的唷!!),有興趣的人快來嚐試一下吧...
更屌的是,作者有提提供一個叫「Neo demo blog」的站台,讓你輸入你的Blogsite URL之後,即可讓你馬上體驗一下,利用 AJAX/JSON 所帶來的那種全新的「快感」體驗...就算你不喜歡它的template style(我就是這種人..哈哈),也一定要去親身體驗一下「自己的Blog能夠有光速般飛快」的fu...嘻
我想所帶來的衝擊將會是引領更多的人,親身感覺到 AJAX/JSON 的Power...套用一句古人的話:「師父 Neo 引進門,修行靠個人」,我想若有機會並且有時間的話,我的Blog下一步最大的改版,將是跟著 Neo 師父走,盡可能將我的 Blog 運用更多的 AJAX/JSON 技術,避免Reload一些重覆性的部份,加速網頁開啟的速度...(希望不是光說不練...XD) ※資料來源:
Hackosphere -> Neo for everyone!
| [+/-] |
[Javascript] Style Sheet Switcher |
由於上次使用朋友的電腦,是屬於「16:9 WideScreen」,忽然覺得我的Blog的版面在WideScreen的螢幕底下看,似乎有點浪費空間,好空虛的感覺 ...XD,WideScreen也是未來的趨勢,以後應該買不到一般「4:3」的螢幕了吧..囧rz,看來我的 Eizo L365 可以退休了...於是改成「三欄式」或是「寬版面」Template的趨勢,似乎是不可或免的!
※根據 Google Analytics 的「螢幕解析度」分析數據如下:結論是閱讀此Blog的人,大概還是有五成以上是使用「1024x768」,所以目前的版面配置樣式,似乎還可以再撐一陣子..^_^,但為了照料那些使用「1280x???」解析度的人,還是得將版面給加寬些,降子看起來比較順眼些(純屬個人自以為),所以就目前的情況來說,讓使用者能夠自行選擇版面大小是再適合不過的了,「力供丟嗯丟呀!」,並且Yahoo也有寬窄頁面切換的功能,看來我有跟得上時代的潮流..呃...
※使用方式,請見下圖:
※如何取得此功能資料來源:
英文:Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)
中文: Ben's 部落不及格: Blogger進階玩-如何即時切換版型
註:懶得看英文的話,就看Ben兄的說明吧,生動又好懂低..
| [+/-] |
[Javascript] Encrypt your private blog post |
研究所時有碰過一些跟Cryptography(密碼學)有關的東西,但只懂一點理論上的皮毛而已,沒有動作實作過,如今玩Blogger的同時,剛好有個有人心士將他所學應用在他的需求上,真是與實務面作了結合,太棒了老兄…我要向他看齊..XD。
原作者實現此Hack的用意就是: 他想要將他一些私人的、不方便公開的東西,亦或某些只想供親朋好友看的內容,記錄在公開的Blog上頭,又不失隱密性,且方便日後查詢,於是針對這些私密訊息的簡易加解密功能就如此誕生啦! (所利用的演算法是 256-bit AES,目前來說「安全性」算相當高了)
※適用範圍: 所有支援Javascript的Blog,若不幸你的Blog不支援的話,快跳槽來「Blogger」吧,保証可以隨便你惡搞的Blog平台,不會後悔的
資料來源:
Vincent Cheung -> Encrypted blog posts 快往下瞧瞧這強大的Hack吧... :D
:: Demo (展現出來的效果如下,兩種方式) ::
Key(密鑰): ie-sucks
- Demo1:
Click to Decrypt text (點擊此處解開火星文,裡頭有清涼的唷)Z0J1c4HlZqELhLfFoUOd5hH9Wu6ntYW26B4XXM24lKlRT05Z+lEDEsPVjtvqISIXoAtLKJwuksdqBpY3higDTLhYarZUgXVyyH1WY5N7hzPrP2xx0gJisgbHx2IdtoXww4Ure0hui2IcRuX26FSlxTnbIKQlLH22p7cIvQXgYak6KiV6MKaBKeiIBSKSYi5Kz8t6MSM4kIGnmzBmibsNMaPCjzb4KGmVA7xegfkyQNfPzK51Yl6SgeoENK8MUGTnbz0L1l5YT9vBYd5LxJdbf8/hwmhvY2Lzkq+iLeP9ClKIuirkwt2J3qhveuQR/tqylONAVxNccbT7e8n6j4pw85F8+4GAPDf60lbo9DuusRA= - Demo2:
Show encrypted text (點擊此處變身為火星人)
上方展現出來的效果是不是很炫呀 ^_^,超吸引人的吧,快來安裝一下吧,底下開始中文化原文..囧rz,方法如下:
首先在你的Blog中嵌入此Hack所需的Javascript,在Blogger的使用方法就是將底下的code加在Template中的</head>上面即可(其它Blog方法就是加在header裡頭就對了)
<script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>完成上面動作之後,基本上就完成了,若要在新文章中新增「火星文時」的話,請透過底下兩個步驟:
- 產生加密過後的火星文:
透過此網站,輸入「Key」欄位以及「Plain Text」欄位,接著按Encrypt Button(加密鈕,在Plain Text欄的下方),此時便會在「Cipher Text」欄位產生加密過後的火星文字啦(底下會用到..)!!
※千萬要記得上方你自行定義的Key,之後解密時要用的,若忘記了,恐怕沒有量子電腦(Quantum Computer)這般等級的高速電腦是解不出來的。 - 嵌入火星文片段至新文章中:
共有底下兩種顯示方式,依個人喜好選擇擇一
.方法一(如上頭Demo1,直接在文章中顯示火星文):<a href="javascript:Decrypt_text('unique_name');">Click to Decrypt text (點擊此處解開火星文)</a>
<div id="unique_name">此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)</div>
.方法二(如上頭Demo2,隱藏火星文,只顯示連結):<a href="javascript:Decrypt_text('unique_name', '此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)');">Show encrypted text</a>
<div id="unique_name"></div>
※注意上方的unique_name型態是div tag的一個id名子,可以自行命名,只要在template中,或文章中不出現同樣的id即可,否則會造成判斷錯誤!!也就是在一個顯示頁面中,有用到兩個以上火星文片段的話,那麼此id的命名就必須是unique_name,unique_name1,unique_name2...之類的。
最後,作者很風趣的列舉了幾個常見問題(Faq),很北爛的一個家伙...有興趣去看看...
| [+/-] |
[Javascript] Add Digg vote button on Blogger Template |
為了順應目前網路的趨勢,我也要來跟大家一起Digg一下...有興趣的人一起來吧,若不懂Digg是什麼碗糕的人,簡單的說: Digg就跟台灣的"HEMiDEMi 黑米" 是同性質的站台,只不過Digg算是此類中的佼佼者,應該是世界最大站!!
其實...真正原因是,我是覺得這個「Digg Button」還蠻美的,很有質感,相當有「Web 2.0」的feeling..XD 可以拿來裝飾我的Blog,哈哈,會不會很像智障呀... :x 並且由於嵌入Javascript語法,所以又會再拖慢開啟網頁的速度....but 不管三七二十一了,我的 Blog 本來就不怎麼快了,再慢一點也無妨啦,大家就忍耐一下吧.. :p
雖然Digg.com在台灣不怎麼有名,因為台灣網路族群主要還是以"HEMiDEMi 黑米"為主,而且Digg.com裡頭被Digg的文章幾乎都是英文為主的網頁...但我還是堅持要這個"有質感的裝飾品" :D
想要跟我一樣惡搞的人,就跟著底下作吧..很簡單低
在你的Blogger template裡頭找到<p><data:post.body/></p>取代成底下的code<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>
就這麼簡單...感謝底下這位帥哥提供的資料資料來源:
Ajaxcold: Add Digg vote button on Blogger Template
| [+/-] |
[AJAX] AJAX Labels Cloud Reloaded |
繼之前的[AJAX] AJAX Labels Cloud之後,原作者Deepak又再度的補強了「AJAX Labels」的功能囉,趕緊來瞧一瞧吧...資料來源:
Deepack -> AJAX Labels Reloaded
※新功能如下:
※至於所展現出來的效果,請直接點選我的Blog上方"AJAX Tags Cloud",再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中,至於有使用之前舊版本 AJAX Labels的玩家,請自行至"原著網站"看,有詳細的解說,教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的),要不然直接"砍掉重練"也是可行啦.. :p
Step 1. 為了以防萬一,先備份一下你原來的template吧! 再就就是編輯你的template,找到</head>這個keyword,再將底下code貼到</head>上方。<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5; //一次顯示幾筆資料
var navFlag = 1; //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:"; //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />
上面5個粗體字的變數,根據個人喜好,可以自行再客制化一下.. :D
Step 2. 找到底下code <b:loop values='data:post.labels' var='label'>取代成下方
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
Step 3. "假如" 你在sidebar有Label Widget的話,再作這一步驟,找到底下code
取代成下方<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if><b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>
Step 4. 按下此Button,再隨著說明步驟,一步一步完成...新增此Widget的目的就是,當你點選分類標籤時,更新的內容所要顯示的地方.. ^_^,看你想放哪邊就放哪邊囉!!
Step 5. 儲存範本,結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!
| [+/-] |
[AJAX] AJAX Labels Cloud |
今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels,也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版,利用 AJAX/JSON 的技術,大幅提升Blog的更新速度,效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」),感謝作者Deepak分享(very Awesome!)資料來源:接下來開始翻譯(...XD)安裝步驟:
Blogger Hacked: AJAX Labels
Step1:若要此hack能夠正常運作的話,你必需在你的Blog裡使用"Prototype Javascript Library",你可以到官網自行抓一份,放到你的空間中 或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間),所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script>
<script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
Step2:接著新增核心部份程式碼,將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭,裡頭CSS請依照您個人喜好修改,細項說明,請參考原著解說!CSS Code & Javascript code:
http://bloggerhacked.googlepages.com/ajaxlabelsscript
Step3:在你的Template中找到底下片段,有一樣的全都要修改(若不改的話,就是原本Blogger提供的效果)
將上面紅色部份,取代成底下:<a expr:href='data:label.url' rel='tag'><data:label.name/></a><a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>
Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)資料來源:若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話,請將底下:
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改),裡頭的code如下(和原作不一樣,原作的似乎有些小Bug,我作了一點修改,若你作完不行的話,請參考原著):<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>
Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!
※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡,為了追求更佳的速度感^^),作為文章預覽,所以呈現出來只有一小段!
※還有預設,點選每一個Label只有呈現5篇文章,若要增加的話,請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!
[Update 2007-03-14]
原作者,發表了新版本的AJAX Labels了,請參照此處
| [+/-] |
[Javascript] Selectable Post Font Size for your best view! |
之前有看到許多網站或討論區,有可以自行選擇顯示字型大小的功能,對於視力好的人來說或許字型小了些沒什麼影響,但有些老人家..(是我嗎..XD),有時就會覺得看得有些吃力,若能迅速的讓字型放大,不用再花時間ReLoad頁面的話,將會是個很不賴的工具!!
※當然藉由按 Ctrl++/ Ctrl+- (for Firefox),或者是Browser提供的放大縮小功能,不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能,但我這個人比較龜毛,因為這兩種功能所表現出來的文字常常是破碎或是很醜,個人無法接受...時常因為這樣不逛那個站了…囧rz,並且透過上述的方式縮放頁面字型時,是所有版面的字型都會放大,也就連帶影響到Sibebar、Header...及其它非本文章內容的部份,整個網站當初設計好的版型都變了樣,喪失美感! 因此,我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!
至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後,也有提供類似這樣子的工具,But...他每次點換字級大小之後,都必需要 Reload 部份的頁面,明明可以不用Reload的,為啥他這麼作…後來發現,廣告部份也隨著Reload換新的了...囧rz,想必這是最主要的原因吧,那是他們吃飯的工具,就給他reload一下吧...XD!!參考資料來源:我根據上面所提供的的簡易版本,再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後,其它Blog也都是可以套用的)。
懒人图库 LAYABOUT'S GALLERY
在修改的過程中,又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學,解救了我...感恩!!參考資料來源:於是,最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下:
IE vs. FireFox 系列 - getElementsByName問題
[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題,在這裡提醒大家,貼底下code時應注意的事項:由於Blogger在parse template語法有無錯誤時,他會檢查是否存在相對應的左括: <及右括: >,若不存在便會跟你說你的template語法沒有正確的close,導致儲存失敗。不幸的是,你若將Javascript嵌入template檔中,並且又很巧的,用到compare operator,例如:「小於:<」,如此一來他便會產生上述所提的,少了相對應的右括: >,而導語法錯誤啦! 因此,大家若要將底下這段javascript嵌入template中的話,記得將裡頭的<置換成<
之後,因為我只讓本文內容(Post.body)的字型大小可供縮放,因此編緝template內容,將裡頭找到的所有<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
zooms[i].style.fontSize = size+'px';
}
}
</script>
都置換成底下的樣子<p><data:post.body/></p>
如此,就可以將被 name='zoom' 的span tag包住的那些內容,賦予字型縮放的功能!!<span name='zoom'><p><data:post.body/></p></span>
最後在將你要提供此項功能的界面,填入此段程式碼即可,裡頭的數字以px為單位:<a href="javascript:doZoom(16)">大</a>※展示出來的功能,請參照此圖,並加以操作看看…
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>
| [+/-] |
[CSS] A Cool blockquote for "Code style" and some blogging tips |
資料來源:
良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區個人覺得蠻有質感的 ^_^ a nice css design!! 感謝「良人的大秘寶」的分享!! 樣式就如同下面的code block所示。
code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}個人依樣畫葫蘆地新增一個比較常用的參考資料來源(Reference Block,記得若要用code .ref{}這個語法的話,上面的code{...}也是不可或缺的...必需有這個code{..}存在的前提,code .ref{...}才會生效),如下:[Updated 2006-11-29]IE sucks again..囧rz! 最近發現用IE開的話,用我自訂的<reference> tag的話,在IE會失效,後來又換了<citation>這個字,沒想到還是sux...真無言,IE幹麼鎖死這麼多Keyword呀,真不知微軟在惡搞啥,給user的自由度這麼低!!
於是參考了synnwang的作法(感恩^^),將原本底下這段
reference {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 5px 0 15px;
}換成下面這段,在IE才能work!!
code.ref{
display: block; /* fixes a strange ie margin bug */
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: $bodyfont;
line-height: 1.6em;
}因此若要使用<code.ref> tag,方法便如下:※因為常在Blog上post一些教學,把在Blog貼"html code"的一些tips記錄在底下:
<code class="ref"> 引用文字的部份 </code>
如此一來,所貼出來的html code便不會被Browser給解讀為掉,而造成貼出來的code都看不到..!!
- 將 < 以 < 取代
- 將 > 以 > 取代
- 將 & 以 & 取代
[Updated 2006-12-26]若是自行一個一個取代的話,似乎也是有些麻煩,因此個人常用的方法是:透過Nopaste之類的站,像是:http://phpfi.com/ 使用的步驟如下:
- 將該填的欄位填完之後,(其實只要填source這個框框即可,其餘可以略過)
- 接下來,依照個人喜好(若選特定的某種語言,還會有美美的關鍵字highlighting唷!),選擇位於右下角的"-auto detect"這個選單,選好後押save鈕!
- 然後便會產生你所貼的source coe於網頁上:
- 若此時你用的是Firefox的話,那恭喜你了,選對Browser,省事多了! 選取你要的source code部份,接著按右鍵->檢視選取範圍原始碼(View Selection Source)
- 若用IE的話(I am sorry...IE sucks),無法觀看所選取的特定部份原始碼,只能直接檢示所有頁面中的原始碼,再自己找尋你剛剛貼的code!(或是是我對IE不熟,若有好的檢視原始碼方式,歡迎告知我,感謝!
- 接著再按右鍵->複製(Copy),即可貼到你在Blogger中編緝文章的地方囉^^,很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式,懇求大家提供給我..XD
<span style="text-decoration: line-through;"> deleted text part </span>| [+/-] |
[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box |
為了使整個版面好看,但又不失支持Blogger的原則,還是要幫Blogger打個廣告,而且發現升級到Blogger beta之後,那個navbar裡頭的"Search Blog"這個功能,相當的不賴,他的Search Result會直接show在原本Blog中的#content-wrapper裡頭,也就是MainPage中,一整個就很像是WordPress所提供的「站內的全文搜尋」功能,個人相當滿意 :)。
※範例:像是搜尋Keyword "blog"的話,所呈現出來的結果就像這樣。
因此,我想要的呈現方式便是:將原本固定在版面上頭的navbar的行為設成:「隱藏在上頭看不到,一旦滑鼠移過去的時候,就會出現(還是有幫Blogger作個廣告吧 XD)」,然後將"Search Blog"的功能直接顯示在Sidebar中,方便搜尋 ^_^參考資料來源:.動態顯示Navbar的方式如下,只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉,請儘速轉移到Firefox...XD):
Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}
#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}
.在Sidebar中加入Search Blog的功能,只要新增一個Page Element(HTML/JavaScript),然後加入底下的code:
至於一些個人化語法的修改,就請參考原著,不再詳述,基本上改上面的size:"Search Box的大小",value:"所要顯示的文字"。<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>
※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間,相信他一定會改善的),於是便需借助"Technorati"這個站的幫忙囉,可是透過他的網站所產生的javascript code,所呈現出來的樣式,並非我想的,於是便作了一些修改,拿掉些我不想要的東西 ^^,source code如下:<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);
function drawTREmbed(s){ document.write(s); }
// -->
</script>
| [+/-] |
[Blog] Random Rotating Banner Hack |
此功能在WordPress中已經是預設的plug-in了,藉由這個簡易的javascript,可以達成很多其它功能,像是:產生「隨機Discription」、「隨機 Background」....等等...想到什麼,就自己加吧!
以隨機Banner來說明的話,主要的作法就是利用javascript修改css style,例如原來template裡面的#header-wrapper的style:
#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}基本上,我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時,先利用一段javascript code,產生一個同樣的background定義,用以覆寫<body>裡頭的wrapper-header的background定義,所以記得要把底下這段code「放置在<body>之後」,就行了:
<script type="text/javascript">
var banner= new Array()
banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>※記得上頭的"4"要一致,因為他的random產生器,填4的話,就是產生0~4這5種值!假設你只有0,1,2三張圖的話,那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作,就再加新的document.write(...)的語法進去就ok囉!!
重要參考文獻: Freeyasoul Adventure -> Random Rotating Banner Hack| [+/-] |
[Blog] Peek-A-Boo view of posts in label/archive pages |
很棒的 Blogger Hack,不僅具有和 [Blog] only show "Post Title" at Lable and Archive Page 這篇同樣的功能,更可以支援直接擴展(Expandable),可以加速網頁的開啟的速度... Very Cool !!
例如:[Blog]所展現出來的行為。
實作方法如下:
Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間,已經無法承受,請繼續看底下code框框中的更新作法將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
拿掉,置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
Step2:修改成如下,新增紅色字所顯示的部份 (記得把 Expand Widget Templates 選項打勾,才可以看到完整的code)
※若要改變樣式,請自行更改上頭程式碼裡頭的"[+/-]"這個符號...<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
Step3: 沒有了,就這樣子而已...快去測試看看你的Label和Archive頁面吧...^^.參考文獻:Hackosphere -> Peek-A-Boo view of posts in label/archive pages
| [+/-] |
[Blog] Expandable posts with Peekaboo view (blogger beta) |
這個功能,個人覺得比起之前的「"...Read More"篇」的更為實用,因為不需要重新載入新的頁面,直接就打開來...反應速度更快,閱讀完畢時,又可馬上縮起來,不占版面空間,相當的方便 ^_^
.實作方法如下:
Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間,已經無法承受,請繼續看底下code框框中的更新作法將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
拿掉,置換成底下這一段程式碼,若你沒有加過以上那一行的,就略過,直接加以下這段code...
<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
Step2:找到底下這段,加入紅色的部份<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
Step3:找到底下這段,同樣加入紅色的部份<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>
※若要更改"顯示文字",請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後,先登入Blogger,再到「Settings->Formatting」,將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可,如此一來,每次編輯新文章時,即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span,並非如同之前這篇「"...Read More"篇」所提到的,是用div...請小心!!※參考文獻:
.Hackosphere -> Expandable posts with Peekaboo view
.How can I make show/hide links for my posts?
| [+/-] |
[Blog] adding "...Read More" tag in Blogger beta |
.參考資料來源:轉錄文章來源: Blogger Beta 繼續閱讀功能改良
有關 Blogger in Beta-水瓶子
Hackosphere
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag,然後再利用css的display:none來隱藏該篇文章,由於display:none所隱藏的部份,不論是在IE或是Firefox下瀏覽,一樣都會把隱藏部份下載到cache,所以如果首頁的文章過長或是圖片過多,一樣會影響到首頁的瀏覽速度。
所以這篇利用Javascipt,把想要隱藏的文章直接remove掉,提高首頁的讀取效率,並且還具有Read More標籤適時才出現的功能。
首先進入編輯html,請記得把Expand Widget Templates打勾,然後在<head>間放入Javascript code<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
接下來找到<p><data:post.body/></p>
用下面的code取代它<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>
最後,把想要隱藏文章部份的tag中,加入id="fullpost"就完成了,即<div id="fullpost"> //隱藏部分的文章 </div>
※註:Chagg says:「目前測試,在IE下確實有提升讀取效率,不過在Firefox下好像沒什麼用,照樣還是把隱藏部份下載到cache 囧rz,目前還在想有什麼方法可以對付Firefox」
.手動加id="fullpost"的動作如何自動化呢:很簡單,只要利用Blogger提供的功能,先登入之後,到「Settings->Formatting」,將
<div id="fullpost"> //隱藏部分的文章 </div>填入Formatting那邊即可,如此一來,每次編輯新文章時,即會自動填入所需的程式碼囉 ^_^ oh ya!!
| [+/-] |
[Blog] only show "Post Title" at Lable and Archive Page |
一個蠻不錯的 Blogger Hack,可以加速網頁的Loading的速度,不會顯示所有內容!!
- 參考資料來源:良人的大秘寶
<b:include data='post' name='post'/>置換成底下這段:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
| [+/-] |
[Blog] Overflow problems in IE (sidebar appears at bottom of blog) |
之前我的Blog中的side bar(也就是右邊那一整欄)在使用Internet Explorer瀏覽時(Firefox沒有問題),有時候會發生整個sidebar跑到頁面的最下方,但有時候又不會....XD,後來不爽了去問了一下Google大神才知道,原來是因為sidebar被blog中的content所擠壓,導致sidebar在主頁面的右邊(通常放在右邊)沒有足夠的空間擺放,而跑到整個Blog的下面去,主要有下面兩項原因導致這種情形發生,以下底這段sample為例:#outer-wrapper {
width: 660px;
padding: 10px;
....... }
#main-wrapper {
width: 410px;
float: left;
....... }
#sidebar-wrapper {
width: 220px;
float: right;
........ }
※以上2種情形在Firefox中,會自動產生scroll bar,例如:[Blog] IE底下一片空白的UTF-8網頁...囧,而不會導致sidebar跑掉。若在Firefox中還有這樣的問題的話,那可能就是自己太智障,將sidebar-wrapper的width值設太大,導致"outer-wrapper -> width < main-wrapper ->width + sidebar-wrapper ->width",那就是你的錯了,快改小一點吧...
.Solution:#main-wrapper {改成上面的樣子,就行了... ^_^
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
....... }
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
........ }
| [+/-] |
[Blog] Backlink tags usage |
如何在Blogger裡頭加入「引用此篇文章的連結呢?」以及讓他人可以很簡易的透過一個「create a link」的動作即可在他自己的Blogger中引述他人的文章。
很簡單,參考Blogger Help裡頭的 Backlink tags就可以輕鬆完成囉 ^^...
.主要動作就是把底下這段code:
<BlogItemBacklinksEnabled>
<a name="links"> </a>
<h4>Links to this post:</h4>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow">
<$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @
<$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>貼到你的blog中所想出現的位置,一般來說都是放在<ItemPage> and </ItemPage> 這個tag中比較常見,在mainpage中不要出現比較不占版面空間。| [+/-] |
[Blog] Blog Hacks |
感覺蠻多料的...^^ BloggerHacks Wiki 太閒時,再來Hack一下!!
Note:
當點單一篇Post時,若在<>... < /MainOrArchivePage > 這個Tag中的,就不會出現在sidebar中,可使得網頁不會太冗長^_^
※但是我手賤升級到Beta版時,好像失效了....囧rz
| [+/-] |
[Blog] Blogger : Category by Furl |
一直以來,覺得Blogger沒有分類實在是很不方便的一件事。沒分類使得尋找特定文章時,顯得很不方便,一直在等待Blogger提供這項功能,但是沒耐性的我,最後還是自己動手來做了...Orz (我想當初Yahoo創辦人楊致遠也這有類似的困擾吧...囧rz,但這適用於發展神速的網際網路,分類始終無法跟上時代的腳步的,壓根兒無法解決這問題,終究還是 Page & Brin 創辦的 Google大師屌了些…)。
在PTT Blog版上找了些分類相關的文章,發現大部份皆是透過Furl來完成這項功能的。當初應該自己架WordPress就沒這個問題了 XD,又可以隨意擴充,比較Flexible些,但想到要花時間,於是就先擱一旁了,有空再來搞吧!! 後來有熱心的網友寫了篇Step by Step的教學文章,真是太棒了...參考一下(感謝Rockbird網友)吧。
| [+/-] |
[Blog] Plugins of this Blog |
※ Main Features of this Blog ( Last Updated: 2007/03/27 ):
※ Future work :
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo_1] [HowToDo_2][Figure]
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo] [Figure]
I felt this plugin becoming annoyed to me...XD, so Delete it!
[HowToDo] [Figure]
[HowToDo] [Figure]
[HowToDo] [HowToDo] [Figure] [Updated 2007-01-02 Transfer from jQuery to Prototype]
[HowToDo] [HowToDo] [Figure] [Updated 2007-01-02 Transfer from jQuery to Prototype] See below "Bubble Tooltips"
[HowToDo] [Figure] [Added on 2006-12-23]
[HowToDo] [Figure] [Added on 2006-12-30]
[HowToDo] [Figure] [Added on 2006-12-30]
[HowToDo] [Figure] [Usage] [Added on 2007-01-08]
[HowToDo] [Figure] [Added on 2007-03-19]
[HowToDo] [Figure] [Added on 2007-03-27]





