การใส่ช่องค้นหาลงใน Widget เครื่องมือหน้าเว็บเพื่อประหยัดพื้นที่และสังเกตได้ง่ายนั้นสามารถทำได้ดังนี้
ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'การออกแบบ > แก้ไข HTML' (ไม่ต้องสั่ง'ขยายแม่แบบเครื่องมือ')
ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<b:widget id='PageList
ขั้นตอนที่ 3. เมื่อค้นหาก็จะพบโค้ดลักษณะเหมือนด้านล่างนี้
<b:widget id='PageList1' locked='false' title='หน้าเว็บ' type='PageList'/>
ขั้นตอนที่ 4. จากนั้นให้แทนที่โค้ดที่พบในขั้นตอนที่แล้วนั้นด้วยโค้ดข้างล่างนี้
<b:widget id='PageList1' locked='false' title='หน้าเว็บ' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<ul>
<!-- Google custom search box Start -->
<div class='search-box' style='height:22px; margin:3px 1px 0 0; color:#000000; float:right;'>
<form action='http://www.google.com/cse' id='searchform' method='get'>
<input name='cx' type='hidden' value='006897406992532767808:mixuqnmxquy'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Type text to search";}' onfocus='if (this.value == "Type text to search") {this.value = "";}' size='31' type='text' value='Type text to search'/><button type='submit'><span>Search</span></button></input>
</form></div>
<!-- Google custom search box End -->
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
ขั้นตอนที่ 5. กดที่ 'บันทึกแม่แบบ' ก็เสร็จแล้ว
อธิบายเพิ่มเติม
อย่าลืมแทนที่ ID ของเตรื่องมือค้นหาจากเดิมที่เขียนว่า
006897406992532767808:mixuqnmxquy
เพื่อแสดงข้อมูลค้นหาในส่วนที่คุณต้องการ
สำหรับผู้ที่ยังไม่มี ID ของ Google Custom Search Engine ให้ดูวิธีสมัครตามลิงก์บทความด้านล่างนี้ครับ
http://tip.maxlayout.com/2010/07/blogger-google-custom-search.html
นอกจากนี้หากไม่ชอบคำค้นหาเริ่มต้นที่เขียนไว้ว่า
Type text to search
ก็สามารถแทนที่ด้วยคำอื่นที่ชอบได้เลย
และถ้าอยากลดหรือขยายขนาดช่องค้นหานี้ให้แก้ไขที่
size='31'
ส่วนผู้ที่ต้องการปรับแต่งหน้าตาหรือตำแหน่งของเครื่องมือค้นหาได้ที่
<div class='search-box' style='height:22px; margin:3px 1px 0 0; color:#000000; float:right;'>
Credit: http://www.bloggersentral.com/2010/06/add-search-box-in-navigation-bar.html
0 ความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น