在部落格裡增加後台捷徑選單

很

多部落格平台都會在部落格里增加一個登入的功能，方便部落格主人登入發表文章、管理..等等，其實Blogger預設的模板裡也有這功能，就在最上方的預設導覽列裡，但是很多人不喜歡這個導覽列，會用Hack將它修改掉，語法如下：

語法，放在<b:skin><![CDATA[和]]></b:skin>之間

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

由於太多人使用這個Hack了，這也是Blogger最受歡迎的Hack之一，因此能夠方便快速登入Blogger後台的功能也等於是被直接抹殺掉了，於是我們的Amanda Fazani姊姊（Blogger Buster作者）提出了這個有意思的Hack，乾脆自己作一個不就好了，於是這個Admin Control Panel Hack就這樣誕生啦。



這個後台選單一般訪客是看不到的，必須是登入Blogger的後台主入才會看到，就算一般訪客從原始碼中找到這些連結（原始碼裡不會隱藏），也必須知道原主人的帳號密碼，進行登入後才能看到，所以不會有被盜連的危險。

Step. 1
首先我們必須先知道自己部落格的ID，同樣地..登入部落格之後，點選自己部落格的任何一個功能（例如：發表文章、版面配置...），然後看看部落格的連結，最後的部份就是你的部落格ID。

部落格ID格式

http://www.blogger.com/post-create.g?blogID=這段數字就是了

Step. 2
接著到『版面配置』→『修改Html'，記得不要點選『展開小裝置面板』，直接搜尋siderbar的語法，如下：

語法

<b:section class='sidebar' id='sidebar' preferred='yes'>

接著將下面的語法放到上面這段的前方就行了。
PS.這是我修改過的，原始的請參考原作者的語法。

語法

<span class='item-control blog-admin'>
<h2>部落格後台</h2>>
<a href='http://www.blogger.com/post-create.g?blogID=5586986389269109409'>發表文章</a>
|
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=5586986389269109409'>設定</a>
|
<a href='http://www.blogger.com/rearrange?blogID=5586986389269109409'>版面配置</a>
|
<a href='http://www.blogger.com/html?blogID=5586986389269109409'>修改 HTML</a>
|
<a href='http://www.blogger.com/moderate-comment.g?blogID=5586986389269109409'>管理留言</a>
|
<a href='http://www.blogger.com/logout.g'>登出</a>
</span>

最後我要說的是...這個Hack的實用性對我來說是『0』XD，首先..我不喜歡讓自己的帳號一直維持在登入的狀態，所以當我進入部落格之後，未登入前我是看不到這些選單的，所以我還是必須經由左邊的小圖示連結進入Blogger，然後進行登入後再開始使用，既然進入後台了我又何必回到部落格裡使用這個選單的功能呢？等於是多此一舉嘛XD，原作者的用意是為了讓部落格主人更方便的進行管理，減少一些不必要的步驟，結果等於是繞了一大圈，沒有比較方便阿XD，不過這功能蠻有趣的，所以我還是改啦！


參考網站：How to create an 「Admin Control Panel」 in your Blogger template


read more...

GV-R485OC-1GH上機測試啦！！

這

到底是不是我的錯覺阿，把GV-R485OC-1GH上機之後，由於我的螢幕只有D-sub介面，所以通過轉接頭連接顯示卡，覺得螢幕上的字體似乎有變黑變租一點，比本來內建顯示晶片的HD3200還要清楚"一點點"，但是亮度也變亮了一點，看來還要好好的微調一下。

在安裝前，我先用Drivesweep將ATI的內顯驅動程式移除乾淨，然後將CCC催化劑也一併移除，抓了Xtreme-G版本的8.8驅動程式來安裝，沒想到又遇到了CCC打不開的情形，還好有了前一次的經驗，知道要怎麼解決了。

1.先確定有安裝微軟的NET Framework 2.0以上的版本。
2.用Revo Uninstaller乾淨的移除掉CCC，重開機之後再重新安裝，之後就可以打開CCC的介面了，這方法百試不厭，還沒有失敗過。



上機後的樣子。說真的，開側板上機時，顯卡風扇的聲音真的是有一點點大，不過關上側板之後就聽不到了，整台主機在我旁邊就只聽得到CPU風扇的聲音。


近距離再拍一下，可以看到下方還有一個PCI風扇，本來是用來增加主機對流的，現在變成顯卡專用風扇了。如果顯卡的散熱片沒貼好，掉下來被這風扇打到的話，那就真的變成在打彈珠檯了...0rz，上機前就真的發現主機板上的一個散熱片沒貼好，給我掉下來了...所以我一再的確認散熱片是否有貼好。


不囉唆，開始測試囉！！

1.平台資訊

CPU：AMD Athlon 64 X2, 2700 MHz (13.5 x 200) 5200+
MB：Gigabyte GA-MA78GPM-DS2H
RAM：威剛 DDR2 800 2G*2
VGA：GV-R485OC-1GH
散熱：前、後各一12cm風扇+一個PCI風扇
室溫：30度C（以下皆為關側板測試）
作業系統：Windows XP SP3 32bits
驅動程式：Xtreme-G 8.8

