RSS 簡單懂

隨著越來越多人使用Blog，我相信這是需要的。
之前就一直很想使用，不過也沒什麼在逛大家的Blog。(笑)
很驚喜的是，我使用Google Reader兩天以後，竟然就全面中文化了！
雖然中英文不是重點，英文頗差的我還是看得懂。(笑)
但越來越佩服Google的各種功能，之前也玩了一些Google其他的服務。
有些我想在未來的工作上應該是很方便的！
一個帳戶，多種服務！(不過安全性就更重要了)
PS：真的很惋惜Flickr沒有被Google收購呢。

Blogger 火星加密文

Blogger並沒有加密文章的功能，但是現在可以透過這個Hack實現！
雖然平時也沒有什麼需要加密的文章，但偶爾或許會有吧！？(謎)
最大的希望就是Blogger將來會把隱藏或加密文章的功能加進來。

效果如下：(密碼test)
第一種方式(顯示出火星文)
Click to Decrypt text (點擊此處解開火星文)

M1epOZMLno7OVRs7gKSVTQ6LTuM7EBUHtLKSt0fO9KBJkr1H\nniCaBA7nAIwptXyVb5WfiKEW/cztxDEAexxAAA==

第二種方式(不顯示火星文)
Show encrypted text

方法如下：

在你的BLOG中要先放入Hack所需要的Javascript，已Blogger來說，將底下的code加在Template中的</head>上面，而其他則是加在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...之類的。


文章教學參考與修改自Kaie's Blog的[Javascript] Encrypt your private blog post

Blogger / Blogspot 三欄的改法

Blogger並沒有提供三欄式的樣式，但是我們可以做點修改添增。
三欄式的面板挺方面的，尤其在是Sidebar很多東西的時候。

以下是如何改法：
第一個750px是你總網頁的寬度，400px+150px+150px+各margin=750px
這部份必須自己調整，新增的第二個sidebar以紅色表示。

先新增紅色的到#sidebar-wrapper 那樣式附近：
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}


再來將下面一段加在以下CSS碼相關位置：
<div id="'main-wrapper'">
...
...
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

而相關位置因人而異：(其實這只是讀取順序！)
如果你原來是sidebar在左邊，則排列順序：
<div id='sidebar-wrapper'><div id='main-wrapper'><div id='newsidebar-wrapper'>
如果你原來是sidebar在右邊，則排列順序：
<div id='newsidebar-wrapper'><div id='main-wrapper'><div id='sidebar-wrapper'>
當然你也可以像我一樣擺在同一邊：
<div id='main-wrapper'><div id='sidebar-wrapper'><div id='newsidebar-wrapper'>

測試結果，其實上面的方法只是讀取順序。
真正想要將sidebar放在哪一邊，應該要去修改 #main-wrapper #sidebar-wrapper #newsidebar-wrapper之中的：
float: right;

接下來你到網頁元素就可以看到第三欄出現，若把各顏色變數字形變數也新增的話，以後你在這Fonts & Colors 就可以直接調整。

參考自Aqua , A/V and BSD的Blogger / Blogspot 三欄的改法 。

HTML 使用文繞圖

簡單的就可以讓文字繞著圖片，擁有像雜誌那樣的排版。
在小圖或是直的圖片上，有很大的用處。

方法一：

平常插入圖片的 html code 如下所示：

<img src=”你的圖片路徑”>

如果要使用文繞圖，要加入一小段 CSS code 到裡面，如下所示：

<img src=”你的圖片路徑” style=”float: left”>

left 表示圖片位置在左邊，也可以改成 right，圖片位置就會變成在右邊。

再來，只改這樣的話，圖片和文字會太靠近，看起來會貼太近了，所以再加入一小段 code，如下行所示：

<img src=”你的圖片路徑” style=”float: left; margin: 15px“>

表示設定圖片四周會有 15 個 pixels 的空間，也就是文字距離圖片會有 15 pixels，看起來就會比較清爽了， 15 這個數字可以隨意更改成任何適合的數字。


方法二：

CSS中
-------------------------------------------
.imgLeft{
float:left;
margin:15px;
}

.imgRight{
float:right;
margin:15px;
}
-------------------------------------------

HTML中

靠左圖片
<img src="你的圖片路徑" class="imgLeft">

靠右圖片
<img src="你的圖片路徑" class"imgRight">

-------------------------------------------

參考與修改自stOOrz的HTML 使用文繞圖 以及PTT.CC上HiroshiKen的解答。

ijigg

ijigg是一個提供音樂播放器以及音樂空間讓大家互相交流的網站。
可以直接在線上聽，也可以將它放到blog或其他地方。

雖然好像只能限定使用他們的播放器，也不難看啦。(也許以後會推出新面板)
空間容量似乎沒有限制，不過只是猜測，因為我才丟一首歌。
如果沒錯，就可以省去找一堆網路空間的時間了，管理上方便許多。
其中還做了Genre(分類)，以及Popular Music等各項功能。
有留言功能，且可直接在播放器上面點選 options => Comment 使用留言功能。

SkinFlix

原本是打算將照片弄成Slide Show，不過我懶了。XD
因為我Flickr不是Pro，囧。有相簿限制，增加相片至Slide會額外麻煩。
而且頁面效果應該不會比較好，照片太少了。(無奈)
Slide Show還是適用在裝飾blog或是特殊場所的展示吧！？(謎)

