添加google AJAX搜索栏加到blogger的侧边栏

第一次写关于hack blogger的文章，稍稍兴奋一下，因为本人是大大大菜鸟，建立这个blogger所有的东西都是从别人那里淘来的，加上自己一个个的try，终于搞出了个自己较为满意的blogger版式。今天分享的是如何给blogger添加google AJAX搜索栏，这个hack是从这里发现了，根据文章的指导折腾了半天，但是always failed,google的侧栏老是跑到外面去，郁闷。经过数番的尝试终于发现了如何hack的方法。

第一步: 到http://code.google.com/apis/ajaxsearch/signup.html申请一个google AJAX搜索API的key，输入你blogger的地址，然后同意google条款，就会得到一个key的代码。

第二步：增加一个新的HTML/JavaScript页面元素到你的blogger，放在你想让此搜索出现的地方，我就是放在右边侧栏的最上方，为了方便在修改html里面找到新增的页面元素的位置，起名为“SEARCH”。

第三步：在模板处点击 修改HTML，选择扩展窗口小部件模板，用以下代码完全替换你刚刚添加的页面元素，用刚刚申请的key替换下面的ABQIAAAAlSyMK4Uax808FId2sH6R。

 <b:widget id='HTML1' locked='false' title='SEARCH' type='HTML'>
 <b:includable id='main'>
 <div id='searchcontrol'>读取中/Loading ..... </div>
 <script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAlSyMK4Uax808FId2sH6R' type='text/javascript'/>


加入CSS样式，这个我try了数次，放在 </head>之前没有作用，只能紧跟着上面的code。
 <style type='text/css'>