首先來驗明正身吧，GV-R485OC-1GH的GPU時脈700MHz，記憶體為993MHz，待機溫度為44度。


該死的2pin風扇，GPU-Z顯示轉數為1RPM...XD。


接下來分別測試3D Mark 03、05、06的版本以及溫度，Vantage版本只能在Windows Vista下安裝DirectX 10才能測試，實在有點可惜。光看CPU就知道分數不會好看到哪裡去，因為3D Mark的成績裡，CPU佔了蠻大的因素，把它當作參考看看就好，遊戲能跑才是最重要的。

在測試過程中，我用CPUID Hardware Monitor紀錄下測試過程中的最高溫度。
底下所有測試解析度皆是開到我的螢幕的最大解析度：1280*1024，反鋸齒8AA全開，Texture Filtering為Anisotropic。

3D Mark 03分數：14332
最高溫度：62度。


3D Mark 05分數：11757
最高溫度：60度。


3D Mark 06分數：8157
最高溫度：61度。


本來想測試Crysis Benchmark的，結果沒想到執行了之後才發現，竟然要安裝遊戲才能測試？靠腰..我哪來的遊戲阿，只好等有機會再來看看了...0rz。

接著最硬的FurMark燒機來啦，模式為BenahMarking，解析度為1280*1024，同樣也是開8AA，設定如下圖：


跑完之後溫度最高到61度，後來又經過了幾次更長時間的測試，溫度幾乎不會超過65度，看來技嘉的拉麵風扇壓制4850晶片的極限就在65度左右了，還不錯。


最後為了親自體會一下溫度倒底有多高，人體測溫機上陣啦，本大爺我親自用手直接去觸摸散熱器的本體，在待機狀態下感覺溫溫的而已，而且由於有風的關係加上房間很熱，有些地方反而會感覺不出來。但是一旦跑全速之後，溫度馬上就感覺的出來了，可以用"熱"來形容了，不會到非常熱的地步，但是我的手不敢在散熱器本體上放太久，而且把手移到主機後方，一股熱風一直不停的吹出來，冬天的話拿來當暖爐一定讚的啦！！

至於遊戲測試，那些知名遊戲我手上一個都沒有，應該是有..但不知道丟到哪去了，改天有機會再來測試看看吧，來去研究一下驅動程式和Rivatuner。

read more...

技嘉GV-R485OC-1GH入手啦！！

在

苦等了微星的蒼天特仕版（v151）2個多月後，以及後來才知道精星"可能"不打算出的型號為GC-ZHD485PG3-E3（BBA卡+Zalman風扇+OC超頻版本）後，我買了技嘉的非公版GV-R485OC-1GH啦。話說當初會買，是因為在我們這種鳥不拉屎的鄉下地方，竟然有實體店面有這張卡的現貨，而且願意以6400元的價格賣給我，我知道網拍大約6000出頭，原價屋報價6300左右，之前還一度偷漲到7000多元，我知道我買貴了幾百元，但是我們這種鄉下地方真的不像台北那樣方便，加上店員態度不錯，所以貴這幾百塊真的算值得啦。

可是最幹的是..過了2天後，微星蒼天特仕版竟然出了現貨而且還可以單買了，幹你媽的B....，我等了2個多月..微星你這樣子對我..凸，不過沒關係..差了一點錢買到了1GB的版本也算是賺到了，雖然512MB和1GB的差別在1900*1200高解析度和8AA的情況下，效能才有明顯差異，而且我的螢幕是19吋的，開不到這麼高的解析度，可是已經確定明年7月左右我就會換螢幕啦，也是因為這個原因我選了1GB版本。

底下是官網的圖片。
官網資料介紹：點我。




外盒包裝圖，可以看到保固貼紙在上面，因為我還沒有貼在顯卡上。


內附配件以及說明書和光碟，大致上跟公版一樣，其實我現在看到每個板本的配件好像都差不多，都是那幾個。


主角出現啦！！很明顯的是非公版佈線，採用的是Zalman風扇。


Zalman風扇特寫，散熱器上寫的是VF830。


供電部份採用的是6相供電，比公版好很多的地方，根據"技嘉"的說法，可以增加4850供電的穩定性，供電平均分擔到6相，每一個供電模組的溫度也會"較低"。


幹你媽的，2 Pin的風扇，真搞不懂..高階卡風扇砍到2 Pin是能省多少成本，如果風扇全速運轉很吵的話，我就去把技嘉給OO你的XX..呵呵。


全固態電容。


這電容資料我找了很久，先假設不是"台製"的固態電容的話，而是日製的全固態電容，那麼很有可能的是Fujitsu（富士通）製造的，引用PTT的suzukihiro大大的介紹：

Fujitsu電容介紹

官網連結：http://0rz.tw/8b4GP
電容圖片：
http://0rz.tw/d94DV 黃皮包裝固態電容
http://0rz.tw/984ES 紅頭固態電容
推薦型號:RE，SE系列

