2 วิธีติดตั้ง Search Box สวย ๆ บน Blogger

บทความนี้เป็นการสอนติดตั้ง Search Box บน Blogger ในกรณีที่ Template ของคุณนั้นไม่มีการติดตั้ง Search box ก่อนหน้านี้ และในบทความนี้จะนำเสนอทั้งสิ้น 2 รูปแบบด้วยกัน ทั้งนี้เพื่อเป็นทางเลือกในการติดตั้งมากขึ้นโดย

แบบที่ 1 จะเป็นรูปแบบที่ติดตั้งง่าย ปรับแต่งง่าย แต่จะต้องใช้รูปภาพ
แบบที่ 2 เป็นรูปแบบสร้างด้วย CSS Style ล้วน ๆ

สอนทำบล็อก

ขั้นเตรียมการ

ก่อนอื่นคุณควรจะ Backup Template เอาไว้ก่อน และถ้ากรณีที่ใน Template ของคุณนั้นมีการติดตั้ง Search box ก่อนหน้านี้ให้ลบ Search Box ของเก่าออกเสียก่อน แต่ถ้า Template ของคุณยังไม่เคยติดตั้ง Search box ก่อนหน้านี้ก็ให้ข้ามไปขั้นติดตั้งจริงได้เลย

ขั้นตอนการลบ Search box

กรณีที่ใน Template ของคุณนั้นมีการติดตั้ง Search box ก่อนหน้านี้ก็จะต้องทำการลบของเก่าออกจาก Template เสียก่อน  โดยจะต้องลบโค้ดออก 2 ส่วนได้แก่

 (1) ลบ CSS ของ Serch box อันเก่าออก ซึ่งทำโดย ค้นหาข้อความใน Template โดยใช้คำค้นว่า  Search ซึ่งจะพบโค้ดลักษณะนี้

สอนทำ blogger
ให้ทำการลบชุดโค้ดที่สัมพันธ์กับ Serach Box ทิ้งไปให้หมด (สังเกตว่าจะมีคำว่า Search เกี่ยวข้อง)

(2) ขั้นต่อมาเราจะลบ HTML ของ Serch box อันเก่าทิ้งไปเช่นกัน ซึ่งทำได้โดยค้นหาข้อความใน Template โดยใช้คำค้นว่า  Search เช่นเดียวกับขั้นที่ 1 ซึ่งจะพบโค้ดลักษณะต่อไปนี้

สอนทำ blospot
ให้ทำการลบโค้ดดังกล่าวทิ้งไปให้หมด

หมายเหตุ โค้ดที่ยกตัวอย่างอาจจะไม่เหมือนกับโค้ดที่คุณพบใน Template ของตัวเอง แต่ก็จะมีลักษณะคล้ายคลึงกัน และถ้าหากคุณไม่แน่ใจในการลบก็ให้สอบถามผมที่กล่อง Comment ด้านล่างบทความนี้ก่อน






วิธีติดตั้ง Search Box แบบที่ 1

Log in Blogger เข้าไปที่  >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ขั้นที่ 1.1 ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#hackublogsearch {
width:201px;
height:24px;
background-image:url(http://sites.google.com/site/hackublogpicture/server/searchtop-black.gif);
background-repeat:no-repeat;
position:absolute;
top:30px;
right:15px;
}
.hackublogsearch_input {
float:left;
padding-left:4px;
width:160px;
height:20px;
border:0px solid red;
background-color:transparent;
font-family:Lucida Sans Unicode, Arial;
font-size:12px;
color:#fff
}
.hackublogsearch_submit { float:left; border:0px solid red; background-color:transparent; }


ขั้นที่ 1.2 ต่อเนื่องจากขั้นที่ 1.1 ให้ค้นหาโค้ด <div id='wrapper'> หรือ <div id='outer-wrapper'>
แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว

<div id='hackublogsearch'>
<form action='/search' id='searchform' method='get'>
<input class='hackublogsearch_input' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog..&quot;;}' onfocus='if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;;}' type='text' value='Search this blog...'/>
<input class='hackublogsearch_submit' name='submit' src='http://sites.google.com/site/hackublogpicture/server/top_search_submit.gif' type='image'/>
</form>
</div>

แนวทางการปรับแต่ง

► โค้ด http://sites.google.com/site/hackublogpicture/server/searchtop-black.gif คือรูปพื้นหลัง Search Box ในที่นี้เป็นสีดำ คุณอาจเลือกใช้ภาพสีอื่น ๆ ก็ได้เช่น

สีน้ำเงิน
 สอนสร้าง blogger
http://sites.google.com/site/hackublogpicture/server/searchtop-blue.gif

สีแดง
วิธีสร้าง blogger

http://sites.google.com/site/hackublogpicture/server/searchtop-red.gif

