顯示具有 Blog 標籤的文章。 顯示所有文章
顯示具有 Blog 標籤的文章。 顯示所有文章

2009年5月31日 星期日

在網頁上，播放 wmv和 flv影片的語法

<embed src="影片網址" width="640" height="480" type="application/x-mplayer2" wmode="transparent" showstatusbar="1" autostart="false"></embed>
張貼者： 於 沒有留言:
標籤： ,

為 BLOG 增加 Flash Mp3 音樂播放器

註：
1. type=多媒體的MIME類型(wma：可以不用此屬性，mp3：video/x-ms-asf，rm：audio/x-pn-realaudio-plugin，swf：application/x-shockwave-flash)

2. width=寬度(可用數值或百分比%)

3. height=高度(可用數值或百分比%)

4. autostart=是否自動播放(true/false)

5. loop=是否重覆播放(true/false)

6. hidden=是否隱藏面版(true/false)

<embed src="音樂檔案網址" type=video/x-ms-asf width="300" height="40" autostart="false" loop="true" hidden="false" />

但是，用此方式播放的話，部落格顯示的播放器外觀，即為到訪者電腦預設的播放器外觀（例：Windows Media Player或Quicktime等），因不同播放器的面版大小不同，會影響美觀，您也無法隨心所欲變更面版顏色。
張貼者： 於 沒有留言:
標籤： ,

2009年5月11日 星期一

在 Blogger 加水平連結導覽列

1. 版面配置→修改HTML，不用展開小裝置範本，在 #header-wrapper 加入以下程式碼

/* Menu */
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-left: 5px;
padding: 1px 10px;
text-decoration: none;
font-size: 8pt;
color: #fefefe;
}
#menu a:hover {
text-decoration: none;
color: #Fefefe;
background: #789CFF;
height: 24px;
}
#menu .active a {
}


以上就是連結列的外觀定義，其中
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
裡的margin:0 2%;設定最好和你的#header及content-wrapper 一樣，才不會產生左右不對齊
height:26px;就是連結列的高度，background是連結列的背景顏色
而#menu a { 就是連結文字的顏色設定
#menu a:hover { 就是滑鼠停在上面的顏色設定
這些你都可以自行修改成你要的色彩也可以加上背景圖片。



<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tokyoplay.blogspot.com/2008/04/tokyo-seals.html'>關於</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
</ul>
</div>


2. 找到header-wrapper這個區塊，在標頭區<div id='header-wrapper>及內容區<div id='content-wrapper'>中間插入上面的語法即可。

其中Home就是連回你的主頁，我做一個範例，關於然後放上這篇的網址，這些你自己都可以修改，如果要再增加一個連結，一樣是在</ul>之前新增

<li><a href='網址' target='_blank'>網站名稱</a></li>


即可，如果不要在新視窗開啟，記得把target="_blank"刪除即可。


文章引用:在部落格名稱下方放個水平連結導覽列
張貼者： 於 沒有留言:
標籤： ,

2009年5月10日 星期日

Blogger 顯示訪客上次瀏覽時間

添加HTML/JavaScript的Element，然後將下面的代碼直接添加進去即可：


<script type="text/javascript">
var lastvisit=new Object()
lastvisit.firstvisitmsg="這是你第一次光臨本站" //Change first visit message here
lastvisit.subsequentvisitmsg="歡迎回來，你上一次到來是在 <b>[displaydate]</b>" //Change subsequent visit message here
lastvisit.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
lastvisit.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+" expires="+expireDate.toGMTString()+" path=/"
}
lastvisit.showmessage=function(){
if (lastvisit.getCookie("visitcounter")==""){ //if first visit
lastvisit.setCookie("visitcounter", 2, 730) //set "visitcounter" to 2 and for 730 days (2 years)
document.write(lastvisit.firstvisitmsg)
}
else
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", new Date().toLocaleString()))
}
lastvisit.showmessage()
</script>


實際上是理用了訪客的cookie記錄，所以當瀏覽器相關cookie記錄被清除之後，再次登陸網站時只會顯示為你第一次訪問。
張貼者： 於 沒有留言:
標籤： ,

2009年5月8日 星期五

鎖右鍵語法