Fujitsu電容算是最近開始發光發熱的，雖然之前就有板卡零星的出現，但是已經打開相當大的市場，光從最近ASUS採用的電容來看，Fujitsu佔了很大部分，因為其SE和RE兩大產品線，都是新型態的固態電容，近來在高階顯示卡以及主機板上，已陸續打開市場，而Fujitsu電容，雖然在包裝上並沒有標廠牌，但是卻是相當好認，因為直插式的RE系列為黃色PVC包裝，至於SMD貼片式的SE系列，雖然沒有PVC外皮，但鋁殼上的字樣皆為紅色標記。

另外，日本的電容網站也有資料：請點我。
往下找就看到了。

當然，如果又是為了省成本，用是台製的固態電容的話，我就把技嘉給OO你的XX..呵呵。

1GB的版本用了8顆的GDDR3記憶體，顆粒是Samsung 825（K4J10324-HJ1A00）。


輸出介面跟公版一樣，雙DVI+Display Port，沒有原生HDMI，必須用轉接頭，都有用塑膠防塵蓋保護。


最後，還是來給記憶體跟供電模組上散熱片吧，為了保險起見...。


今天就先這樣子了，明天再來上機測試吧，我累了...

read more...

重新安裝新的相關文章功能了

終

於丟掉之前的那一個舊版的『相關文章』功能，當初是因為安裝簡單，只要一個步驟加一段語法就解決，現在改換成Realtrix版本的，一樣來寫個筆記吧～

Step. 1
這一段語法原作者是採用外部連結js檔的方式，不過我把它直接寫到模板裡面，將下面的語法放到</head>之前。

語法

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<font size="2"><a href="http://realtrix.blogspot.com/2008/09/create-related-posts-plugin-for-blogger.html">Related Posts Plugin by Realtrix</a></font>');
}
//]]>
</script>

Step. 2
接著加入CSS定義，將下列的語法放到<b:skin><![CDATA[和]]></b:skin>之間就行了。

CSS語法

#related-posts {
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 12px Verdana;
margin-bottom:10px;
}

#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}

#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}

#related-posts a {
color : #054474;
font-size : 12px;
text-decoration : none;
}

#related-posts a:hover {
color : #054474;
text-decoration : none;
}

#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}

