挖哩勒~胡說八道: 八月 2008

更換新的BLogger導覽列囉！！

我

把舊的導覽列改掉啦，換上新的感覺看起來比較爽、比較順眼，也不會有Firefox、IE兩者觀看下，位置會跑掉的問題，順手作個筆記記下來，以後可以隨時查看看。

首先這是舊的版本，位置在部落格文章區塊的旁邊。

Step. 1
先在<b:skin><![CDATA[和]]></b:skin>語法之間插入以下CSS語法，定義導覽列的位置（可依需求變更語法）。

語法
/*-- mininav start--*/
#mininav{
position:fixed;
text-align:left;
margin-left:-26px;
margin-top:217px;
}

* html #mininav{ /*IE6 only*/
position:absolute;
}

#mininav a img{
opacity:.8;
-moz-opacity:0.6;
filter:alpha(Opacity=80);
}

#mininav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}

* html #mininav a img{
filter:alpha(Opacity=100);
}

#mininav img{
margin-bottom: 5px;
}

* html .mininav{
margin-bottom: 7px;
}

Step. 2
在<body>語法的下面，填入以下語法，讓導覽列一開始就載入（連結和語法當然自己隨意修改）。

語法
<div id='mininav'>
<span>
<a href='連結' style='border:0;' title='標題'><img alt='標題' class='mininav' src='圖片連結'/></a>
<br/>
<a href='連結' rel='external' style='border:0;' title='訂閱我的文章'><img alt='訂閱我的文章' class='mininav' src='圖片連結'/></a>
<br/>
</span>
........其餘以此類推
</div>

這是新的導覽列，語法較簡單，因為是附在邊界比較不會有位置的問題。

Step. 1
在<b:skin><![CDATA[和]]></b:skin>語法之間插入以下CSS語法，定義導覽列的位置。

CSS語法
.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

Step. 2
將下面語法放在</body>的前面，最後才會載入。

語法
<div class='fixed_menu'>
<a href='連結' title='Home'><img src='圖片連結'/></a>
<a href='連結' title='Mail me'><img src='圖片連結'/></a>
<a href='連結'><img src='圖片連結'/></a>
.....其餘以此類推....
</div>


參考網站：Sliding Menu Bar Widget for Blogger

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期六, 八月 30, 2008

這篇文章讓你覺得：

Comments

我心中最理想的Blogger Archive日曆外掛

看

了好多的版本，終於找到符合我心中希望的Blogger Archive日曆功能了，之前我最喜歡的是這個Yahoo版本的日曆，請看這篇文章：來替部落格加個歸檔文章日曆吧或是Yahoo! UI Library: Calendar。可惜缺點是：檔案太大、功能無法自訂、載入時間太久..還有一些雜七雜八的缺點，最後不得不放棄了，後來看了Abin大大的部落格和LVChen大大的部落格，2個人都做了很棒的Blogger Archive日曆外掛，可惜底下無法顯示當月的文章，也無法用下拉式選單選擇更久以前的舊文章，後來終於在phydeaux3大大的部落格找到我想要的功能了。

同時推薦：
LVCHEN大大的日曆外掛：日曆文章列表已更新
Abin大大的日曆外掛：結合發表文章的日曆模組 (Feed Calendar)

看了phydeaux3大大的日曆外掛，總共有4篇文章，依照時間發表以及後來的修改，建議按照順序觀看下列的文章：

1.Blogger Archive Calendar
2.日曆風格的CSS樣式語法
3.日曆的參數設定
4.日曆更新（修正+UTC時區的Bug）

底下是我整理安裝在這個部落格的日曆步驟，更詳細設定還是請參考原作者的文章。

Step. 1
先到『版面配置』→『網頁元素』，新增一個『Blog Archive（網誌存檔）』。

Blog Archive（網誌存檔）的設定如下：

樣式：Flat 清單
存檔頻率：每月
日期格式：原作者是說隨意，我選的是『一月 2006』的時間格式。

PS. 請勿勾選『先顯示最舊的文章』

Step. 2
接著到『網頁配置』→『修改html'，雖然平常我都會建議下載模板來修改，但這次下載模板來修改都會失敗，所以聽從原作者的建議，這次直接在Blogger的後台修改，另外請勿勾選『展開小裝置面板』的選項，直接這樣修改就行了。

首先找到Blogger Archive的語法如下：

Blogger Archive
<b:widget id='BlogArchive1' locked='false' title=''Blog Archive' type='BlogArchive'/>

將上面的語法用下面的語法取代，接著儲存模板，請確定是否會出現錯誤，正常來講當然是不會，如果出現錯誤請重新再來一次。

取代語法
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>

</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead id='bcHead'></thead>



<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>

</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

