2009年10月30日 星期五

讓你的部落格標題有跑馬燈效果


看到這個標題跑馬燈(marquee)效果,真的覺得眼睛很花,也覺得很好玩,怎麼會想出這樣的效果,但我想我應該是不會放這東西的,不過還是跟大家分享,有興趣的朋友可以玩看看。


怎麼做呢?
進入後台→版面配置→修改HTML ,然後找到</head>,在上方放入下列程式碼即可。

<script type='text/javascript'>
var txt="歡迎來到綸太郎的影音分享空間,無聊時看看影片,聽聽音樂也是不錯的.";
var espera=200;
var refresco=null;
function rotulo_title()
{
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

如下圖這樣,


其中
var txt="輸入想顯示的文字"
輸入跑馬燈想顯示的文字,標點符號,記得在英數下輸入,不然會變成亂碼。
var espera=200;
跑馬燈的速度,200我是覺得有點快,我設500,眼睛才不會太累。

其實這個效果讓我想到每次經過一些服飾店,營業人員總是喊著"數量有限,要買要快歐",一直重複著一樣的slogan,真的聽久了會有種彈性疲乏的感覺。

我想除非你的部落格是以銷售產品為主要的內容,且時常更新,可以把最新特價的消息或是舉辦的活動秀在上面,或是財經部落格,哪檔股票又漲了哪檔又跌了,類似快訊的消息,即時提供給讀者,不過資料你也要隨時跟著更新,覺得這個玩意真的可以在第一時間抓住讀者的眼光,有需要的朋友可以試看看效果如何。

如果你也喜歡在部落格裝上跑馬燈效果,建議可以使用網頁元素的小工具新增即可,語法網路找一下就有許多教學了,我個人比較喜歡的是
§ 鏡‧空間 § 設計的工具,可愛又美觀,跟大家分享。

參考來源:
Make your blog name scrolling on browsers

2009年10月29日 星期四

搞怪有趣的萬聖節(Halloween)Rss Feed訂閱圖案


10月31日就是萬聖節(Halloween)了,在這個屬於西洋人的節日裡,在部落格上搞怪一番,添加一個搞怪的Rss圖示吧。

2009年10月28日 星期三

最新文章小工具以縮圖表示(Posts with Thumbnails )


之前有介紹一個網站,Wowzio,可以用縮圖表示最新文章的元件Widget,但目前這個網站要寫信去申請邀請函才能使用他們的元件,不然我還蠻喜歡他的設計的,目前找到一款也是類似的功能,跟大家介紹。

不過要使用這個元件,後台設定有一項是要開放的,就是開放全文輸出的Rss Feed,
後台→設定→網站提供→網誌文章資訊提供,要設定完整,才能產生作用,如果設定簡短縮圖沒法跑出來,會顯示一張預設的圖,如下圖這樣。


我想看到這一點應該很多格主就放棄了,譬如我就是,不過如果你原先就是全文輸出你的Rss,就沒差了。(文章下方有提供不用全文輸出Rss,也可以顯示縮圖的最新文章,慢慢看下去唄。)

如何設定呢?

進入後台→版面配置→網頁元素→新增小工具→新增HTML/JavaScript ,然後輸入下列程式碼即可。
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://你的網址.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


裡頭的css設計大概如下,
http://i43.tinypic.com/orpg0m.jpg
是文章沒有圖案時,預定出現的圖片。


boxwidth = 298;
你的邊欄寬度

borderColor = "#ffffff";
背景顏色

thumbwidth = 40;
thumbheight = 40;
縮圖的寬和高

summaryColor = "#666";
摘要文字的顏色

numposts = 5;
要秀出幾篇最新文章

home_page = "http://你的網址.blogspot.com/";
你的部落格網址

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
這個js檔,網址
http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js
作者建議將它下載後,放到你自己的空間使用。

另外程式碼裡的背景顏色或是文字顏色,有時跟你的sidebar css設定有關,所以顯示不一定是你所設定的顏色,這是要注意的,譬如我的連結為什麼會變成綠色的,因為我的版面css有設定
#sidebar strong, #sidebar b {
color: #8BCB2F;
}

如果文字是粗體的就以綠色顯示,如果你有同樣問題的朋友,可以找找看自己的模板是否有這樣的設計。

如果有開放全文輸出Rss的朋友,也可以嘗試看看這個附有圖片的最新文章小工具,我想也是不錯用的,速度也很快。