#related-posts ul li {
display : block;
background : url("http://nekki1409.890m.com/blogger/newconcept_bullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Step. 3
最後將要下列語法放在想要顯示的地方，一般來說放在文章的後面，找到<p><data:post.body/></p>之後，把整段語法放到它的後方。

語法

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>


參考網站：How to Show Related Posts / Articles in Blogspot Blogs - Create Related Posts Plugin / Widget for Blogger.


read more...

來幫Google Chrome更換面板吧

G

oogle Chrome都推出這麼久了，也已經有一堆高手網友做出了一堆新的面板給Chrome更換，目前大約有30幾個面版，可以到討論區看看。

面板下載討論區：http://chromespot.com/index.php/board,12.0.html

安裝方法：
下載面板檔案之後，裡面會有default.dll，將舊的default.dll替換成新的就行了。
記得先開啟檔案總管，到『工具』→『資料夾選項』→『檢視』，勾選『顯示所有檔案和資料夾』才能看到default.dll這個檔案。

default.dll檔案位置：
C:\Documents and Settings\username\Local Settings\Application Data\Google\Chrome\Application\version number\Themes

如果是Vista的使用者，檔案位置稍有不同：
C:\Users\username\AppData\Local\Google\Chrome\Application\version number\Themes\



如果覺得這樣很麻煩的話，當然有高手寫出了替換工具囉，這工具叫做XChrome，目前版本是Beta Release 5，請到這裡下載。


下載完XChrome BR5解壓縮後點選Xchrome.exe，按下『Theme Packer'，點選我們要安裝的面板，第一個是選擇default.dll檔案，第2個是選擇面板的圖片，這樣就能將面板裝入XChrome BR5里。


接著回到主程式的視窗，在左邊選擇要安裝的面板，然後在右邊按下『Install Theme'就行了。


想必大家一定很懶的這樣安裝，沒問題當然有懶人包，推薦由B33T大大製作，已經包涵了23種經過確認相容於XChrome BR5的面板，請到此下載。

要注意的的是，裡面的面板都是已經封裝成XChrome BR5能夠讀取的ThemePack.exe格式，只要將它解壓縮後放到XChrome BR5里面的Theme資料夾裡，重新開啟Xchrome程式就會自動讀入面板，簡單、方便、又好用。

至於如果想要自行設計面板的話，可以用Chromium Theme Creator這隻程式，不過我沒有興趣，因為美術細胞不好XD，想研究的大大們可以參考看看。

Chromium Theme Creator討論區：http://chromespot.com/index.php?topic=573.0




Google Chrome Theme討論區：http://chromespot.com/index.php/board,12.0.html


read more...

Wordpress Fun-從Wordpress轉來的美型模板

還

記得沒多久前，我才在Smashing Magazine網站看到它釋出這個漂亮的Wordpress模板，沒想到隔沒多久GosuBlogger馬上就將它轉到Blogger平台了，感謝大大們的努力，大家開始膜拜他吧！！

Wordpress Fun Blogger 模板
Demo：http://wordpressfun.blogspot.com/
下載：http://rapidshare.com/files/144084012/wp-fun.xml





使用前的注意事項：

1.關於Wordpress Fun的結構，原作者寫得很奇怪，Wordpress Fun在左側有一個側邊欄，底部有三個可以放置網頁元素的地方，但是他說底部的三個網頁元素是鎖死的，預設用來放置Blogroll（投票功能）、Recent posts（最新文章）和Labels widget（標籤），但是我實際安裝了一下，發現並沒有這樣的限制，這三個網頁元素是可以自行使用更改的。

2.原作者在左邊的側邊欄放置了一個Google Adsense，顏色風格已經改的很適合這個模板的樣式，有Google Adsense帳號的人可以自由發揮。

3.將e-mail修改成自己的，尋找下列的語法，將紅色改成自己的E-mail帳號即可，不過不建議，避免讓自己的信箱被機器人掃到，變成垃圾信箱。

語法

<li class="email"><a href="mailto:YOURMAIL">Email</a></li>

至於修改左邊的導覽列也是同樣的道理，搜尋下列的語法修改紅字的部份就行了。

語法

<ul>
<li id="current"><a linkindex="25" class="home" href="/">Home</a></li>
<li><a linkindex="26" class="about" href="/">About</a></li>
<li><a linkindex="27" class="archives" href="/">Archives</a></li>
<li><a linkindex="28" class="contact" href="/">Contact me</a></li>
</ul>

最後原作者需要人捐錢給他買新電腦，只要1美金就行了，可惜我沒有帳戶，不然我一定捐給你的啦！！


參考網站：Wordpress Fun Blogger Template


read more...

Blogger推出新的追蹤網誌（follower）功能了

在

Blogger Buster大大的部落格看到，原來Blogger又推出新的功能了，這功能沒去注意的話還真的不容易發現，英文名稱是follower，但我看他中文是翻成追蹤網誌，好吧..follower這名詞要翻的很貼切也不容易啦！沒有翻成跟蹤者算不錯了～疑..又不是尾行XD。

目前只有少部份的使用者能夠使用，在未來幾個星期內會全面開放，所以不要心急喔！追蹤網誌的功能特色如下：

1. 可以讓你喜歡的部落格主人知道你追蹤了他的網誌，表示你是他的忠實讀者之一，大家可以互相交流。
2. 可以選擇公開或匿名追蹤，選擇向部落格主人公開或隱藏你的身份，阿..人家不好意思啦。
3. 可以在後台看到追蹤你部落格的人數（忠實讀者）有多少，滿足你的虛榮心啦！
4. 可以將你的忠實讀者頭像（網頁元素）放到部落格上，讓大家知道是哪些人，讓你的虛榮心更加滿足XD。
5. 在後台可以立即知道你追蹤的部落格發表了什麼新文章，就算不是Blogger系統的部落格也可以加入喔。
6. 可以將追蹤部落格的名單匯入到Google Reader，畢竟這樣讀文章比較方便。
7. 匯入後會在Google Reader裡建立一個"Blogs I'm Following"的資料夾，專門整理你追蹤的部落格。

那麼我要如何開啟這個新功能呢？最簡單的方法就是去追蹤別人的部落格啦，我追蹤了Blogger Buster大大的部落格後，在後台的下方→『我的閱讀清單』裡就出現了『我正在追蹤的網誌』功能啦。

我推薦2個追蹤網誌的連結，如下：
- Blogger Buster：點我。
- 挖哩勒～胡說八道（靠！是誰這麼不要臉！）：點我。



點選之後會出現下面的畫面，如果沒有出現代表你的部落格Blogger還沒有替你弄好喔，請在等一陣子，一般來說應該都可以了，選擇要公開還是匿名追蹤，然後點選『Follow'就行啦。


接著回到後台之後就會看到最下方的『我正在追蹤的網誌』，你也可以點選『管理』，重新選擇要公開或是匿名追蹤，甚至是刪除。


那麼我要怎麼知道自己的部落格追蹤網址是什麼呢？很簡單，首先請先找到你的部落格ID，在自己的部落格里點一下『新文章』，進入發表文章的頁面後，然後往上看你的網址列，紅字部份就是部落格ID啦。

網址列

http://www.blogger.com/post-create.g?blogID=5586986389269109409

將自己的ID加到下面的格式裡就是你的部落格追蹤網址啦。

部落格追蹤網址格式

http://www.blogger.com/follow-blog.g?blogID=填入你的部落格ID

訂閱別人的部落格。
我們還可以將別人的部落格加到這個『我正在追蹤的網誌』裡，但是繁體中文的介面功能還不完整，目前還看不到這功能，所以請將語言改成『English'，繼續下面的操作。


改成英文之後，這時候已經可以看到我的部落格後面已經顯示了『1 Follower'，是誰呢？當然是不要臉的我啦！哭哭...


回到下面的『我正在追蹤的部落格』，這時已經顯示成『Blogs I'm Followering'，多出一個『Add'按鈕了，點選之後加入你要訂閱的部落格Feed或是網址就行了。

這裡我故意挑一個非Blogger系統的部落格來試試，以『重灌狂人』的WordPress系統為例，點選『Add'之後，出現訂閱的畫面，輸入網址之後就會自動抓取『重灌狂人』的Feed，你也可以從Google Reader裡匯入。


同樣也可以選擇公開或是匿名追蹤。


這樣就可以將『重灌狂人』加到『我正在追蹤的部落格』裡了。

那麼公開和匿名到底有什麼差別呢？這就是Blogger想要搞的玩意啦，當你匿名追蹤別人的部落格時，其實就跟用Google Reader或是其他RSS閱讀軟體訂閱別人的部落格文章是一樣的道理，部落格主人無法詳細的知道這些讀者是誰，無法主動的跟這些讀者互動，只能等讀者留言後被動性的回覆。

但是選擇公開了之後，部落格主人可以知道讀者是誰，透過Blogger內建的Follower網頁元件參訪讀者的部落格，進一步的交流與互動，建立起Social-社群互動的功能，跟我部落格下方的MyBloglog和台灣製的MyIcon是類似的想法與功能，而且此功能並不侷限在Blogger平台而已，其他平台以後以可以藉由第三方的API來加入這個功能，Google的Friendconnect就是一個很好的例子，看來Google對於這塊版圖野心很大。

那麼要如何將我的追蹤者（Followers）放到部落格里呢？很簡單，到『版面配置』→『網頁元素』→『增加小工具』，就會看到『追蹤者』這個玩意了。


可惜的是，我不管改語系或是到Draft Blogger裡都無法新增這個功能，看來Google還沒有把我的部落格加入，唉..我也好想玩看看，快點完成吧！Blogger！


參考網站：Using Blogger's New Followers Feature


read more...

Web2PDF-將網頁轉成PDF格式保存

替

部落格加入了這個功能，Web2PDF提供了讓你將網頁轉成PDF格式的功能，方便保存你喜歡的網頁，官方沒有試用功能，必需註冊後才能使用，申請之後將語法放到部落格上，點了按鈕就會自動轉到Web2PDF官網，轉換成PDF需要一點點時間，之後就可以下載了。

可惜的是..轉換後的結果慘不忍睹就是了...


官網：http://savepageaspdf.pdfonline.com/


read more...

動物界令人動容的愛情故事

這

系列照片是在烏克蘭共和國所拍攝的，在美國及歐洲據說有百萬人看了之後，不禁留下了眼淚，拍攝者以一般的價錢將照片賣給法國最大的報社，據說當天所有的報紙通通銷售一空。

看完了之後，腦海裡自動的想像了當時的畫面，想必公鳥一定很傷心的哀叫吧，人類也幫不了什麼，這是大自然的法則。

一隻受傷的母鳥躺在地上無法動彈。




公鳥帶來了食物餵給母鳥吃。


即使如此，母鳥還是死了，但是公鳥不死心，依然想要移動她的身體。


公鳥在一旁為母鳥的死亡而哀號不已。


公鳥依然不死心的在一旁哀叫。


最後他明白了她的死亡，只能在她的屍體旁邊陪伴著她。

read more...

Google Chrome 內藏的好用小技巧

G

oogle Chrome 雖然走的是簡約風格，能玩能設定的選項也不多，但其實只要多利用這些小技巧，就能方便快速的使用它，只是要多花點心思記住倒是真的。

1.在工具列的前一頁/後一頁按鈕上點滑鼠右鍵，就能找到之前的瀏覽紀錄。


2.用快速鍵Ctrl+Shift+T就能叫出之前關閉的分頁。

3.在網址列輸入『?』就能馬上知道現在預設的搜尋引擎是什麼？




4.在網址列可以作簡單的單位轉換和數學運算，例如：輸入『5 m in cm'，就會得到5公尺等於500公分的結果。


5.可以拖曳留言視窗，加大留言空間，底下以Blogger為例：


6.觀察網頁的內容及載入速度，先到要觀察的網頁之後，在網頁上點選右鍵按『檢查元素』，切換『Resources'分頁，然後重新載入就可以觀察該網頁的載入情況。


7.可以把分頁拖曳成一個獨立的新視窗，當然也可以組合回去囉。

8.檔案下載完之後，可以直接拖曳出來馬上找到檔案，可是原來的檔案並不會消失，等於是多複製了一份。

9.只要是支援Open Search的網站，都可以加入Google Chrome的搜尋列裡。以Friendfeed為例，瀏覽Fiendfeed之後，在網址裡輸入『Friendfeed'，其實只要輸入前面幾個字，就會在網址列後面出現『按一下tab以搜尋...』，如下：


按下『tab'就可以搜尋Friendfeed網站了。


如果要編輯搜尋引擎的話，在網址列按右鍵就行了。


你也可以自行增加好用的搜尋功能，例如：

維基百科搜尋
名稱 - Wikipedia
關鍵字 - wiki （在網址列輸入的文字）
網址 - http://en.wikipedia.org/wiki/Special:Search?search=%s

Google 翻譯
名稱 - Google Translate (English)
關鍵字 - trans （在網址列輸入的文字）
網址 - http://translate.google.com/translate?u=%s

10.想加入Google Chrome的開放原始碼計畫嗎？chromium是為Google Chrome設計的開放原始碼計畫，只要到伺服器下載mini_installer.exe來安裝，就能進行編碼了。

下載位置（越上面版本越新）：點我


參考網站：Google Chrome Tips


read more...

Opera+Tor=OperaTor

用

Tor來當作隱私瀏覽的工具好像沒什麼稀奇了，不過有人把Opera跟Tor結合在一起，還作成綠色可攜式版還真是蠻特別的，有需求的話也是可以抓來用，使用方法跟Opera一模一樣，只是用Tor的瀏覽速度實在是...




參考網站：http://archetwist.com/en/opera/operator


read more...

美型Blogger模板-Notepad Chaos

又

出現了新的美型Blogger模板了，整個設計的風格真是有美術的氣息阿，稍微看了一下..用的應該也是官方的標準語法，也就是標準的模板，應該不會出現奇怪的問題。

Notepad Chaos的預覽圖
Demo 展示部落格：http://notepadchaos.blogspot.com/
檔案下載：http://rapidshare.com/files/142625883/notepadchaos.xml





安裝時的注意事項：

1.某些區塊原作者封印了，例如：最新文章（Recent Post）和分類（categories），這些地方是無法編輯的，在連結區塊（Link）的下方才能開始增加網頁元素。


2.原作者也安裝了Blogger新的留言內嵌的功能，記得登入Blogger Draft，到『設定』→『意見』→『意見表單位置』，改成『已內嵌下列文章』才能正確顯示。


3.上傳模板之後，如果時間格式顯示錯誤（undefined），記得到『設定』→『格式』→『時間戳記格式』，改成『星期五,九月 05,2008』這種格式，選第4個就對了。


4.在Blogger預覽的模式下，是看不到『最新文章』區塊的內容的，儲存後才看的到。

5.要修改導覽列文字的話，下載模板之後搜尋『id='menu-holder'』，就可以找的到了，請自行修改成喜歡的內容。

導覽列語法

<div id='menu-holder'><ul id='menu'>
<li id='home'><a href='/'>Home</a></li>

<li id='about'><a href='/'>About</a></li>
<li id='archives'><a href='/'>Archives</a></li>
</ul>
</div>


參考網站：Notepad Chaos Blogger Template


read more...

Google Chrome 隱藏的內建設定功能

G

oogle大神推出新的瀏覽器 - Google Chrome這好像不是什麼新聞了，已經一堆人在分享相關的使用心得和設定，我當然也有抓下來玩玩看，不過沒有比Firefox給我的震撼大，因為Firefox好玩的擴充套件太多了。

同樣地，Firefox可以用『about:config'叫出內建的設定功能，Google Chrome當然也有，而且還蠻有趣的，這篇詳細的列出Google Chrome幾個內建設定的功能。





about:version
顯示Google Chrome的版本。


about:plugins
顯示Google Chrome的內建Plug-in（外掛程式），預設裝有ActiveX Plug-in、Google Gears 0.4.17.0、Shockwave Flash..等等。


about:cache
顯示暫存的檔案內容，要注意的是目前Google Chrome並沒有限制暫存空間大小的功能，所以建議請定時清除。


about:memory
不用說，當然是顯示記憶體的使用量囉～


about:stats
顯示內建的計數器和計時器，當然也包含V8，about stats下面那句『Shhh! This page is secret!』真是太有趣了，哈哈。


about:histograms
這部份不太懂..，有點像是顯示Google Chrome內部演示法的柱狀圖。


about:dns
紀錄10個最常去的網站所需要的時間，可以在『選項』→『進階選項』→『使用DNS預先擷取以增進網頁載入效能』取消掉這功能。


about:network
可以追蹤目前Google Chrome所使用的I/O狀態，先點選『Start I/O tracking'，然後再開新分頁瀏覽網站，就可以看到使用狀態了。


about:crash
自己試試看，又是Google留下的另一個彩蛋XD。不過要是真的當機的話，會有時間看到這個畫面嗎？哈哈...


about:hang
這功能的意思是..當某個分頁出現『Hang'的情況時，也就是這個分頁雖然有在運作，但無法接受任何指令而出現『無法回應』的情況，在網址列輸入『about:hang'可以關掉這個分頁而不影響其他分頁的運作。

about:internets
這又是Google留下的彩蛋，在惡搞2個有名的網路名詞，分別是Internets和Series of tubes，在網址列輸入之後，看看分頁名稱顯示什麼吧！


不過我還是不懂這有什麼含意就是了，有請高手解答，附上維基百科的連結。
Series of tubes：http://en.wikipedia.org/wiki/Series_of_tubes
Internets：http://en.wikipedia.org/wiki/Internets


參考網站：Google Chrome's about: Pages


read more...

Blogger底下，Page Title和Page Name的差異

很

早之前就拜讀到這位大大寫的文章，一直想好好研究一下，當然..按照慣例，我把它給忘的一乾二淨了XD，現在好不容易想起來，好好的給他玩了一下，但是實際的效果要等個一陣子才能用Google來檢查看看。

這篇雖然是在介紹Page Title和Page Name這2個標籤在Blogger底下的差別，但是多少也跟SEO有關，也就是讓讀者搜尋更容易找到你的文章，更加的一目瞭然。

什麼是Page Title和Page Name？

在一般的網頁裡，Page Title和Page Name同樣指的都是訪客正在訪問文章的標題或是網站名稱，抬頭看一下你的瀏覽器最上方吧，一般來講顯示的就是Page Title或是Page Name。





在Blogger底下，Page Title的顯示方式？

但是在Blogger底下，Page Title顯示的方式就不太一樣了，Blogger會先顯示部落格名稱，然後右邊再顯示文章標題。以殺手級留言系統-Intense Debate這篇文章為例，用Firefox瀏覽標題列顯示如下：



用Google搜尋的話，也是先顯示部落格名稱+文章標題的格式顯示，如下：


雖然這種顯示方式沒有什麼大問題，但現在假設有個路人甲用Google搜尋了Intense Debate這個關鍵字，Google一下子列出了10個搜尋結果，然後看到我的文章標題第一個顯示的是"挖哩勒～胡說八道"，結果他還沒看到後面的Intense Debate關鍵字，以為是篇奇怪的文章（抱歉，因為我的部落格名稱很奇怪XD），連點也不點就跑掉了，白白的損失了一位訪客，這位路人甲也沒看到這篇文章，這正是Blogger這種顯示文章方式的盲點。

所以最好的方式是，在搜尋結果一開始就顯示文章標題，馬上吸引訪客的目光，不讓他錯失了這篇文章，這也是為什麼我們要用Page Name而不用Page Title的原因。

修改的方法很簡單，我們要用Blogger新的標籤blog.pageName來取代舊的blog.pageTitle標籤，新的blog.pageName標籤可以只顯示文章標題而不顯示部落格名稱。

同樣地，雖然修改方法很簡單，但還是請記得備份模板。

Step. 1
下載模板後，搜尋以下的語法，應該在模板的前幾行就能找到了。

語法

<title><data:blog.pageTitle/></title>

用下面新的語法取代就行了，以後就只會顯示文章的標題而已。

語法

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

那如果我還是想要顯示部落格名稱的話呢，很簡單..增加紅字的部份就行了，紅字的部份依自己需求修改。

語法

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> by 挖哩勒~胡說八道</title>
</b:if>

顯示的結果如下：


至於Google的搜尋結果，舊的文章還是以舊格式顯示，因為還是Cache到舊資料，明天再來看看這篇文章顯示的結果有沒有改變吧。


參考網站：Page Title vs Page Name in Blogger


read more...

讓側邊欄的網頁元素可以進行拖曳

之

前發現到完整版、可以拖曳網頁元素的iTheme模板之後（參考文章：完整系列的iTheme部落格模板推出囉！！），就一直很喜歡這個拖曳的功能，今天看到有大大寫出詳細的安裝方法了，稍微測試了一下..好像又跟我的模板不太合的樣子..囧，不管了..等週末有時間再來好好研究一下。

Demo 部落格
iTheme Techno Blogger Template (2 Column)：http://itheme2.blogspot.com/
cooking blogger template：http://oz-bigblue.blogspot.com/



Step. 1
下載模板之後，找到CSS定義區，在<b:skin><![CDATA[和]]></b:skin>之間插入下面的CSS語法。

CSS語法

/****************************************************************
Docking Boxes core CSS: YOU MUST NOT CHANGE OR OVERRIDE THESE
*****************************************************************/
.dbx-clone {
position:absolute;
visibility:hidden;
}
.dbx-clone, .dbx-clone .dbx-handle-cursor {
cursor:move !important;
}
.dbx-dummy {
display:block;
width:0;
height:0;
overflow:hidden;
}
.dbx-group, .dbx-box, .dbx-handle {
position:relative;
display:block;
}
/****************************************************************
avoid padding, margins or borders on dbx-box,
to reduce visual discrepancies between it and the clone.
overall, dbx-box is best left as visually unstyled as possible
*****************************************************************/
.dbx-box {
position:relative;
margin:0;
padding:0;
border:none;
clear: both;
z-index:1000;
}
/****************************************************************
otherwise, do what you like :)
*****************************************************************/
/* group container(s) */
.dbx-group {}

/* handles */
.dbx-handle {
z-index:1000;
}

/* handle cursors are in a class of their own
so they only get applied if the script is supported */
.dbx-handle-cursor {
cursor:move;
}

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
display:block;
width:18px;
height:19px;
overflow:hidden;
position:absolute;
background:none;
top:6px;
right:23px;
text-indent:-50px;
text-decoration:none;
}

