顯示具有 Blogger 技術 標籤的文章。 顯示所有文章
顯示具有 Blogger 技術 標籤的文章。 顯示所有文章

2008年8月25日 星期一

Blog Connection 的作法

若是要增加一個連結，只要加入小工具->增加一道連結即可。只是連結一多，版面就會慢慢被連結給佔滿了，所以使用下拉表單來放置收納連結，倒是一個不錯的方法哩，方法如下：

在版面配置中，新增一個HTML/Javascript的小工具，在將以下的code貼進去即可。

<select onchange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;" value="0" name="link">
<option selected="true"/>::Blog Connection::
<optgroup label="Group Name1">
<option value="WebSite1"/>name1
<option value="WebSite2"/>name2
</optgroup>
<optgroup label="Group Name2">
<option value="WebSite1"/>name1
</optgroup>
<option value="Friend1's WebSite"/>test
</select>

 (繼續閱讀...)
張貼者： ★歆~翔~ 於 晚上10:34 2 意見
標籤：

2008年8月24日 星期日

最新回應 & 最新文章

最新回應功能還蠻多種類的，但似乎若是想要「即時」和「增加回應篇數的設定」的技術，暫時還蠻困擾大家的（或許只有我 XD ）！以下介紹自己正使用的方法，聽說此法很不及時更新，最多只能顯示五篇，而且是全文顯示，所以基本上大站是不適用的~

來源：白花花


節錄步驟如下：

此法是利用feed的原理而成的，所以首先當然是要先取得feed網址
這裡就先拿最新回應當例子，最新文章就請自己舉一反三囉！

1.設定→網站提供→切換成進階模式，確定三個下拉選單是不是都停在完整這選項

2.回到你的blogger首頁，隨便點一篇文章進去拉到最下方
　有個訂閱：張貼意見(Atom)的連結，在他上面按滑鼠右鍵→複製捷徑

3.範本→加入網頁元素→選擇資訊提供→把剛剛複製的網誌貼上
　再把網址中的數字與多餘的反斜線去除，換言之網址要長這樣子：
　http: //你的blogger網址/feeds/comments/default
　如果是最新文章的feed則是長這樣：
　http://你的blogger網址/feeds/posts/default

4.點選繼續，就可以設定要顯示的篇數、是否要顯示日期和回應者
　這些設定完之後就可以儲存了:)

 (繼續閱讀...)
張貼者： ★歆~翔~ 於 中午12:07 0 意見
標籤：

顯示訪客 IP 的小東西

重灌狂人推薦你!!

說明：把下列code貼進去HTML/Javasript小工具就可以顯示囉～

<iframe style="background-color: #FFFFFF" width="145" height="28" frameborder="0" scrolling="no" marginheight="1" marginwidth="1" src="http://briian.com/files/act/myip-widget.php"> </iframe>

(繼續閱讀...)
張貼者： ★歆~翔~ 於 上午11:33 0 意見
標籤：

2008年8月23日 星期六

結合發表文章的日曆模組 ( Feed Calendar )

這一款有趣的日曆，來自 Abin's Tech Note 網站所提到的作法，以下是節錄的作法。

1. 日曆外觀顏色的 CSS 樣式定義
操作：打開模板，修改HTML，將以下的code貼入<head>之後。

/* Feed Calendar Styles */
#Calendar {
margin: 0px;
}
#Calendar .act {
color: #fff;
padding: 4px;
}
#CalendarTable table {
border-collapse: collapse;
padding: 0px;
border: 0px;
}
#CalendarTable table th {
padding: 1px;
color: #777;
margin: 0;
}
#CalendarTable table td {
height: 25px;
color: #999;
text-align: center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: #777;
}
#CalendarTable .Today a {
color: #fff;
}
#CalendarTable .Weekend {
color: #997777;
}

2.放置抓 Feed、產生日曆的Javascript程式碼
操作：將下列的code，放置在 ]]></b:skin> 之後。

<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for generating Feed Calendar: generateCalendar(), collectPost(), BrowsePrev(), BrowseNext(), BackToday() -->
var baseURL = '';
var currentDay = new Date();
var today = new Date();
var monthLabels = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var weekLabels = new Array('一','二','三','四','五','六','日');

function generateCalendar(){
var thisYear = currentDay.getFullYear();
var thisMonth = monthLabels[currentDay.getMonth()];
var thisDay = today.getDate();
var nDays = monthDays[currentDay.getMonth()];
if (currentDay.getMonth() == 1 &&(((thisYear % 4 == 0) && (thisYear % 100 != 0)) || (thisYear % 400 == 0)))
nDays = 29;
var IsitNow = currentDay;
IsitNow.setDate(1);
var startDay = IsitNow.getDay() - 1;
if (startDay < 0)
startDay = 6;
var sCalendarCode = '<table><tr>';
for (var index=0;index<7;index++)
sCalendarCode+='<th style="width:25px;">'+ weekLabels[index]+'</th>';
sCalendarCode+='</tr>';
var nTableCol=0;
for (index=0;index<startDay;index++) {
if (nTableCol == 0)
sCalendarCode += '<tr>';
sCalendarCode+='<td>&nbsp;</td>';
nTableCol++;
}
for (index=1;index<=nDays;index++) {
if (nTableCol==0)
sCalendarCode+='<tr>';
if (index==thisDay && today.getMonth()==currentDay.getMonth() && today.getFullYear()==currentDay.getFullYear())
sCalendarCode+='<td id="Day'+index+'" class="Today">';
else {
if (nTableCol < 5)
sCalendarCode+='<td id="Day'+index+'">';
else
sCalendarCode+='<td id="Day'+index+'" class="Weekend">';
}
sCalendarCode+=index;
sCalendarCode+='</td>';

if (nTableCol==6) {
sCalendarCode+='</tr>';
nTableCol=0;
}
else
nTableCol++;
}
if (nTableCol>0) {
for (index=0;index<(7-nTableCol);index++) {
sCalendarCode+='<td>&nbsp;</td>';
}
sCalendarCode+='</tr>';
}
sCalendarCode+='</table>';
document.getElementById('CalendarTable').innerHTML = sCalendarCode;

var sFeedURL = baseURL + '/feeds/posts/summary?orderby=published&published-min='+thisYear+'-'+thisMonth+'-01T00:00:00&published-max='+thisYear+'-'+thisMonth+'-31T23:59:59&max-results=50&alt=json-in-script&callback=collectPost';
var script = document.createElement('script');
document.getElementById('CalendarCaption').innerHTML = '<span class="loading">Loading <blink>...</blink></span>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function collectPost(json) {
document.getElementById('CalendarCaption').innerHTML = currentDay.getFullYear()+'-'+monthLabels[currentDay.getMonth()];
var entries = json.feed.entry;
var nDay = 0, nCount = 0, nActual = 0;
var posts = new Array();
for (var i = 0, post; post = entries[i]; i++) {
nDay = parseInt(post.published.$t.substr(8,2),10);
if (i>0&&nDay==parseInt(entries[i-1].published.$t.substr(8,2),10)) {
var actualDay = post.published.$t.substr(0,10);
var actualTimezone = post.published.$t.substr(23,6);;
posts[nActual-1][1] = posts[nActual-1][1]+', '+post.title.$t;
posts[nActual-1][2] = baseURL +'/search?updated-min='+actualDay+'T00%3A00%3A00'+encodeURIComponent(actualTimezone)+'&updated-max='+actualDay+'T23%3A59%3A59'+encodeURIComponent(actualTimezone);
} else {
posts[nActual] = new Array(3);
posts[nActual][0] = nDay;
posts[nActual][1] = post.title.$t;
posts[nActual][2] = post.link[0].href;
nActual++;
}
}
for (i=0;i<nActual;i++) {
posts[i][1] = posts[i][1].replace('\"', '&#34').replace('\'', '&#39');
document.getElementById('Day'+posts[i][0]).innerHTML = '<a title="'+posts[i][1]+'" href="'+posts[i][2]+'target="blank_">'+posts[i][0]+'</a>';
}
}

function BrowsePrev() {
var thisMonth = currentDay.getMonth()-1;
var thisYear = currentDay.getFullYear();
if (thisMonth<0) {
thisMonth = 11;
thisYear = thisYear-1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}

function BrowseNext() {
var thisMonth = currentDay.getMonth()+1;
var thisYear = currentDay.getFullYear();
if (thisMonth>11) {
thisMonth = 0;
thisYear = thisYear+1;
}
thisMonth = monthLabels[thisMonth];
currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');
generateCalendar();
}

function BackToday() {
currentDay = new Date();
generateCalendar();
}
//]]>
</script>

ps.若是希望點選月曆不直接開個新頁，以上code拿掉target="blank_"，就可以了。

3.樣板設定結束，存檔，接著安排這個新日曆模組位置。
操作：換到「網頁元素」的設定，在你想塞入日曆的地方新增一個網頁元素，選擇 HTML/JavaScript 類型。給個標題，然後貼入以下的 HTML 程式：

<center>
<table border="0" id="Calendar" cellpadding="0" cellspacing="0">
<caption>
<a href="javascript:;" onclick="BrowsePrev();" title="Previous Month">&lt;&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onclick="BackToday();" title="Back to Today"> <span id="CalendarCaption"> </span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:;" onclick="BrowseNext();" title="Next Month">&gt;&gt;</a>
</caption>
<tr>
<td id="CalendarTable" class="act"> </td>
</tr>
</table>
<script type="text/javascript">
generateCalendar();
</script>
</center>

儲存，完成設定！！
 (繼續閱讀...)
張貼者： ★歆~翔~ 於 晚上11:46 5 意見
標籤：

記數器

簡單、清新、健康、好用的記數器：Sitestates ^____^

Sitestates
還有詳細說明喔~ 讚~
 (繼續閱讀...)
張貼者： ★歆~翔~ 於 下午5:46 0 意見
標籤：

2008年8月19日 星期二

繼續閱讀功能

Blogger「繼續閱讀」之實作

來源網頁: 白花花


節錄步驟如下：
1. 設定→格式→底端文章範本區→貼入下段span標籤→儲存設定
這是以後發文要用到的語法，放在文章範本裡後發文時可以省一道手續

<span class="fullpost">

</span>

2. 接著到範本→修改Html→展開小裝置範本→啟用瀏覽器的尋找功能，
a.尋找]]></b:skin>，然後在它後面貼入下段程式碼

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>

如果你曾經用過別種繼續閱讀是採<span id="fullpost"></span>的話
那這步驟語法中所有的span.fullpost可以改成span#fullpost
b.再利用尋找功能找到<data:post.body/>，在它後面貼入下段程式碼
　　其中程式碼內被小括號圍起來的中文字部分可以替換成自己想要的文字

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>(繼續閱讀...)</a>
</b:if>

基本上到這裡為止整個繼續閱讀的功能就已經大致建置好了
以後新增文章的時候，只要把當作摘要的部份寫在<span class="fullpost">的上面
而要按繼續閱讀才看的到的東西則寫在<span class="fullpost">和</span>的中間

至於要讓繼續閱讀靠右的方法，則是可以在第二段程式碼動手腳
只要在第二行開頭加入<p align="right">
或是<p style="text-align:right;">
結尾加入</p>，即可讓繼續閱讀靠右
不過這樣會讓繼續閱讀跟摘要最後一行之間的距離變大

此作法的優點：
1.完全沒有使用到javascript
　不必擔心會跟其他的blogger外掛有互相衝突的情形發生
　但若是想用阿土伯的那套程式或是相關的懶人包，可能就無法用All in one
　要用進階安裝的方式避開阿土伯版本的繼續閱讀比較保險~
2.用的是span class的標籤，不會自成一個區塊，可以相容於先前在範本裡就設定好的內文樣式
　（像是字體大小啊、顏色啊、行距之類的樣式）

不過此作法也有缺點：
１。已經發表的文章不會自動套用，要自行修改加入<span class="fullpost">和</span>
２。就算你把所有的文章內容寫在<span class="fullpost">的上面，繼續閱讀的超連結字樣仍然會出現





 (繼續閱讀...)