Step. 3
如果上一個步驟沒錯，請繼續下個步驟，在]]></b:skin>和</head>之間插入以下Javascript語法，同樣儲存確定是否會出現錯誤。

Javascipt 語法

<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var link = entry.link[0].href;
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>

以上語法的參數設定如下，可以自行修改或是參考原作者的參數設定頁面：

設定
var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
圖片位置，請放到自己的空間或是用自己喜歡的圖片即可。

var bcLoadingMessage = " Loading....";
Loading可改成自己喜歡的文字，例如：載入中...

var bcArchiveNavText = "View Archive";
View Archive也同樣可以改成喜歡的文字，我是改成"選擇月份"

var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
這是選擇文章的箭頭符號，也可以用CSS語法改成自己喜歡的圖片，我後來才知道那是轉碼過的...

var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
日曆上面顯示星期幾的文字，我建議不要去改

Step. 4
改完之後日曆應該就會顯示出來了，當然我們還要用CSS語法來美化一下，作者提供了幾個樣式讓大家參考：樣式頁面。

找到喜歡的樣式之後將CSS語法加到<b:skin><![CDATA[和]]></b:skin>之間就行了。

我的CSS樣式語法
/* Calendar
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #fff;padding:2px;margin:10px 0 0;}

/* The Archive Select Menu */
#bcaption select {}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #fff; font-family:Tahoma; font-weight:normal;color:#fff;}

/* The calendar Table */
table#bcalendar {border:1px solid #fff;border-top:0; margin:0px 0 0px;width:95%;}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #fff;color:#fff;}

/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:#FFFF99;border:1px outset #000}

/* Table Footer Navigation */
table#bcNavigation {width:95%;}
table#bcNavigation a {text-decoration:none;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}


參考網站：http://phydeaux3.blogspot.com/

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期四, 八月 28, 2008

這篇文章讓你覺得：

Comments

讓Blogger內建上傳圖片功能顯示更大的圖片

之

前研究過Blogger的圖片語法，上傳圖片後縮圖跟預覽圖片的位置是不一樣的，請參考這篇：Blogger上傳圖片的原始碼解析。以及選擇不同圖片大小的選項時（大、中、小），圖片會分別被壓縮成不同的大小，請參考這篇：用jQuery達成最簡單的圖片特效。

沒想到其實Blogger上傳圖片之後，又另外暗藏了一個資料夾的位置，只要小小的修改語法，就可以顯示更大的圖片。

假設一個圖片上傳之後，得到的語法如下：

圖片語法
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_Dgj78EaHx8g/R_4Ge6S_b8I/AAAAAAAAC7I/O1-xjjP7zUY/s1600-h/linux_tux_1.jpg"><img style="cursor: pointer;" src="http://3.bp.blogspot.com/_Dgj78EaHx8g/R_4Ge6S_b8I/AAAAAAAAC7I/O1-xjjP7zUY/s320/linux_tux_1.jpg" alt="" id="BLOGGER_PHOTO_ID_5187590948892143554" border="0" /></a>

將紅色字的s320改成s800就可以顯示更大的圖片了。
礙於圖片太大我就不貼出來了，想要貼大圖片的人可以試試看。

PS.要注意的是，使用Draft Blogger的人，圖片語法預設的路徑是s320-R，同樣的原理改成s800-R就行了。


參考網站：Post Larger Images with Blogger

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期一, 八月 25, 2008

這篇文章讓你覺得：

Comments

Replacer幫你替換Windows底下的.dll系統檔案

在

Windows底下遇到.dll系統檔案要更換是很麻煩的事，但是藉由Replacer這個小軟體很容易就可以達成。

Step. 1
下載Replacer之後，執行Replacer.cmd程式，會出現命令提示字元系統。

Step. 2
將要替換的.dll檔案拖曳到這個程式裡，接著再拖曳新版本的.dll檔案就行了。

Step. 3
要下載系統裡的.dll檔案，這是個不錯的網站。
DLL檔案下載：http://www.dll-files.com/


官網：http://www3.telus.net/_/replacer/

標籤： Software 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期六, 八月 23, 2008

這篇文章讓你覺得：

Comments

不用播放器到哪都能播，MakeInstantPlayer幫你把影片弄成執行檔

有

時候會遇到一些特殊格式的影片，電腦沒有相對應的解碼器的話會無法播放，或是要分享影片給朋友，擔心他不能播放的話就可以使用這套軟體-MakeInstantPlayer。

MakeInstantPlayer可以將影片轉成執行檔，也可以把解碼器一起包進去，不管到哪都能播放，還支援幾個特殊的功能。

操作介面如下：
Source File：來源檔案
Output File：輸出檔案
HomePage：影片播放後自動連線到某網站。（可能會被有心人士拿來散撥惡意程式，需小心）
Splash：播放影片時出現的畫面，支援多種圖檔。