a.dbx-toggle-open, a.dbx-toggle-open:visited {
background:none;
}
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
background:none;
}
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
background:none;
}
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
background:none;
}

/* keyboard navigation tooltip */
.dbx-tooltip {
display:block;
position:absolute;
margin:36px 0 0 125px;
width:185px;
border:1px solid #000;
background:#ffd;
color:#000;
font:normal normal normal 0.85em tahoma, arial, sans-serif;
padding:2px 4px 3px 5px;
text-align:left;
}
* html .dbx-tooltip { width:176px; }

/* use CSS2 system colors in CSS2 browsers
but not safari, which doesn't support them */
*[class="dbx-tooltip"]:lang(en) {
border-color:InfoText;
background:InfoBackground;
color:InfoText;
font:small-caption;
font-weight:normal;
}
/* inner content area */
.dbx-content {
position:relative;
overflow: hidden;
width:183px;
}
/* toggle state of inner content area */
.dbx-box-closed .dbx-handle {}
.dbx-box-closed .dbx-content {
display:block;
height:0px;
overflow:hidden;
}
.dbx-box-closed .dbx-content * {
display:none !important;
}

/* additional clone styles
.dbx-clone {
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
filter:alpha(opacity=80);
} */

Step. 2
在]]></b:skin>的後面繼續加入底下Javascript語法，當然要放在</head>之前（紅字部份的語法檔案請放到自己的網頁空間裡）。

