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的解答。

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

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

首先先收尋下面程式碼：
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。

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 教學(中)

加入最新回應及最新文章

在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 文章收放

Blogger進階使用語法

1、文章收放

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

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

如何正確使用Flickr圖片外連

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

Blogger Beta Banner置入Html/Javascript欄位