把以下內容複製之後，貼入原始碼，取代<body>標籤：



<body ONDRAGSTART="window.event.returnValue=false" onSelectStart="event.returnValue=false" ONCONTEXTMENU="window.event.returnValue=false" >
張貼者： 於 沒有留言:
標籤： ,

為你的 Blogger 加上多國語言版本！

Google 翻譯小工具，可以把你的網站直接轉換為其他國家語言，雖然我不知道這個翻譯工具效果如何，因為在翻譯工具上往往都會出現文法問題，但是我相信，能看懂一點點，總比完全看不懂好吧！


加入方法:
新增小工具 -> HTML/JavaScript 加入以下程式碼便可


<div class="widget-content">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=zh-TW&w=160&h=60&title=&border=&output=js"></script>
</div>
張貼者： 於 沒有留言:
標籤： ,

將 Google AdSense 放置文章標題下方

進入「資訊主頁」>「版面配置」>「修改HTML」>「修改範本」>把「展開小裝置範本」打勾，找到以下程式碼，然後插入從Google AdSense所取得的廣告程式碼。


<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/>

[Google AdSense程式放置處]<---

</a>
<b:else/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>


最重要的地方是要修正一下AdSense程式碼，只是把xml格式換了一種寫法(因為blogger使用xml格式，如果語法要使用字符 < ﹐而該字符卻絕對不能以 < 出現在任何的XML 資料中﹐這樣必須遵循XML 1.0 的規則﹐也就是應鍵入成 &lt;)
把 < 和 > 改為 &lt; 跟 &gt;，範例如下


<script type="text/javascript">&lt;!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, 已建立 2008/8/15 */
google_ad_slot = "0445797044";
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>




引用文章:將Google AdSense放置於文章標題下方

張貼者： 於 沒有留言:
標籤： ,

2009年5月7日 星期四

確認Blog變慢的原因

Pingdom，是一個最容易讓你了解自己Blog的好工具。

