Blogger: เปิดช่องค้นหาบนแถบปุ่มเลือกหน้า

การใส่ช่องค้นหาลงใน 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 + &quot;_select&quot;'>
        <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'>&amp;#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 == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}' onfocus='if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}' 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

Post Status




0 ความคิดเห็น:

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