至於下方的設定畫面如下：
FullScrene：全螢幕
Compact：壓縮
Auto Quit：影片播放完自動關閉
Stay on Top：播放程式在最上方
Loop：連續播放
Include Codes：包含解碼器

設定完之後可以先預覽看看，按下『Make it'就大功告成囉！轉檔時間當然是依照你的配備來決定。

不過看到.exe的檔案，然後告訴人家說這是影片檔，我想大家都會以為是病毒吧...Orz。


官網：http://mulder.dummwiedeutsch.de/home/?page=projects#instplay

標籤： Software 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期三, 八月 13, 2008

這篇文章讓你覺得：

Comments

快抓阿，免費ZoneAlarm ForceField一年序號試用

我

發這篇文章的時候，距離截止時間9點鐘剩下不到1小時了，知名防火牆公司ZoneAlarm推出了這套ForceField軟體，我從來沒有聽過這套軟體，看官網簡介是主要是用來加強網路銀行線上交易的安全性，防止被鍵盤側錄軟體給攔截密碼，或是被釣魚網站給欺騙。

管他的，雖然用不到，但只要是免費的抓下來玩玩也不錯，只要寄出你的E-mail就可以得到一年免費試用序號。


活動官網：http://download.zonealarm.com/bin/free/sum/index.html

標籤： Software 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期三, 八月 13, 2008

這篇文章讓你覺得：

Comments

加速Firefox的方法

老

調重談、舊文章重新回顧一下，加速Firefox的方法。

首先在網址列輸入『about:config'，跳出保固的惡搞訊息之後，按下『我發誓，我一定會小心』，開始修改。

尋找以下字串，將『false'改成『True'。

字串
network.http.pipelining 設成 True
network.http.proxy.pipelining 設成 True

然後再尋找以下字串，送出連線要求大概30就好了，太高會造成人家伺服器的負擔。

字串
network.http.pipelining.maxrequests 設成 30

最後按右鍵新增整數值（Integer），名稱設為『nglayout.initialpaint.delay'，數值設成『0』即可。

字串
nglayout.initialpaint.delay 設成 0

標籤： Firefox 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期三, 八月 13, 2008

這篇文章讓你覺得：

Comments

自動將訪客引導到新的網站

這

是個相當實用又簡單的方法，如果有一天部落格換了新的網址或是換到別的地方去了，可以用這方法將訪客自動引導到新的網址去，我記得如果用Blogger自己的Domain name功能的話，Blogger會自己引導的。

Blogger將網址修改成自訂網址的功能在『設定』→『發佈』→『自訂網址』。

Step. 1
下載模板後，在</head>之前加入以下語法。

我是標題
<script>
//<![CDATA[
alert('歡迎各位，本部落格已移至 http://nekki1409.blogspot.com 。幾秒後將自動轉移到新的網址');

window.location.href = 'http://nekki1409.blogspot.com';
//]]>
</script>

說明文字是可以自訂的，網址則改成新的位址。


參考網站：Redirect Users From Old Domain To New Domain - Blogger Hack

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期日, 八月 10, 2008

這篇文章讓你覺得：

Comments

讓留言區塊顯示數字的方法

這

是個可以在Blogger的留言裡，以數字顯示訪客留言順序的Hack，也有點像是論壇裡顯示留言第一樓、第二樓的意思，都是類似的東西。

Step. 1
首先下載自己的模板後，尋找底下的語法，增加紅色字的部份。

語法
<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/> 

<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>

Step. 2
接著在]]></b:skin&gt之前加入底下的CSS語法，這部份能夠自訂的部份比較多，依照你的需求可以變更顯示位置，也可以增加讓滑鼠移過之後，放大字體的特效，請自行發揮創意。

CSS語法
.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

/*由於數字顯示的是留言連結，所以必須強迫加入顏色*/

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}


參考網站：Blogger Hack: Numbering The Comments

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期日, 八月 10, 2008

這篇文章讓你覺得：

Comments

線上觀看北京奧運的方法

這

次的奧運說真的我沒有太大的興趣，就連中華隊的比賽都興趣缺缺，因為主辦國是北京的關係，不過雖然不想看，但還是提供整理幾個線上觀看北京奧運的方法。就在不久前，北京奧運在Youtube上建立了專屬的頻道，可以在Youtube上看到奧運轉撥，不過可惜的是..很多國家都是禁止的，因為為了避免當地轉撥單位的虧損所以才這樣搞，當然也是關於權利金的問題，台灣也是列在中之一。

Youtube 北京奧運頻道：http://www.youtube.com/beijing2008

