顯示包含「Blogger Hacks」標籤的文章。顯示所有文章
顯示包含「Blogger Hacks」標籤的文章。顯示所有文章

2007-07-25

Blogger Hack - 結合了AJAX的Google search

如果各位有使用我的Google search,就知道已經對應了AJAX,除了比較美觀外,這功能亦比普通的Google search方便不少,不需轉跳頁面節省時間,減少popup或分頁,而它在搜索結果中已幫好大家分門別類,當要找到專門資料時(例如書籍,影片等),它都能一一幫你分類而不需要在搜尋結果中以肉眼再繼續查找。又是廢話少說,大家依足步驟安裝來享受玩意吧。

第1步,請到google登記API key請按此進,輸入簡單的資料,接受條款後就會得到一個Key

第2步,將以下代碼放到]]></b:skin>與</head>之間

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<style type="text/css">
.gsc-control {
width: 95%;
}
</style>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("The First Dimension");
blogSearch.setSiteRestriction("http://kazyrix.blogspot.com");
searchControl.addSearcher(blogSearch, options);
siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("Internet");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));
// execute an inital search
searchControl.execute(initSearch);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>

之後將剛在申請到的key替換到代碼中紅色key的位置,另外請自行把網誌的URL及網誌名稱改回自己的名稱及URL(紅色的兩欄),之後就可以保存。

第三步,切換到網頁元素(如出現API提示信息,不用理會,直接按確定),建立兩個頁面元素(位置請選擇自行想顯示的地方)放進以下代碼

<div id="search_control">讀取中/Loading...</div>

上面的搜尋框,下面的是結果,記著是分開放的

<div id="somewhere_else">讀取中/Loading...</div>

如果要自定結果分類,就在第2步的代碼中找到

searchControl.addSearcher(siteSearch, options);
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());
就在最後一個)前加上, options,就像上面的代碼第一行那例子一樣。

當一切儲存後,就可感受一下這個玩意了。教學出自GG派
P.S.應該下一次blogger更新就會直接加進這功能,只需在網頁元素一鍵添加,現在我放出只是先載先享受。

2007-07-23

First Dimension on blog!

經歷數日測試,新Template終於隆重登場,幾乎完全出於自己手筆(當然有部份都要參考或copy別人的),可謂真真正正心血結晶,由以前對CSS一曉不通,經過一番磨練後,都算是學多一門技術,雖然只是一點點基本,但都好滿足及興奮,有如一個文盲學了一句英文四字真言那樣。

這次採用最基本的css body,方便去加裝字型變更(於左方的小navitab),這個是前代Template的遺憾,終於在新版中勾除,而且亦追加不少新widgets及技術,以滿足我對web2.0的慾望,包括繼續運用AJAX,而這次並不止Label用上,就連google search都用上這eye candy技術(有時會想到底有幾多人會用我個search engine?應該不多吧),雖然未必一定實際,但已能夠滿足我的獸性。

本來這次製作過程都有不少阻滯,但離奇這次所寫的Script引發出的IE bugs不多,在對線位及欄位時,都沒出現框架及字體爆破的情況,反倒在增加widgets時,就發生了不少錯誤,就連我安裝Ajax label cloud時都發生了不知明的相衝,本以為是script放置有誤導致衝突,後來才發現是在upload js時發生了人為的小錯誤,亦可以說這次所有的錯誤都是人為疏忽,但對我這新手,不要要求太多了,能運作已滿足。

可能近日都會繼續改版面(可能是找bug),務求做到最滿意為止,如果所有bug都清除好,可能會將這個template放出供大家下載。而這次的template已被命名與本blog同名的First Dimension

2007-07-19

Blogger Hack - 極度簡易安裝Blogger外掛功能

直忘記了阿土伯有這個超級簡易安裝widgets的外掛打包。而Josh更將其改為一鍵式方便安裝貼於googlepage內。
其功能包括
1. 隱藏Blogger NavBar(預設浮動隱藏)
2. 隱藏widget(預設隱藏)
3. 表情符號(符號集為Yahoo)
4. 繼續閱讀功能
5. Sidebar側邊網頁元素(折收/展功)功能
6. 作者的回應高亮度顯示
7. 標籤雲Label Cloud功能
8. Sidebar側邊網頁元素Icon圖示功能
9. 社群書籤功能(預設七組)

建議安裝前請backup,如需移除的話,只要到自訂>網頁元素>移除##HIDEME##那個widget即可,要進行參數修改也是按入##HIDEME##便可以了。




按圖安裝

2007-06-30

Blogger Hack - 在Header加上連結框(Navitab@header)


個script也是自己剛用上,看到有朋友問起就決定寫教學了。首先到範本>修改HTML,將以下script放到<head></head>裡頭,建議放到header一欄下方,方便尋找以及修改。



#navitabs
{text-align:left;background:
margin:0px 0px 0px 0px;
}

.navitab{
padding:4px 8px 4px 8px;
margin:0px 0px 4px 0px;
text-decoration:none;
letter-spacing:0px;
background:#323232 url() bottom right repeat-x;
border-top:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
}

.navitab:hover{
text-decoration:none ;
background:#646464 url() bottom right repeat-x;
}