使用方法很簡單

  1. 進入 Full Page Test 網頁：http://tools.pingdom.com/fpt/，
  2. 在 URL 欄位輸入自己部落格的網址，再按下「Test now」。
  3. 等一下子，你所等待的時間就是自己部落格載入每個物件的時間
  4. 會自動列出一個物件清單，包含每個物件的載入時間(Load time in seconds)、物件(URL)以及物件大小(Size(KB)。

載入時間(Load time in seconds)

將是我們這篇文章的重點。

Pingdom最棒的地就是用長條來表示載入每個元件所需的詳細時間，而且還用三種顏色表示不同的時間：

Response time example

  • 黃色表示發出連線需求到回應所需花費的時間、
  • 綠色表示建立連線所需花費的時間
  • 藍色表示資料傳輸第一筆資料到傳送完所需花費的時間

光這樣說，我知道初學者可能會有點不太懂，我打個比方好了：就像你要打電話去訂購（很難買到的）黑師傅捲心酥。

如果接電話的人現在正在接別的訂購電話，那妳可能打不進去（這個是真實情況！），所以你得等接電話的人儘快處理完手邊的工作有空了，他才能接你的電話。從你打電話開始到接通的時間長短就以黃色的長條表示，除了表示現在的流量外、也表示伺服器的反應時間和速度。

等電話接通後，另一端的人聽到你的聲音後，你開始告訴她你要100箱花生、100箱巧克力、100箱草苺口味的捲心酥，她就開始準備出貨的事宜（前題是要有存貨，但通常都沒有！），準備的時間越短表示她（和公司）的效率越高。從你接通電話到出貨的時間長短就以綠色的長條表示，也同樣表示伺服器的反應時間和速度。

接 著黑師傅會開始出貨（但真實情況是要等很久！），你收到貨的時間取決於幾個因素：訂購產品的多寡、運送路線以及交通的情況。如果你訂的東西越多，就需要花 比較長的時間寄送；如果它走的路只有兩線道，那就要依序排隊；如果正是塞車的時段，即使是十六線的高速公路也塞車了，那就得等一段時間才能收到。所以藍色的長條，表示你所要傳遞的檔案大小、網路頻寬和目前的流量。

排序物件(URL)

如果你已經測試完自己的網頁了，就可以點選Sorted by，選擇排序的條件：

  • Load Order：預設值
    從開啟網頁一直到最後完成的順序。
  • Load Time：
    依照載入物件的時間長短排序。
  • File Type：
    依照檔案的類型排序，例如：CSS、圖片、JavaScripts、Widget
  • URL：
    依物件的名稱。
  • File Size：
    依物件的檔案大小，但檔案大小不必然影響載入物件的時間。

當然，你可以再按右邊箭頭：
  • 向下表示降冪（由大到小、由A至Z）預設值
  • 向上表示昇冪（由小到大、由Z至A）

如何找到關鍵元件

在一開始時，你可以使用 Load Time 找到最花時間的物件，但如果沒意外你的Blog網址通常也在其中。倘若你找到比自己Blog網址還要長的物件，別懷疑，這些就是你的頭號目標，首先該作的就是減少他們的Load Time。

寫到這裏，關於Pingdom的簡單介紹就完成了。

至於要如何減少Load Time，我會繼續針對不同的物件寫如何減少Load Time的方法，以增進Blog速度，敬請期待！

有些注意事項

你一定要知道：

  1. Pingdom測出來的時間不全然準確，因為這個和測試的時間、測試的地點、特殊情況（某個widget失效、不正常）會有很密切的關係，所以實際使用者的時間可能會不一樣。
  2. 某些部落格平台，會強迫在Blog內放廣告，這個也是拖慢Load Time的原因之一，但這個除了換平台外，無解！



引用文章:通達人筆記: 加速你的Blog-1 找到關鍵元件
張貼者： 於 沒有留言:
標籤： , ,

用Google Reader 製做部落格聯播(blog roll)

Google Reader 除了可以當做新聞閱讀器(rss reader)外, 還可以用來製作一個部落格聯播, 對於原本就偏好用 google reader 訂閱新聞的人而言, 是一舉兩得. 如果沒有使用過google reader的人, 也可以參考一下設定方法.





就先從新增 rss 開始吧!

1.登入Google Reader後, 點選左側的"新增訂閱項目", 新增想訂閱的網頁(並不需要給rss網址, 直接給一般網址即可, google reader會自動抓取該網頁的rss 資訊.



成功新增之後,就會看到左側出現網頁資訊.


這時候的網址還沒有分類, 用製做聯播, 就要把這些網址統一放在一個"資料夾"中. 這裡將這個rss網頁放到 "blogroll" 的資料夾裡面. 依此類推...


都新增好之後, 就按上方功能鍵的 "設定"


點選 "標記", 就會看到剛剛設定的blogroll 資料夾(或tag), 預設是 私人, 點一下私人後 , 會變成公開


公開之後, 會看到 "新增剪輯至您的網站" 從反白變黑字, 點選一下


就會跳出一個視窗了. 這裡就是可以設定 聯播資訊, 如筆數(最高10筆), 配色, 標題等. 如果勾選 "顯示項目來源", 就會出現 新聞來源.


複製程式碼, 其中筆數所對應的程式碼(假如設10筆), n=10, 這個數字可以從程式碼改掉, 如改成 n=20, 那麼就可以一次出現20筆新聞了!



引用文章:Fun New Run High: 用Google Reader 製做部落格聯播(blog roll)
張貼者： 於 沒有留言:
標籤： ,

在 Blogger 文章中顯示程式碼

用這一個網站 Copy Paste 就可以了。

http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
張貼者： 於 沒有留言:
標籤： ,

2009年5月6日 星期三

為 Blog 加上背景音樂

1. 把以下的embed code複製入記事本內：

<embed type="application/x-shockwave-flash" allowScriptAccess="none" wmode="transparent" src="http://i16.photobucket.com/albums/b49/freddyizbadd/swf/singleplayer.swf?
showDownload=false&file=MP3網址&autoStart=true&repeatPlay=true&backColor=FFFFFF&frontColor=000000&songVolume=80" height="20" width="140">


2. 把MP3檔案網址取代上面embed code的紅字部分，最後把完成的embed code放入自定欄位內即大功告成。

MP3 上傳空間:
http://www.freewebtown.com/community/index.php
http://mp3upload.ca/index.php
張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)

Random Post