2009.10.29更新,感謝網友flower佛心提供的資訊,Blogger後台也有提供的小工具,不是在基本系列,而是在精選系列區,
網頁元素→新增小工具→按下"精選",會出現"Recent Posts",有兩個,第二個才是有縮圖的最新文章小工具,這個就沒有限定要設定全文輸出的Rss了,設定也彈性些,不過沒法自己修改成自己想要的顏色或是文字大小,還有在IE7底下無法呈現,不知是我的瀏覽器的問題或是程式本身的bug,大家可以參考一下。

參考來源:
Recent Posts with Thumbnails Widget for Blogger

2009年10月27日 星期二

如何防止他人複製文章的方法(鎖右鍵)


過去曾經有人問到如何鎖右鍵來防止別人複製自己的文章,其實這玩意只能防對電腦一竅不通的朋友,無所謂防君子,因為君子也不會去竊取別人的文章吧,Google搜尋一下就有很多破解方式,所以真的只是防止電腦小白或是懶得搜尋資訊的人吧。


方法非常簡單,

進入後台→版面配置→網頁元素→新增小工具→HTML/JavaScript 新增 ,
然後輸入以下程式碼即可。
<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){ alert(message); return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>

其中Function Disabled!可以改成任何你想顯示的文字,
不管柔情勸說或是Kuso調侃甚至威脅恐嚇,隨你高興,例如

複製拷貝他人文章前,請尊重智慧財產權!



注意你的文字敘述,內若有標點符號,最好是轉到英數底下的標點符號使用,例如逗點要以,表示,而不是以,表示,不然標點符號會變成亂碼的。

如何解除有這種鎖右鍵的網站呢?
我想很簡單,這裡就不再多敘述了,網路搜尋一下就有了。

當然綸太郎的文章是不適合鎖右鍵的,不然那些程式碼讀者怎麼拷貝到自己的網站上呢?其實Ctrl+C(複製)和Ctrl+V(貼上)兩個簡單的動作,但真的很傷認真寫文章的站長或是創作者,適當的引用與摘錄是可以的,但是整篇照抄且未註明來源就真的是網路害蟲了,彼此尊重才能擁有更好的網路倫理吧。

參考來源:
How to stop visitors from stealing your blog content.

2009年10月25日 星期日

新增一個回到上方的按鈕(Go To Top)


隨著邊欄的小工具(或稱自由欄位)越來越多的時候,頁面相對也會變得越來越長,這時滑鼠的利用也是很重要的,適時的加上一個按鈕,回到上方(Go To Top),讓閱讀者可以隨時回到最上方進行瀏覽,也是很方便的工具。

其實回到上方或是到頁面的最底端,鍵盤上的Home與End也可以完成,只是有的人或許不知道要利用鍵盤,這時增加一個回到上方的按鈕,或許可以增加瀏覽的便利度,有需要的人可以試看看。

首先當然要幫自己找個合適的圖案,可以利用Iconfinder網站,輸入"top"或是"go top"關鍵字,
例如下列網址,
http://www.iconfinder.net/search/?q=top


然後進入後台→版面配置→網頁元素→新增小工具→HTML/JavaScript 新增 ,
然後輸入以下程式碼即可。
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://sites.google.com/site/lunfiles/box/gotop1.png'" src="http://sites.google.com/site/lunfiles/box/gotop0.png" onmouseout="this.src='http://sites.google.com/site/lunfiles/box/gotop0.png'"/></a>
其中
gotop1.png是大圖網址,我是用75*75px
gotop0.png是小圖網址,我是用30*30px
bottom:5px;right:5px;這是定位點,這可以自己調整,我定在右下方
圖片網址可以用你自己的空間網址替換

當滑鼠移到按鈕上方時他會變大,


一般時候則呈現小圖,


如果只想單純用一個圖代表,不想有縮放效果,語法如下:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://sites.google.com/site/lunfiles/box/gotop0.png" /></a>
如果是想在網站某地方加上這個回到上方的文字連結功能,
則是利用
<a href='javascript:scroll(0,0)' title='Top'>Go Top</a>
放在html裡,你覺得適當的地方,譬如我在我的網頁最下方,就有一個Go Top的文字連結,就是放在模板的html裡的,不過這要你對後台的模板html配置較熟悉,建議再來使用會比較適合。

當然有的人也會使用展開/折疊小工具的方式,讓側邊欄簡潔些,不過我自己是沒有用過,可參考
Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
這些都是可以利用的方式,跟大家分享。

參考來源:
Add Floating - Back To Top Button/Image In Blogger Blogs

2009年10月24日 星期六

Blogger增加導欄列Navbar透明圖層的設計


昨天(2009.10.23)下午Google Blogger給大家大約兩小時的震憾教育,很多網誌連不上線,很多寫到一半的文章就不見了,或是正在埋頭改版的朋友,也沒法發揮熱情繼續奮戰下去,plurk跟twitter上一片哀嚎聲響起,原來Google也會這樣無預警的當機,而且長達快兩個鐘頭之久,真是我第一次遇到,結果晚上就釋出了一個新功能(透明圖層的Navbar導覽列),但我想很多人都沒在用這功能。

到底這是什麼功能呢?我想應該很多人都發現了,就是Navbar導覽列支援透明圖層,其實Google有一直在改進導覽列的功能,推出了分享與追蹤的工具,真的也很不錯,現在為了版面上的美觀,推出了透明圖層的導覽列。



其實嚴格說來這個導覽列Navbar真的還蠻實用的,功能有下列幾項:
1、打進關鍵字搜尋你網站上的文章。
2、讓網友分享你的文章到Twitter、Facebook、Google閱覽器訂閱,如果在登入的情況下,會多一個以電子郵件傳送的選項。


3、看到令人不舒服的網誌內容,暴力或是色情的網站,可以"檢舉濫用"回報給官方來處理。
4、"下一個網誌",可以隨機跳到某人的部落格,觀看世界各地Blogger的網誌內容,最近好像是以美食及動物為主,不過很多時候會出現恐怖的圖片,自己要有心理準備,這項功能我自己是不太喜歡用,因為曾經看到一些令人不舒服的照片。
5、在未登入的狀態下,可以提供一個類似Admin控制台的功能,讓你不用找尋Google或是Blogger的首頁去登入,直接按下"登入"就能到blogger首頁登入了。
6、在登入的情況下,看到喜歡的網誌,可以立即按下"追蹤"加入追蹤,很方便。


7、在登入的情況下,在自己的首頁就可以直接按下"新文章"開始寫作,或是按下"自訂",新增網頁元素。


如何使用呢?
進入後台→版面設置→網頁元素→導覽列(藍色的),按下編輯就會出現如下圖的選擇,原先只有四種,現在多了透明圖層的透明亮及透明暗兩種,就看你的版面加以選擇。



P.S.如果你的瀏覽器是IE6,是沒有支援透明圖層的功能的。

先前大部分的人都會將此項功能隱藏,就如同綸太郎在使用blogger系統時就發表過一篇,
隱藏 blogger導覽列(navbar)+進入後台的方法,

隱藏NavBar的語法:在<head><和/head>之間放入以下的語法,通常放在body{}這段敘述前或後都可,
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

因為我個人的登入習慣都是登入Google帳號後,再連到Blogger的後台,所以實際上並沒有這個需要,要直接登入Blogger後台動作,所以對我而言這是個雞肋的功能,有沒有都無所謂,只是不喜歡版面上多了那一條功能列罷了,不過目前多了許多功能,所以先讓它出現一陣子,如果真的不喜歡再拿掉囉。

而目前網路上非官方的模板,大多也都將此功能隱藏了,如果你想讓導覽列navbar重出江湖,試著進入後台Html區中找尋是否有類似以下語法的東西,
#navbar-iframe {或是 #navbar {
裡面有一句或兩句語法是
visibility:hidden;或
display:none;
把他刪除即可,你的navbar導覽列應該就可正常運作與呈現了。

如果你想讓他在滑鼠指到上方才出現navbar,可以將navbar的語法修改或新增為以下的語法,但是只有在Firefox才會有作用,IE好像沒法支援。
參考來源,Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

題外話:當Google Blogger無預警當機時,自己就要作匯出網誌,備份自己的模板與文章內容的準備,文章是自己的心血,而我們用的是免費的服務。

Google官方有提到可以復原遺失的文章嗎?,如果你文章寫到一半當機,沒有儲存,可以參考他的內容,或許還可挽救回來。

另外如果blogger使用上有任何錯誤或是當機無法連線的現象,可以先參考Blogger On Twitter的網頁,通常官方第一時間都會公佈在那裡。

2009年10月22日 星期四

Google Sites可以放JavaScript檔案及接受外連


最近網友詢問我一個lightbox2的燈箱效果,發現了他的檔案居然是從Google sites的檔案櫃外連的,所以趕緊跟大家報告這個好消息,終於Google Sites接受Java Script檔案形式的外連了。