p.navitabs {margin: 80px 0cm 0cm 20px}

之後在修改範本中尋找div id='header'(可能是其他代號,總之就是標頭那個div),將以下的script放到</div>下方。


<div id='navitabs'>
<p class='navitabs' style='text-align:left'>
<a class='navitab' href='http://yourblog.blogspot.com'><span style='color:#ffffff;'>Home</span></a>
<a class='navitab' href='Linkurl2'><span style='color:#ffffff;'>Link2</span></a>
<a class='navitab' href='Linkurl3'><span style='color:#ffffff;'>Link3</span></a>
<a class='navitab' href='http://kazyrix.blogspot.com'><span style='color:#ffffff;'>The First Dimension</span></a>
<a class='navitab' href='mailto:yourmail@email.com'><span style='color:#ffffff;'>Email Me</span></a></p>
</div>

請自行修改自己需要的連結(linkurl 2,3)及連結名稱(link 2,3),字體顏色及位置也可隨意修改,要再增加連結框就多複製一行<a class='navitab' href='Linkurl4'><span style='color:#ffffff;'>Link4</span></a>,如此類推。這個很簡單的一個Navitab,複雜的我不太會(我其實對script研究不深,都是自己拿別人的script左試試右試試),不過希望幫到大家吧。

2007-06-29

Blogger Hack - Reference Blogs


實要包裝自己的blogger,方法真的很多,而且教學大部份都是轉來轉去,來來去去都是差不多的,到最後怎去運用,就要考考自己的創意,因為script是死,大家都是用同一樣的東西,只差在你怎去發揮。所以今次都貼一下一些參考網頁(自己懶去寫教學的籍口),讓大家去自行摸索吧。
首先的是
Kaie's Blog(近來少上線了,很不錯的一位hacker,我在他身上學到不少,很多東西都是問他的)
Ben's部落不及格(他跟Kaie一樣很愛幫別人,亦很有創意,更解決不少IE Bugs問題)
良大的大秘寶(我沒有跟他討論過blogger hacks,但blog的教學不少)
透明藍樂摸(雖然很多是轉載,但可以說他集合不少blogger hacks的總匯)
以上4位朋友都會幫各網友的,大家亦不妨參考他們的blog,不過轉載的話記得要cc,這是最普通的尊重。

2007-06-27

Blogger Hack - LightBox顯示圖片


Lightbox功能,字面上可能不太明白是什麼,要知道有多華麗就按以下這圖

想得到這種效果嗎?就跟著步驟...
STEP:1
到範本(templates)>Edit Html,再找以下代碼

]]></b:skin>
</head>
<body>
將以下的script插入到]]></b:skin>與</head>之間。


STEP:2
於每次貼圖時插入此Script

小圖的url是http://img228.imageshack.us/img228/6883/104357ao3.th.jpg,而大圖的url是 href="http://img228.imageshack.us/img228/6883/104357ao3.jpg,每次想用到lightbox時就用這貼圖方法就可以了。

最後如果在blog第二頁後不能使用lightbox功能就請在</body>前面加上以下片段。



轉自良大的大秘寶

2007-06-25

Blogger Hack - 最新文章與最新回應


從有了callback功能後,多了不少blogger user運用聯播系統,而這次就介紹這個最新文章及最新回應的功能。
教學在此網↓,跟著步驟就可以了。
堯@部落格
謹記:建立的JavaScript/HTML的元素,擺放位置隨個人喜好,但主script一定要放在最新文章及最新回應之上。
如你只想用最新回應(詳見我這個Blog的右邊sidebar),到這裡輸入要求所需的,運用產生器就能輕鬆加入script了。

2007-06-21

Blogger Hack:下拉式選單產生器


家的Blogger可能都有不少的連結,可能是連結朋友的blog或一些有趣的網站,有些時候連結太多會造成版面礙眼,有損美觀,亦會拖慢連結的速度。有見及此,我在這裡推薦一個我也有使用的下拉式選單產生器。
請按此
這網站有詳細教學,跟足步驟就可以了,有什麼不明白可以詢問該網主,亦可詢問我。
此教學轉自colaccl...


For blogger-templates.blogspot.com
Blogger Hack-"Hierarchical-Link menu" can make the blog looks clean!
It's convenient to publish the link with this...
Click this!Go this site and get the script with ease!

2007-05-23

Blogger needs hacker


個Blog最後都能用到AJAX、JSON這新技術(我特別喜歡點擊圖片後的那個lightbox功能),這一切的成功除了自己我摸索外,都多得一班Blogger hackers的用心教學及講解,而且一一為我解答不少問題,在此感謝各位的協助,在此特別感謝Kaie。其實一直覺得這班hackers確實厲害,而且不問酬勞,一直都想去表揚了,所以有朝一日我都會在此開班做些小教學,推廣blogger及偉大的Java script!

這blog始終還有一個功能我是最想使用的,就是可以給訪客們在瀏覽時選擇喜歡的字型大小及layout,但礙於我的template問題,最後還是做不到(會令我的blog拉闊了),算是遺憾吧,我本應很想做到更user friendly!算了,說不定他朝一日會找到解決方法。



在link中有Kaie's blog連結,內含大量blogger教學!