.gsc-control {
width: 95%;
}
.gsc-control div {
position: static;
}
form.gsc-search-box {
font-size: 13px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 4px;
margin-left : 0px;
width: 100%;
}
table.gsc-search-box {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
margin-bottom : 2px;
}
table.gsc-search-box td {
vertical-align : middle;
}
td.gsc-search-button {
width : 1%;
}
td.gsc-clear-button {
width : 14px;
}
table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}
td.gsc-branding-text {
vertical-align : top;
}
td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}
td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}
td.gsc-branding-img {
width : 65px;
vertical-align : bottom;
}
table.gsc-branding-vertical td.gsc-branding-text div.gsc-branding-text {
margin-right : 0px;
text-align : center;
}
table.gsc-branding-vertical td.gsc-branding-img-noclear {
text-align : center;
}
div.gsc-branding-img,
div.gsc-branding-img-noclear,
img.gsc-branding-img,
img.gsc-branding-img-noclear {
padding-top : 1px;
}
img.gsc-branding-img,
img.gsc-branding-img-noclear {
margin : 0 0 0 0;
padding-right : 0;
padding-left : 0;
padding-bottom : 0;
border : none;
}
input.gsc-search-button {
margin-left : 4px;
}
div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://www.google.com/uds/css/clear.gif');
cursor : pointer;
}
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}
.gsc-keeper {
color: #3366cc;
text-decoration: underline;
font-size: 13px;
cursor: pointer;
font-weight: normal;
padding-left: 16px;
background-repeat: no-repeat;
background-position: 1px 3px;
background-image: url('http://www.google.com/uds/css/blue_check.gif');
}
.gsc-imageResult .gsc-keeper {
text-decoration: none;
}
.gsc-resultsHeader {
clear: both;
width: 100%;
border-bottom: 1px solid #e9e9e9;
margin-bottom : 4px;
}
.gsc-resultsHeader td.gsc-twiddleRegionCell{
width: 75%;
}
.gsc-resultsHeader td.gsc-configLabelCell{
text-align: right;
width: 75%;
}
.gsc-resultsHeader .gsc-twiddle{
margin-top: 4px;
display: inline;
cursor: pointer;
background-repeat: no-repeat;
background-position: 0px 2px;
}
.gsc-resultsHeader td.gsc-twiddle-closed div.gsc-twiddle{
background-image: url('http://www.google.com/uds/css/arrow_close.gif');
}
.gsc-resultsHeader td.gsc-twiddle-opened div.gsc-twiddle{
background-image: url('http://www.google.com/uds/css/arrow_open.gif');
}
.gsc-resultsHeader .gsc-title{
color: #676767;
margin-right: 10px;
padding-left: 14px;
display: inline;
}
.gsc-resultsHeader .gsc-stats {
color: #676767;
font-size: 11px;
font-weight: normal;
display : inline;
}
.gsc-resultsHeader td.gsc-twiddle-opened .gsc-stats {
display : none;
}
.gsc-results-selector {
display : inline;
}
.gsc-resultsHeader td.gsc-twiddle-closed .gsc-results-selector {
display : none;
}
.gsc-result-selector {
cursor : pointer;
display : inline;
font-size : 13px;
padding-left : 13px;
background-repeat: no-repeat;
background-position: center left;
}
.gsc-one-result {
background-image: url('http://www.google.com/uds/css/one-complex-dark.gif');
}
.gsc-more-results {
background-image: url('http://www.google.com/uds/css/more-complex-dark.gif');
}
.gsc-all-results {
background-image: url('http://www.google.com/uds/css/all-complex-dark.gif');
padding-right : 1px;
}
.gsc-one-result-active .gsc-one-result {
background-image: url('http://www.google.com/uds/css/one-complex-light-blue.gif');
}
.gsc-more-results-active .gsc-more-results {
background-image: url('http://www.google.com/uds/css/more-complex-light-blue.gif');
}
.gsc-all-results-active .gsc-all-results {
background-image: url('http://www.google.com/uds/css/all-complex-light-blue.gif');
}
.gsc-resultsHeader .gsc-configLabel{
color: #676767;
display: inline;
font-size: 11px;
cursor: pointer;
}
.gsc-resultsHeader td.gsc-configLabelCell span.gsc-twiddle-closed {
padding-right: 12px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://www.google.com/uds/css/settings.gif');
}
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}
.gsc-tabsAreaInvisible {
display : none;
}
.gsc-tabHeader {
display: inline;
cursor: pointer;
padding-left: 6px;
padding-right: 6px;
margin-right: 2px;
}
.gsc-tabHeader.gsc-tabhActive {
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-top: 2px solid #ff9900;
color: black;
}
.gsc-tabHeader.gsc-tabhInactive {
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-top: 2px solid #e9e9e9;
background: #e9e9e9;
color: #676767;
}
.gsc-tabData.gsc-tabdActive {
display: block;
}
.gsc-tabData.gsc-tabdInactive {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}
.gsc-resultsbox-visible {
display : block;
}
.gsc-resultsbox-invisible {
display : none;
}
.gsc-results {
clear: both;
padding-bottom: 2px;
}
.gsc-result {
margin-bottom: 10px;
}
.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}
.gsc-result div.gs-watermark {
display: none;
}
.gsc-webResult a div.gs-title {
display: inline;
}
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}
div.gsc-config {
border: 1px solid #e9e9e9;
margin-top: 0px;
margin-bottom: 10px;
padding-top : 2px;
padding-left : 6px;
padding-right : 6px;
padding-bottom : 6px;
}
form.gsc-config {
margin-bottom : 0px;
}
.gsc-configSetting {
margin-top : 6px;
}
.gsc-configSetting_Label {
color: #676767;
}
.gsc-configSettingInput {
color: #676767;
border: 1px solid #e9e9e9;
width: 75%;
}
.gsc-configSettingCheckbox {
color: #676767;
margin-right: 6px;
}
.gsc-configSettingCheckboxLabel {
display : inline;
color: #676767;
}
div.gsc-configSettingSubmit {
margin-top : 8px;
text-align : right;
}
input.gsc-configSettingSubmit {
display: inline;
font-size: 11px;
cursor: pointer;
}
.gsc-results.gsc-imageResult .gsc-imageResult.horizontal{
float: left;
width: 65px;
margin-bottom: 4px;
margin-right: 8px;
text-align: center;
}
.gsc-results.gsc-imageResult .gsc-imageResult.horizontal .gs-imageResult {
height: 41px;
}
.gsc-results.gsc-imageResult .gsc-imageResult.vertical{
float: none;
margin-bottom: 4px;
margin-right: 8px;
text-align: left;
}
.gsc-results.gsc-imageResult .gsc-imageResult.horizontal .gsc-keeper {
background-position: center;
}
.gsc-imageResult .gs-title {
display: none;
}
.gsc-imageResult .gs-visibleUrl {
display: none;
}
.gsc-imageResult .gs-size {
display: none;
}
.gsc-results .gsc-trailing-more-results {
margin-bottom : 10px;
}
.gsc-results .gsc-trailing-more-results,
.gsc-results .gsc-trailing-more-results * {
color: #0000cc;
text-decoration: underline;
}
.gs-result .gs-title,
.gs-result .gs-title * {
color: #0000cc;
text-decoration: underline;
}
.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
}
.gs-relativePublishedDate,
.gs-publishedDate {
color: #6f6f6f;
text-decoration: none;
}
.gs-result a.gs-clusterUrl,
.gs-result .gs-clusterUrl {
color: #008000;
text-decoration: none;
cursor: pointer;
}
.gs-newsResult .gs-publisher {
color: #6f6f6f;
display : inline;
text-decoration: none;
}
.gs-result img.gs-image {
vertical-align : middle;
border : 1px solid #0000cc;
}
.gs-result div.gs-phone {}
.gs-result .gs-directions,
.gs-result .gs-directions * {
color: #3366cc;
font-weight: normal;
text-decoration : underline;
}
.gs-result a {
cursor: pointer;
}
.gs-result .gs-address {
}
.gs-result .gs-snippet {
}
.gs-result .gs-watermark{
font-size: 10px;
color: #7777cc;
}
div.gs-results-attribution {
text-align : center;
margin-bottom : 4px;
}
div.gs-results-attribution,
div.gs-results-attribution * {
font-size : 10px;
color : #676767;
text-decoration : none;
}
div.gs-results-attribution a {
color: #0000cc;
cursor : pointer;
}
div.gs-results-attribution a:hover {
text-decoration : underline;
}
.gs-result .gs-metadata{
color: #676767;
}
.gs-localAd img.gs-ad-marker,
.gs-webAd img.gs-ad-marker {
padding-left: 4px;
}
.gs-localAd a.gs-visibleUrl div.gs-visibleUrl,
.gs-webAd a.gs-visibleUrl div.gs-visibleUrl {
display : inline;
}
.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}
.gs-localAd div.gs-address * {
color : #676767;
}
.gs-localAd div.gs-street {
display: inline;
}
div.gs-city {
display: inline;
}
div.gs-region {
display: inline;
}
div.gs-country {
display: none;
}
div.gs-infoWindow * {
font-size: 11px;
}
.gs-videoResult * {
font-size: 13px;
}

好长好长，我已经删除掉了一些，但是还是so长。

 </style>
 <script type='text/javascript'>

var local="google";
var initSearch="";
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
var s = new GblogSearch();
s.setSiteRestriction("http://arjunadreaming.blogspot.com");
s.setUserDefinedLabel("站内搜索");
searchControl.addSearcher(s);

// Set the Local Search center point
localSearch.setCenterPoint(local);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an initial search
searchControl.execute(initSearch);
 </script>
 </b:includable>
 </b:widget>

把http://arjunadreaming.blogspot.com改成自己的blogger网址。

最后一步，保存！保存！大功告成。
PS：保存之前还是预览一下，还有不要忘了在最开始保存模板。