聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

三月 27, 2008
» 【Blogger】標題文字換圖片

常在很多前輩的 Blog 看到的作品都是把文字換成圖片.. 可使用 Blogger 標題列上傳完圖片會發生圖與文字重疊的 bug,有的 Templates 會,有的不會.. 這時只好自行修改 CSS 囉..

在 修改 HTML 裡找到 #header a img

#header a img {
margin: 28px 0px 0px 0px;
padding: 2px 0px 0px 2px;
border: 0;
position: absolute;
top: 0px;
left: 0px;
}

在這裡凍仁只改了 margin 這項 邊界的屬性,因為圖片上傳完會跑掉XD

三月 2, 2008
» 【Blogger】Draft:SearchBox - Blogger測試中的搜尋框

在看了 Josh`s Note 最近的文章後,凍仁也到 Draft 加入 SearchBox(搜尋框) 這個測試中的新功能.. 就是現在在本 Blog 最右上方的搜尋框。由於它的 result(顯示結果) 是鑲在 Blog 裡,且還有 此網誌從這裡連結Linkbar網頁 4個功能,也就是說它除了能搜尋 Blog 內部的文章,還能追蹤在這個 Blog 上所有的連結,凍仁就把之前的Google 提供的 AJAX 自訂搜尋引擎換掉囉..

新增 SearchBox
http://draft.blogger.com/ 登入 → 版面配置 → Add Page Element,找到搜尋框 → 加入Blog

搜尋框 (新功能!)
搜尋您的網誌、blogroll 及任何您想連結的內容。已加入


修改Color
新增完,搜尋結果會在 Post(Blog 文章) 上顯示結果,預設的 color 不是凍仁的風格,Font and Color(字型和顏色) 裡也沒得改,只好硬碰硬改CSS囉.. 以下是凍仁的 SearchBox code,只要在紅字部分跟改為自己想要的代碼即可。<div id='searchbar-wrapper'>
<b:section class='searchbar' id='searchbar' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>
<b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != ""'>
  <h2 class='title'><data:title/></h2>
 </b:if>

 <div class='widget-content' style='width:90%'>
  <div expr:id='data:widget.instanceId + "_form"'>
   <span class='cse-status'><data:loadingMsg/></span>
  </div>
 </div>

 <!-- override gsearch.css -->
 <style type='text/css'>

  /* 標題顏色 */
  #uds-searchControl .gs-result .gs-title,
  #uds-searchControl .gs-result .gs-title *,
  #uds-searchControl .gsc-results .gsc-trailing-more-results,
  #uds-searchControl .gsc-results .gsc-trailing-more-results * {
   color:#ff0000;
  }

  /* 已拜訪的標題顏色 */
  #uds-searchControl .gs-result .gs-title a:visited,
  #uds-searchControl .gs-result .gs-title a:visited * {
   color:#ffdb00;
  }

  /* 滑鼠移至標題的顏色,這段得自己補上@@" */
  #uds-searchControl .gs-result .gs-title a:hover,
  #uds-searchControl .gs-result .gs-title a:hover * {
   color:#ffdb00;
  }

  /* Text color*/
  #uds-searchControl .gs-relativePublishedDate,
  #uds-searchControl .gs-publishedDate {
   color:;
}

  /* 網址 */
  #uds-searchControl .gs-result a.gs-visibleUrl,
  #uds-searchControl .gs-result .gs-visibleUrl {
   color:#6EA2E5;
}

  /* SearchBox 框線顏色 */
  #uds-searchControl .gsc-results {
   border-color: #cc0000;
  }

  /* 作用中的標籤 */
  #uds-searchControl .gsc-tabhActive {
   border-color:#cc0000;
   border-top-color:<data:activeBorderColor/>;
   background-color:#cc0000;
   color:#ffdb00;
  }

  /* 無作用的標籤 */
  #uds-searchControl .gsc-tabhInactive {
   border-color:#cc0000;
   background-color:transparent;
   color:#ffdb00;
  }
 </style>

 <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

ps: 真希望那天 Google 也能把它做的像 Firefox 那樣,把自己的搜尋引擎都加進來:P
相關連結:
來試試新玩意之一,Blogger in Draft:訂閱連結

三月 1, 2008
» 【Blogger】Peekaboo Navbar - 自動隱藏/顯示 Navbar

幾乎所有隱藏/顯示的功能在網路上都稱作 Peekaboo (躲貓貓),像是首頁隱藏內文,進入單篇文章再展開這個功能稱作 Peekaboo Post ,Archive Page 內的文章條列式開合也稱作 Peekaboo Recent Post, AJAX 動態選單收合動作也被戲稱為 Peekaboo Menu,要找尋類似的功能,使用 Peekaboo 關鍵字較可找到相關的 Code。

在 Templates 的 body { 前面加入以下code 即可/* ---- 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)}

資料來源:
Peekaboo Navbar :自動隱藏\顯示上方的 Navbar
Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar

» 【Blogger】修改 header 與 Navbar 的間隔

凍仁在更新完 Templates 後發覺 Blog標題 似乎太下面了點,索性在Templates 裡一個一個改.. 沒想到被凍仁矇到了,哈...

修改方法:
header → 標題, Navbar → Blogger上方的工具列

在 自訂 → 修改HTML → 修改範本 裡找到 margin-top: ??px; ,並調整高度即可
#outer-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 20px;
text-align: left;
position: relative;
width: 900px;
}

二月 29, 2008
» 【Blogger】CleanBox 改版完成!!

希望路過的朋友可以給凍仁點建議:P

在 Google 提供的 Blogger 上使用了一個半月了,常在想自己拿預設的 Templates 改成的作品ok 不 ok,最主要的原因是 hack 的配置部分,雖然可以透過 側邊欄褶疊 來節省空間,可還是感覺不太妥。剛好今天 2/28 放假,凍仁就徹夜趕工 使用 Blogger Templates: CleanBox updata Ubuntu 筆記 囉:P

凍仁的 Ubuntu 筆記 v1.0
(Sand Dollar Templates by Jason Sutter )

跟之前比起來.. 應該有簡潔多了,至少凍仁是這麼覺得:P

凍仁的 Ubuntu 筆記 v2.0 beta
(CleanBox Templates by Dzelque)

不過標籤雲這次凍仁放棄了,雖然它的效果很棒!因為在 Otaku 有試過,效果不佳,等那天有心情在玩..

最最最... 最主要多了 header 和 Posts中間的 Linkbar,把重頭戲的分類給區分出來,這樣對使用度上也會增加不少!

配色部分除了之前的 黑色系(#191919, #9A9A9A)、紅(#D40000, #FF0000)、淺紫(#9C9CE0)、淺藍(#91B9E0)之外,還把 黃(#FFDB00) 跟 Ubuntu 的顏色套用進來..

新增
  • header(標題) image
  • dashed, double效果的框線
  • Google`s Search Button 換成圖片
  • No IE`s Button

在這感謝萍兒借給翔的 Javascript & HTML & CSS語法辭典,裡面寫真比Google 詳細多了:P 這樣寫 blog 真的方便很多XD
相關連結:
Design by Dzelque Blogger Templates 2008

二月 28, 2008
» 【Blogger】自訂書籤圖示

雖然在網路上都有很多相關資訊了,不過凍仁還是簡述一下

在 blogger的 修改html 裡找到 <head> ,然後將以下 code 加入底下即可<link href='http://lh3.google.com/devajonny/R7ufPTwaB6I/AAAAAAAAAv4/e1nJGH1Fp-4/s144/Ubuntu_Dragonraja.png' rel='icon' type='image/png'/>

//href='Orz.png' → 記得改為自己的圖示位址XD
//type='image/png' → 這邊就看自己上傳的為那種格式囉@@"


資料來源:
Show Myself Favicon Ico

二月 16, 2008
» 【Blogger】自訂 Code and Reference

常常在各家部落客分享的文章都有 <code> 的功能,而且蠻美觀的,研究了一個下午終於在自家的 Note 也可以使用不用再羨慕別人啦XD

服用後可參考上面的連結,他們寫的比凍仁棒,也比凍仁詳細XD

< Code >

  1. 開啟 Blogger的修改HTML / * 自訂 → 範本 → 修改HTML* /
  2. http://devajonny.googlepages.com/Code_BG.png 圖片貼到自家的 Google Pages
  3. 將以下程式碼貼到</b:skin>上方 → 儲存範本code {
    display: block; / * block(區塊) 建議別亂改XD * /
    background: #1c1c1c url(http://devajonny.googlepages.com/Code_BG.png) left top repeat-y;
    border: 1px solid #999999; / * 框線粗細、樣式、顏色 * /
    color: #91b9e0; / * 文字顏色 * /
    font: $bodyfont;
    font-size: 13px; / * 字體大小* /
    padding: 10px 10px 10px 20px; / *上、右、下、左 * /
    line-height: 1.6em;

    max-height: 1200px;
    letter-spacing: 0px;
    overflow: auto;
    }
  4. 使用方法:在 修改Html 模式底下使用<code>文字</code>包起來
  5. 特殊字元記得使用替代符號
    • < → &lt;
    • > → &gt;
    • & → &amp;
< Reference >
  1. 同上,記得要先有 code 再加 code.ref 原因請參考 [CSS] A Cool blockquote for "Code style" and some blogging tips
  2. 將以下程式碼貼到 </b:skin> 上方 </code> 下方 → 儲存範本code.ref {
    display: block; / * block為區塊,建議別改 * /
    background: #1c1c1c url(http://devajonny.googlepages.com/Code_REF.png) left top repeat-y;
    border: 1px solid #ff0000;
    color:#91b9e0;
    font: $bodyfont;
    font-size: 13px;
    padding: 10px 10px 10px 20px;
    line-height: 1.6em;

    margin: 5px 0 0 15px;
    }
  3. 使用方法:在 修改Html 模式底下使用 < code class="ref" > 文字 < /code > 包起來
ps:紅字部分可自由更改,建議圖片傳到自己的空間比較保險XD
Orz

資料來源:
[CSS] A Cool blockquote for "Code style" and some blogging tips
相關連結:
iPlay99 - 我的線上玩樂誌 - Blogger改造 - 入門介紹及前置動作 - 持續更新
iPlay99 - 我的線上玩樂誌 - Blogger Hack - 在文章中貼上程式碼code範例

» 【Blogger】精美的E-mail貼紙



凍仁之前看到不少 blogger 家裡都有擺這張,現在凍仁也到手啦。羨慕嘛XD
趕快到 E-Mail Icon Generator 認養自己的 Brilliant Button唄。

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



哈,今天 Ubuntu中文正體站 終於通了,寫簽名檔時超想放個 Ubuntu 的貼紙。花了點時間自己畫了一個.. 嘿,不賴吧!想套用了話這邊有原始檔,請自行使用GMIP修改圖層XD

資料來源:
jinnsblog - 部落。美化 - 製作精美的E-Mail貼紙
相關連結:
Lucazappa.com Kalsey hkwebs ZwahlenDesign

» 【Blogger】繼續閱讀及隱藏文字

之前在無名小站有此功能,不用在Blog首頁一次檢視所有的文章,可Google的Blogger預設是沒有此功能的。我們可以透過修改HTML樣本的方式自己新增。

使用 Ctrl + F 快速搜尋 並將以下 code 加到 </b:skin> 底下 ]]></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>


然後將 <p> <data:post.body/> </p> 改為 <b:if cond='data:blog.pageType == "item"'>
 <data:post.body/>
 <b:else/>
 <data:post.body/>
 <br/><a expr:href='data:post.url'> read more... </a>
 </b:if>


寫文章時,直接用<span class="fullpost">...</span>包起來即可<span class="fullpost"> Orz </span>

資料來源:
羊男實驗の咖啡館 - Blogger Beta 中 Read More 與 Archive 只顯示標題 作法

» 【Blogger】標籤雲

由於凍仁才開始寫Blog不到兩個月,CSS又不是很懂真的有門檻阿XD
不過還好上面分享的文章都寫的很詳細,真的要好好謝謝這些前輩,讓我們這些不懂的玩家們可以更容易及快速的上手.. 以下是修改 template 的語法。

修改HTML 裡找到 ]]></b:skin> 並把下面的 code 貼到它之前/* Label Cloud Styles ----------------------------------------------- */
/* 對齊方式 字型 */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
/* 顯示方式可設定成display:block ,設定背景圖片*/
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
/*當標籤雲文章數量顯示為true 可以設定 間距 文字大小,顏色 */
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


接下來把這段 code 貼到 </head> 之前, ]]></b:skin> 之後<script type='text/javascript'>
//改成你自己的blogspot網址
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var cloudMin = 1;
//設定最大文字大小
var maxFontSize = 20;
//設定最熱門標籤的顏色
var maxColor = [0,0,255];
//設定最小文字大小
var minFontSize = 10;
//設定最冷門標籤的顏色
var minColor = [0,0,0];
//標籤雲是否要顯示文章數量 要的話請改true
var lcShowCount = false;
</script>


最後找到 <b:widget id='Label1' locked='false' title='Labels' type='Label'/> 用以下 code 取代它<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


相關連結:
BBoy Light`s 地板 - [Blogger]標籤雲Label Could 自訂樣式
Josh`s Note - Label Clouds(標籤雲) For Blogger
Liang's Blog - Liang's Blog~繼續閱讀、標籤雲、連結列大變身

三月 27, 2007
» AJNeoK Zone

這邊就讓我放些比較不一樣的東西吧 :P~
呵呵
想要把這邊跟雜文鋪分開~
這樣子好認 :P~

support:

biggo.com.tw

biggo.sg

A Django site.