說到線上收看，當然少不了運用了P2P的網路電視囉，下列這些是有可能會提供轉播的網站，當然會需要安裝特定的軟體。

不想裝軟體的話，FreeTube也是個不錯的選擇，比較知名能運作的頻道如下。

FreeTube網站：http://freetube.110mb.com/

Fox 5
CNBC Awaaz
MTV (Uber, China, Brand New, ect)
ESPN
Toonami
BBC World
CourtTV
C-SPAN 1-3

全球各大新聞網站都會有即時的短片可以看。

USA - http://www.nbcolympics.com/ (NBC)
United Kingdom - http://bbc.co.uk/olympics (BBC)
Australia - http://www.abc.net.au/olympics/ (ABC)
Canada - http://www.cbc.ca/olympics/ (CBC)

標籤： Sport, Web 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期四, 八月 07, 2008

這篇文章讓你覺得：

Comments

超好玩的Firefly-即時跟訪客互動聊天

之

前曾經玩過一個可以跟同頁面訪客留言互動的服務，叫做Thatsmymouse，可以參考這篇文章-Thatsmymouse-有趣的線上訪客滑鼠互動，現在又推出了一個類似的服務，叫做Firefly，剛剛上去玩的時候，把滑鼠游標改成蝙蝠俠，跟外國網友玩起了抓Joke的遊戲，真是超白痴的阿。

進入官網後，按右上方的『View Demo'，在網頁下方就會出現一個工具列，可以觀看歷史紀錄、線上人數，也可以調整時間軸看到前面訪客的足跡。

右邊則是可以登入Twitter，也可以改變滑鼠游標，進階設定可以隱藏游標、關閉特效、隱藏留言等等。

有興趣的人趕快去玩玩吧，如果要加入到部落格里，點選『Add Firefly to Your Site'，同意條款之後，將語法放到</body>前面就行了。如果要管理留言避免別人來鬧的話，到Firefly的管理者（admin）頁面，輸入你的部落格網址和E-mail，就能管理留言了。

例外要注意的是，工具列顯示的方式有5種，官方建議的是用Bar的方式，安裝之後就會在部落格下方出現工具列，顯示線上人數和聊天人數，另外也可以自訂用Flash顯示的方式來執行。


官網：http://www.firef.ly/

標籤： Blogger, Web 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期二, 八月 05, 2008

這篇文章讓你覺得：

Comments

好用的多重樣式標籤外掛

這

是一個能夠將標籤（Label）以三種樣式顯示的外掛，第一種是正常的標籤顯示，第二種是將標籤以選單方式顯示，第三種則是將標籤數依照文章的多少，而改變標籤的字體大小，有點類似標籤雲的方式，但是排列則是按照一般樣式排列。

樣式可以到原作者的部落格參考：http://kennyxu.blogspot.com/

Step. 1
請先到『版面配置』→『網頁元素』裡，移除你的標籤（Label）外掛，接著到模板裡找到側邊欄的網頁語法，如下：

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

將紅色字改成yes，讓側邊欄能新增網頁元素。

Step. 2
然後在上面語法的後面，寫入以下語法，圖片可以自行修改，建議放到自己的網路空間裡。

語法

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
<b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Step. 3
接著到『網頁元素』裡新增一個標籤就可以了。


參考網站：Multi-style labels widget for Blogger Beta

標籤： Blogger 。

Plurk This Post !!、

Twitter This Post !!
張貼者： Nekki 位於星期二, 八月 05, 2008

這篇文章讓你覺得：

Comments

簡單的Tab View功能（二）

這

個方法也蠻簡單直覺的，樣式也很簡潔，改一下CSS的話還是會很好看。

Step. 1
首先下載自己的模板，在<b:skin><![CDATA[和]]></b:skin>之間插入以下CSS語法。（紅色字的部份代表這段語法的意義，可自行修改外觀）

CSS語法
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}

div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Step. 2
接著在</head>之前插入以下語法，這是原作者的空間，建議下載回去放在自己的網路空間裡。

語法
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

Step. 3
接著回到Blogger後台，在『版面配置』→『網頁元素』裡，新增一個『Html/Javascript元素』，寫入以下內容。（紅色字的部份代表你要放入的元件語法，例如最新文章、最新回應..等等）

PS. 350px代表整個Tab View的寬度，250px則是代表高度，可以自行修改。

語法
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>分頁標題一</a>
<a>分頁標題二</a>
<a>分頁標題三</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
第一個元件語法放在這裡。
</div>
</div>

<div class="Page">
<div class="Pad">
第二個元件語法放在這裡。
</div>
</div>

<div class="Page">
<div class="Pad">
第三個元件語法放在這裡。
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

要繼續增加分頁也很簡單，複製貼上<div class="Page">和</div>之間的語法就行了。