Slide Show最近又多了SkinFlix。
是一個為影片加上外框以及主題的功能，目前只能和YouTube互通。
個人是覺得實用性不高，或許也是在特殊場合用得到吧！

讓欄位顯示"加入網頁元素"

各範本的元素格式規劃都不太一樣，不過應該大同小異。
目的是為了可以更人性化的加入網頁元素，使原本欄位上沒有顯示的顯示出來。

首先先收尋下面程式碼：
b:section class
應該可以找到四個類似片段(或是更多，衣版面配置而定)，如下：
b:section class='header'
b:section class='main'
b:section class='sidebar'
b:section class='footer'
header 標題
main 文章內容
sidebar 右(左)邊的欄位
footer 底部欄位
每一項都可以修改，但sidebar和footer似乎預設就會有了。

在想要顯示加入網頁元素的那像語法後面加入或修改：
maxwidgets='數值' ( 數值-1 是由你自定想要加入幾個HTML /Javascript 物件)
showaddelement='yes' ( 把 NO 改成 YES )
存完檔，再到網頁元素看看，就會發現你修改的欄位上多了"加入網頁元素"。
這樣就方便多了，不用在自己去修改一大堆的css和html。

Slide Shows

Slide 多種效果與樣式的照片輪播秀，也就是Slide Show。
而且它可以匯入Flickr！不過不知道兩百張以後的會不會顯示出來。
也還有很多家BLOG或是各知名網站的服務。
最近還多了Guestbook！很特別，也是以照片輪播的方式表現。
當然也有可以在自己電腦桌面中使用輪播的效果，Screensaver。
以下是My Slide Show，還有很多種樣式，有機會以後再用，都很好看！

Code Block

以下提供兩種Code Block樣式

這是第一種Code Block
將語法貼在post

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}


只要把要張貼的語法放在
<code></code>

以下為第二種Code Block，感謝hnigel教學。
首先必須先修改Blogger的樣式表
在樣式表中加入下面這個屬性
顏色可以照個人喜好更改

#code {
BORDER-RIGHT: rgb(51,153,0) 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: rgb(51,153,0) 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: rgb(51,153,0) 1px solid;
COLOR: rgb(0,102,0);
PADDING-TOP: 10px;
BORDER-BOTTOM: rgb(51,153,0) 1px solid;
}

之後在文章中的用法

<div id="code">
要加上外框的文章
</div>

它的原理其實就是CSS當中外框的設定
如果需要基本的教學
可以去GOOGLE收尋關鍵字"CSS 外框"或"CSS BORDER"即可
在此就不多作介紹


由於程式碼無法直接貼在BLOG文章中
所以請參考下列連結：

[CSS] A Cool blockquote for "Code style" and some blogging tips

幫參考資料加上區塊(on the glade)

CSS程式控制碼

CSS 為 Cascading Style Sheet 的簡稱。中文名為『階層式樣式表』，提供網頁設計者更大的網頁空間應用彈性，讓網頁的文字內容與版面設計分開處理。
CSS程式控制碼

Label Cloud

跟Flickr一樣的標籤雲耶！
文章越多，她會長的越大朵。(羞)

感謝白橘罵幾提供教學：）
Label Cloud 教學(英)
Label Cloud 教學(中)

Flicrk TEST

莊老師 思瑋 吳美 芳燕, originally uploaded by windydodo.

這是使用Flickr相簿跟Blogger整合測試！
雖然很喜歡Flickr，可是非付費會員能使用的功能實在是不多。
如果這樣搭配使用的話，想要貼一張圖，就得傳一張。
這樣一來在Flickr中我的分類就會變的很亂！
因為非付費會員最多只能有三本相簿，而且也只會顯示前兩百張照片。
順序以上傳日期排列無法變動，張數超過200就不會顯示。
就算分類標籤還在，也看不到。
有點考慮搭配使用Google的Picasa。這樣就都是Google的東西了。(茶)

上面照片為使用Flickr中[BLOG THIS]效果。
下面照片為直接從allsize裡面取得位址。

加入最新回應及最新文章

在blogger beta內預設是沒有最回應和最新文章的，但是我們可以透過這個方法來增加：

在blogger beta加入最新回應及最新文章

但是建議使用堯＠部落格的CODE產生器。

最新文章code產生器

最新回應code產生器

如要更改格式
=====
temp += '<li><span class="item-title"gt;<a href="'+link+'"gt;'+ title +'</agt;-'+timestamp+'-'+authorname+'</spangt;</li>';

找到這一段，timestamp是時間，authorname是作者，修改這一段就可以更改格式了。至於要針對時間格式修改，可以找到這一段。
var timestamp=post.published.$t.substr(0,10);
並修改成
var timestamp=post.published.$t.substr(0,10).replace(/-/g,"/");
就可以改成2007/03/07這種格式。
===== (擷取自堯＠部落格)

怎樣拿掉blogger上面的Navigation Bar？

http://zonble.twbbs.org/archives/2004_08/570.php

Blogger 文章收放

Blogger進階使用語法

1、文章收放

[Blog] Expandable posts with Peekaboo view (blogger beta) 讓文章不必接換頁面

2、把圖片是放在zooomr的教學文章做總整理。據說是zooomr跑圖比較慢。比較不會影響網頁讀取速度。

如何正確使用Flickr圖片外連

Blogger Beta 摘要/全文 切換之"繼續閱讀功能"

Blogger Beta Banner置入Html/Javascript欄位