สีเทา
วิธีทำบล็อก 
http://sites.google.com/site/hackublogpicture/server/searchtop-gray.gif

► และโค้ด top:30px; right:15px; คือระยะห่างจากด้านบนและทางขวา คุณสามารถปรับแต่งได้ตามใจ 

สอนแต่งบล็อก







วิธีติดตั้ง Search Box แบบที่ 2

Log in Blogger เข้าไปที่  >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ขั้นที่ 2.1 ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#Hackublogsearch {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:1px solid #fff;
display:inline;
float:left;
height:26px;
margin-left:720px;
margin-top:–62px;
padding:2px;
width:249px;
}
#Hackublogsearch form {
margin:0;
padding:0;
}
#Hackublogsearch fieldset {
border:medium none;
margin:0;
padding:0;
}
#Hackublogsearch p {
font-size:85%;
margin:0;
}
#Hackublogsearch ,#Hackublog_s{background:#D6D6D6 none repeat scroll 0 0;}
#Hackublog_s {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
color:#FFFFFF;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:small-caps;
font-weight:normal;
line-height:normal;
margin:0;
padding:5px;
width:175px;
}
input#Hackublogsearchsubmit {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background: #808080 none repeat scroll 0 0;
border:none;
color:#D7D7D7;
font-size:12px;
font-variant:small-caps;
display:inline;
float:right;
height:26px;
margin:0;
}
input#Hackublogsearchsubmit:hover {color:#fff;}


ขั้นที่ 2.2 ต่อเนื่องจากขั้นที่ 2.1 ให้ค้นหาโค้ด

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mystyle (ส่วนหัว)' type='Header'/>
</b:section>

แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว

<div id='Hackublogsearch'>
<form action='/search' id='searchform' method='get'>
<input id='Hackublog_s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog..&quot;;}' onfocus='if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;;}' type='text' value='Search this blog..'/>
<input id='Hackublogsearchsubmit' type='submit' value='Search'/>
</form>
</div>

ซึ่งเมื่อวางโค้ดลงไปแล้วตำแหน่งที่วางจะเป็นดังรูป

สอนสร้างบล็อก

แนวทางการปรับแต่ง

► โค้ด margin-left:720px; คือค่าที่ใช้กำหนดตำแหน่งโดยวัดระยะห่างจากทางซ้าย และค่า margin-top:–62px;  คือค่าที่วัดระยะห่างจากด้านบน ซึ่งถ้ากำหนดค่าเป็นลบก็จะเป็นกลายเป็นการร่นระยะจากด้านบน

สอนแต่ง blogger

► ส่วนการปรับแต่งอื่น ๆ เช่นสีพื้นหลังสามารถปรับแต่งได้จากโค้ด

#Hackublogsearch ,#Hackublog_s{background:#D6D6D6 none repeat scroll 0 0;}
วิธีติดตั้ง Search box บน blogger
background: #808080 none repeat scroll 0 0;
Search box บน blogspot
color:#D7D7D7;

โค้ด Search box

เมื่อดำเนินการเสร็จสิ้นทั้ง 2 ขั้นตอนและปรับตำแหน่งเป็นที่พอใจแล้วก็ทำการบันทึกแม่แบบก็จบขั้นตอนการติดตั้ง Search บน Blogger ครับ

ตอนนี้มีความคิดเห็น : 7 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ผมใช้ search box ของ blogspot เวลาค้นหามันแสดงผลเป็นภาษาต่างดาว
    เว็บผม igetnews.blogspot.com ลองค้นหาดูด้านขวา

  1. @ i design : เป็นเหมือนกันทุกคนครับ มันใช้สคริปต์ในการทำงานก็จะมีปัญหากับภาษาไทยแบบนี้แหละครับ ต้องแจ้งกับ Google ครับ ว่า Search box แสดงผลผิดพลาดในภาษาไทย แม้แต่กระทั่ง Facebook ก็เป็นครับ

  1. เวลาค้นหา แล้วมันไม่ค้นทั้งคลังอ่ะค่ะ มันแสดงผลแค่บทความใหม่ๆ เท่านั้นเอง เก่าๆมันหาไม่เจอ ทำไงดีคะ?
    www.doo-series.com

  1. ขอบคุณมากจริงๆครับ ผมว่ามันค้นหาได้ดีกว่า search box ของ blogspot เยอะเลยครับ

  1. ขอบคุณมากครับ

  1. ขอบคุณมากครับ
    ว่าแต่ผมจะให้มันอยู่ทางซ้ายมือต้องแก้ตรงครับ

  1. ถ้าเกิดเราจะเปิดเว็บไซต์ของเราเองแบบว่าให้คนหาไปหน้า google เราต้องทำยังไงหรอครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel