วิธีการทำ search google api ใน bloggerดูตัวอย่างครับ http://theniti.blogspot.com/2010/01/blog-post.html
ไม่ยากครับมาดูวิธีทำกันเลยครับ ตอนแรกผมจะเอาโค้ดใส่ไว้ที่ ไซต์ google ครับแต่ไม่เอาดีกว่า ถ้าคนเริ่มทำคงหาทางแก้ยากผมเลยเอาทุกอย่างมาอัดไว้หน้าเดียวครับ ขออภัยน่ะครับเราก็ login blogger ของเราครับแล้วก็เข้าไปสร้างหน้าใหม่ครับ
แล้วเราก็ใส่ css ลงไปครับปรับ ค่าcss ตามความกว้างของ blogger ของตัวเองด้วยน่ะครับ

<style type="text/css">
/*http://tutorialzine.com/2010/09/google-powered-site-search-ajax-jquery*/
.clear{clear:both; line-height:0; height:0; font-size: 1px}
#page{
 width:620px; /* ความกว้าง */
 background-color:#C0C0C0;
}
#searchForm{
 /* The search form. */
clear:both;
 background-color:#4C5A65;
 padding:0;
 margin:0;
 -moz-border-radius:16px;
 -webkit-border-radius:16px;
 border-radius:16px;
}
fieldset{
 border:none;
}
#searchInputContainer{
 /* This div contains the transparent search box */
 width:420px;
 height:36px;
 background:url("http://sites.google.com/site/nitiblog/search/searchBox.png") no-repeat;
 float:left;
 margin-right:12px;
}
#s{
 /* The search text box. */
 border:none;
 color:#000;
 background:url("http://sites.google.com/site/nitiblog/search/searchBox.png") no-repeat;
 float:left;
 font-family:Arial,Helvetica,sans-serif;
 font-size:15px;
 height:36px;
 line-height:36px;
 margin-right:12px;
 outline:medium none;
 padding:0 0 0 35px;
 text-shadow:1px 1px 0 white;
 width:385px;
}
/* The UL that contains the search type icons */
.icons{
 list-style:none;
 margin:10px 0 0 335px;
 height:19px;
 position:relative;
}
.icons li{
 background:url("http://sites.google.com/site/nitiblog/search/icons.png") no-repeat;
 float:left;
 height:19px;
 text-indent:-9999px;
 cursor:pointer;
 margin-right:5px;
}
/* Styling each icon */
li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}
li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}
li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}
li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}
span.arrow{
 /* The little arrow that moves below the icons */
 width:11px;
 height:6px;
 margin:21px 0 0 5px;
 position:absolute;
 background:url('http://sites.google.com/site/nitiblog/search/arrow.png') no-repeat;
 left:0;
}
/* The submit button */
#submitButton{
 background:url('http://sites.google.com/site/nitiblog/search/buttons.png') no-repeat;
 width:83px;
 height:36px;
 text-indent:-9999px;
 overflow:hidden;
 text-transform:uppercase;
 border:none;
 cursor:pointer;
}
#submitButton:hover{
 background-position:left bottom;
}
/* The Search tutorialzine.com / Search the Web radio buttons */
#searchInContainer{
 float:left;
 margin-top:12px;
 width:330px;
}
label{
 color:#000;
 cursor:pointer;
 font-size:11px;
 position:relative;
 right:-2px;
 top:-2px;
 margin-right:10px;
 white-space:nowrap;
 /*float:left;*/
}
input[type=radio]{
 cursor:pointer;
 /*float:left;*/
}
/* Styling the search results */
.pageContainer{
 /* Holds each page with search results. Has an inset bottom border. */
 border-bottom:1px solid #5e7481;
 margin-bottom:50px;
 /* Adding a dark bottom border with box shadow */
 -moz-box-shadow:0 1px 0 #798e9c;
 -webkit-box-shadow:0 1px 0 #798e9c;
 box-shadow:0 1px 0 #798e9c;
}
p.notFound{
 text-align:center;
 padding:0 0 40px;
}
/* Web & news results */
.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{ 
 background-color:#5D6F7B;
 font-size:18px;
 font-weight:normal;
 padding:8px 20px;
 /* Applying CSS3 rounded corners */
 -moz-border-radius:18px;
 -webkit-border-radius:18px;
 border-radius:18px;
}
.webResult h2 b{ color:#fff; }
.webResult h2 a{ color:#eee;border:none;}
.webResult p{ line-height:1.5;padding:15px 20px;}
.webResult p b{ color:white;}
.webResult > a{ margin-left:20px;}
/* Image & video search results */
.imageResult{
 float:left;
 height:180px;
 margin:0 0 20px 40px;
 text-align:center;
 width:152px;
 overflow:hidden;
}
.imageResult img{ display:block;border:none;}
.imageResult a.pic{
 border:1px solid #fff;
 outline:1px solid #777;
 display:block;
 margin:0 auto 15px;
}
/* The show more button */
#more{
 width:83px;
 height:24px;
 background:url('http://sites.google.com/site/nitiblog/search/more.png') no-repeat;
 cursor:pointer;
 margin:40px auto;
}
#more:hover{
 background-position:left bottom;
}
</style>

ตามด้วย javascript เราก็แก้จาก url blogger ของผมป็นของตัวเองน่ะครับ

แล้วก็ tagตัวแสดงผลครับ คืออิลิเมนต์นั้นเองครับ

                          


                 Search                                  Search The Web    

Web
Images
News
Videos

บันทึกครับเป็นอันเสร็จครับ เพิ่มเติมนะครับสำหรับคนที่อยากเอามาใช้แทนsearch ของ bloggerครับ เราสามารถดัดแปลงโค้ดนี้ให้อยู่ที่หน้าแรกได้ครับโดย เพิ่มโค้ด css กับ javascrip ไว้ที่ ส่วนหัวของโด้ดครับ แล้วก็เพิ่ม widget เมนูด้านข้างครับ หรือที่ไหนก็ได้ตามใจครับ เพิ่มwidget เป็น html/javascript แล้วก็ใส่ form ลงไปครับ

            
            



                Search
                
                Search The Web


Web
Images
News
Videos

บันทึกแล้วก็ ใส่ tag แสดงผลไว้ที่ท่านต้องการครับตัวอย่างเช่นผมอาจเอามาใส่ใต้สไลด์โชว์ของผมก็ได้ครับ

ขอบคุณ cradit