張貼者： ★歆~翔~ 於 晚上7:47 0 意見
標籤：

Code Block 之撰寫

為了能夠一點一滴的紀錄blogger成型過程，程式碼的剪貼與紀錄，實在煞費苦心，貼個程式碼還要將關鍵字轉換掉，用來避免網頁直接執行而無法顯示出程式碼來，還好有轉碼的程式輔助，不然我真要在blogger寫個慘字啊~程式碼會po了，但是沒有一塊漂亮的地方來顯示，就好像有花沒花圃一樣，總是少了一點fu，所以Code Block就是可以幫助我們建個漂亮的小花圃，來把小花們種進去啦!來吧！可憐的園丁來建花圃囉！

步驟1.將底下的code貼在模板裡</b:skin>之前

code {
display: block;
font-family: 'Courier New';
font-size: 9pt;
overflow: auto;
border: 1px solid #82c534;
padding: 10px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
background: #e5e6da url(http://www.fileden.com/files/2008/9/5/2082178/code.gif) left top repeat-y;
}

步驟2.在編輯文章時，在code前後加上關鍵字<code>與</code>即可。

步驟3.貼程式碼時，別忘了把關鍵字換掉喔~
     < 用 &lt;  更換
      > 用 &gt;  更換 
      & 用 &amp; 更換


ps.步驟一裡頭的連結圖code.gif，可以改放自己的網路空間為妥當!!


 (繼續閱讀...)
張貼者： ★歆~翔~ 於 凌晨4:13 0 意見
標籤：

寫部落格的好工具(字元轉換)

Html 語言真是平易近人，只要<>與</>完美的結合在一起，就可以擦出炫亮的火花，成就金字塔般的壯闊世界。喔，你相信嗎！？我不相信耶！第一次接觸他，為了po個程式碼，我就傻眼了，<怎麼顯示在blogger？天ㄚ，居然要打&lt;這樣，才有辦法顯示出來，那....很多程式碼要怎麼翻ㄚ？還好，聽說金字塔是外星人蓋得，剛好我跟外星人又很麻吉，所以某外星人就介紹我這一味啦，鏘鏘...


優秀的Html語法轉換器
centricle
Postable
只要將地球人的語言輸入進去，就幫你轉成外星人的語言出來呦，很簡單。

海芋小站
裡頭提供了以上的轉換器跟好用的blog撰寫介面
用Firefox搭配ScribeFire套件～
恩，沒用過，有機會再來看看～ XD

 (繼續閱讀...)
張貼者： ★歆~翔~ 於 凌晨2:50 1 意見
標籤：

加密方法

Blogger 建置


步驟1.放置解碼器
說明：解碼器可以經由網站下載下來，再放在自己所知的網路空間中，或者經由此網址：
http://vincentcheung.googlepages.com/blogjscrypt.js 即可取得解碼器位置。
操作：
將以下之code加在Template中的</head>上面即可

<script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>


步驟2.使用加密器加密
操作：透過此網站所提供之加密器：Javascript Encryption and Decryption
輸入「Key」欄位以及「Plain Text」欄位，接著按Encrypt Button(加密鈕，在Plain Text欄的下方)，此時便會在「Cipher Text」欄位產生加密過後的火星文。

步驟3.將火星文放入文章之中
操作：
將以下code放入要撰寫的文章之中

<a href="javascript:Decrypt_text('unique_name', '此段內容為由步驟2所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)');">
請輸入密碼>///< </a>
<div id="unique_name"></div>



※注意上方的unique_name型態是div tag的一個id名子，可以自行命名，只要在template中，或文章中不出現同樣的id即可，否則會造成判斷錯誤!!也就是在一個顯示頁面中，有用到兩個以上火星文片段的話，那麼此id的命名就必須是unique_name,unique_name1,unique_name2...之類的

加密技術來源網址：
Kaie's Blog
 (繼續閱讀...)
張貼者： ★歆~翔~ 於 凌晨1:52 0 意見
標籤：
訂閱： 文章 (Atom)