Javascript語法

<!--[if IE]>
<style type="text/css">
#sidebar .Label a.dbx-toggle, #sidebar .Label a.dbx-toggle:visited {top:30px !important; right:20px !important;}
</style>
<![endif]-->

<!-- Sidebar docking boxes (dbx) by Brothercake - http://www.brothercake.com/ -->
<script src='http://www.webpagedesign.ws/jeans2c/dbx.js' type='text/javascript'/>
<script type='text/javascript'>
function dbxInitiate(gid){
container = document.getElementById(gid);
if(container == null) {
return;
}
eles2 = container.getElementsByTagName(&#39;h2&#39;);
for(var i=0;i&lt;eles2.length;i++){
eles2[i].className = &#39;dbx-handle&#39;;
};
eles = container.getElementsByTagName(&#39;div&#39;);
for(var i=0; i&lt;eles.length; i++){
if(eles[i].className == &#39;widget-content&#39;){
eles[i].className = &#39;dbx-content&#39;;
}
if(/widget/i.test(this.eles[i].className)){
eles[i].className += &#39; dbx-box&#39;;
}
};
};
window.onload = function()
{

dbxInitiate(&#39;sidebar&#39;);

//initialise the docking boxes manager
var manager = new dbxManager(&#39;main&#39;); //session ID [/-_a-zA-Z0-9/]

//create new docking boxes group
var sidebar1 = new dbxGroup(
&#39;sidebar&#39;, // container ID [/-_a-zA-Z0-9/]
&#39;vertical&#39;, // orientation [&#39;vertical&#39;|&#39;horizontal&#39;]
&#39;7&#39;, // drag threshold [&#39;n&#39; pixels]
&#39;no&#39;, // restrict drag movement to container axis [&#39;yes&#39;|&#39;no&#39;]
&#39;10&#39;, // animate re-ordering [frames per transition, or &#39;0&#39; for no effect]
&#39;yes&#39;, // include open/close toggle buttons [&#39;yes&#39;|&#39;no&#39;]
&#39;open&#39;, // default state [&#39;open&#39;|&#39;closed&#39;]
&#39;open&#39;, // word for &quot;open&quot;, as in &quot;open this box&quot;
&#39;close&#39;, // word for &quot;close&quot;, as in &quot;close this box&quot;
&#39;click-down and drag to move this box&#39;, // sentence for &quot;move this box&quot; by mouse
&#39;click to %toggle% this box&#39;, // pattern-match sentence for &quot;(open|close) this box&quot; by mouse
&#39;use the arrow keys to move this box&#39;, // sentence for &quot;move this box&quot; by keyboard
&#39;, or press the enter key to %toggle% it&#39;, // pattern-match sentence-fragment for &quot;(open|close) this box&quot; by keyboard
&#39;%mytitle% [%dbxtitle%]&#39; // pattern-match syntax for title-attribute conflicts
);
};
</script>

Step. 3
最後一個步驟，找到你放置網頁元素的側邊欄語法，一般語法如下：

語法

<b:section class='main' id='sidebar' showaddelement='yes'>

將class後面的main改成dbx-box，如紅字部份：

語法

<b:section class='dbx-box' id='sidebar' showaddelement='yes'>

如果不行的話就改成dbx-group，如下：

語法

<b:section class='dbx-group' id='sidebar' showaddelement='yes'>


參考網站：Drag-Drop Sidebars Hack For Blogger


read more...