วิธีสร้าง Menu สวย ๆ บน Blogger ด้วย Gadget Linklist

มีหลายบทความในบล็อกนี้ที่ได้สอนให้คุณสร้าง Menu ให้กับ Blogger ของคุณ เช่นบทความ วิธีสร้าง CSS Menu บน Blogger ด้วยโปรแกรมสำเร็จรูป หรือ  Multi Drop Down Menu รูปแบบใหม่ เป็นต้น


สอนทำ blogger
บทความนี้เป็นอีกบทความหนึ่งที่จะสอนให้คุณสร้าง Navigation Menu หรือในที่นี้ขอเรียกสั้น ๆ ว่า Menu โดยการดัดแปลง Gagdget ชนิดหนึ่งบน Blogger ที่เรียกเป็นภาษาไทยว่า รายชื่อลิงก์ หรือโดยทั่วไปเรียกว่า Linklist

สอนทำบล็อก

ข้อดีของการสร้างเมนูด้วยวิธีนี้คือ

1. เมื่อติดตั้งแล้วสามารถคุณสามารถเพิ่มรายการลิงค์ได้อย่างง่ายดาย โดยไม่ต้องเข้าไปแก้ไข HTML
2. สามารถสลับตำแหน่งของรายการในเมนู หรือลบรายการที่ไม่ต้องการได้อย่างง่ายดาย
3. ผลลัพธ์มีรูปแบบสวยงาม
4. สามารถดัดแปลงให้มีกล่องค้นหา (search box) อยู่ในเมนูนี้ได้ด้วย

สำหรับตัวอย่างของเมนูนี้คุณสามารถดุได้ที่ >> Navigation Munu Using Linklist Gadget DEMO


วิธีติดตั้ง

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

ขั้นที่ 1 ติดตั้ง CSS โค้ด

ค้นหาโค้ด ]]></b:skin> แล้วเลือกโค้ดอันใดอันหนึ่งจากทั้ง 2 แบบนี้วางลงไปก่อนหน้าโค้ดดังกล่าว
(ทั้ง 2 แบบต่างกันตรง Search Box)

แบบที่ 1

วิธีทำ blogger

/*Navigation Menu+ Search box hacked by hackublog.blogspot.com */
div#navmenusearch {
width: 100%; margin: 0; padding: 0; height: 40px;
background: #D2D2D2 none; border-bottom: 1px solid #fff;
}
div#navmenusearch-wrapper { margin: 0 auto; width: 98%; }
div#navmenu { float: left; height: 40px; }
div#navmenu ul { display: block; list-style-type: none; margin: 0 auto; padding: 0; height: 40px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0; float: left; height: 40px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 0 18px; height: 40px; line-height: 40px;
font-family: copperplate gothic light,Arial,Helvetica,sans-serif;font-size:12px; font-weight: bold;
color:#3D3D3D;text-shadow:0.5px 0.5px 0.5px #ffffff;
outline: none;
}
div#navmenu ul li a:hover, div#navmenu ul li a:focus {
color:#ffffff;
text-shadow:none;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
padding: 0 17px;
background: #6D6D6D; text-decoration: none;
}
div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
padding: 0 17px;
background: #6D6D6D; text-decoration: none;
}
div#search { float: right; height: 40px; padding: 0 10px 0 0; }
div#search form { padding: 8px 0 0 0; }
div#search input { border: 0; padding: 4px 10px 0 10px; width: 271px; height: 18px; }
div#search input {font-family:copperplate gothic light,Arial,Helvetica,sans-serif; font-size: 11px;}
div#search input { color: #720000; background: transparent url(http://upic.me/i/6x/inputsearchgray.gif) left top no-repeat;}



แบบที่ 2

blogger template

/*Navigation Menu+ Search box hacked by hackublog.blogspot.com */
div#navmenusearch {
width: 100%; margin: 0; padding: 0; height: 40px;
background: #D2D2D2 none; border-bottom: 1px solid #fff;
}
div#navmenusearch-wrapper { margin: 0 auto; width: 962px; }
div#navmenu { float: left; height: 40px; }
div#navmenu ul { display: block; list-style-type: none; margin: 0 auto; padding: 0; height: 40px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0; float: left; height: 40px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 0 18px; height: 40px; line-height: 40px;
font-family: copperplate gothic light,Arial,Helvetica,sans-serif;font-size:12px; font-weight: bold;
color:#3D3D3D;text-shadow:0.5px 0.5px 0.5px #ffffff;
outline: none;
}
div#navmenu ul li a:hover, div#navmenu ul li a:focus {
color:#ffffff;
text-shadow:none;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
padding: 0 17px;
background: #6D6D6D; text-decoration: none;
}
div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
padding: 0 17px;
background: #6D6D6D; text-decoration: none;
}
div#search { float: right; height: 40px; padding: 0 10px 0 0; }
div#search form { padding: 8px 0 0 0; }
div#search input { border: 0; padding: 4px 10px 0 10px; width: 200px; height: 18px; }
div#search input {font-family:copperplate gothic light,Arial,Helvetica,sans-serif; font-size: 11px;}
div#search input { color: #720000; background: transparent url(http://upic.me/i/5s/inputsearch.png) left top no-repeat; text-align:center;}




ขั้นที่ 2 ติดตั้ง HTML

ต่อเนื่องจากขั้นที่ 1 ในขั้นนี้เป็นการวางตำแหน่งเมนูที่คุณต้องการ เช่น ถ้าหากต้องการไว้ที่ตำแหน่งเดียวกับ ใน DEMO ให้ทำโดย

ค้นหาโค้ด <div id='content-wrapper'>( ถ้าหาโค้ดที่ว่าไม่เจอลองค้นหาโค้ด <div id='content'>)

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

<!-- Navigation Menu With Search box hacked by Hackublog -->
<div id='navmenusearch'>
<div id='navmenusearch-wrapper'>
<div id='navmenu'>
<b:section class='navmenu' id='navmenu' preferred='yes' showaddelement='no'>
<b:widget id='LinkList99' locked='true' title='Add link here for Navigation' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='search'>
<form id='searchform' method='get' action='/search'>
<div><input type='text' name='q' id='s' size='25' onfocus='doClear(this)' value='Search'/></div>
</form>
</div>
</div>
</div><!-- End Nav -->


เมื่อวางโค้ดลงไปแล้วให้แสดงตัวอย่างดูคุณจะเห็นผลลัพธ์ดังนี้ (ซึ่งจะยังไม่เห็นลิงก์ใด ๆ เลย)

สอนทำ blogspot

หากพึงพอใจในตำแหน่งของผลลัพธ์แล้ว ทำการบันทึกแม่แบบ


ขั้นที่ 3 วิธีเพิ่ม/ลบ และจัดการกับเมนู

Login เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า

จะพบว่ามี Gadget ที่ชื่อว่า Add link here for Navigation  ให้คลิกแก้ไข Gadget นี้เพื่อเพิ่ม/ลบ หรือจัดการกับเมนู

 blogger menu

เมื่อเข้ามาที่การแก้ Gadget แล้วเพิ่มรายชื่อลิงค์ที่คุณต้องการเข้าไปตามใจชอบ โดยทำตามข้อแนะนำดังนี้

3.1 ไม่ต้องใส่เมนู Home เพราะผมได้ใส่ไปให้แล้ว

สอนทำ Google Adsense


3.2 ควรตั้งชื่อสั้น ๆ เพื่อไม่ให้เปลืองเนื้อที่

3.3 ควรใส่รายชื่อหรือรายการของลิงก์ไม่เกิน 7-8 รายการเพราะพื้นที่ของเมนูมีจำกัด

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

4. คุณสามารถลบ หรือเลื่อนสลับตำแหน่งก่อนหลังได้ ดังนั้นไม่ต้องกังวลเรื่องลำดับของการเพิ่มรายชื่อลิงก์ว่าอันใดจะมาก่อน/หลัง

ซึ่งถ้าหากจัดการเสร็จสิ้นแล้ว ผลลัพธ์ที่ได้เป็นดังนี้ครับ

สอนแต่งบล็อก
หากคุณมีปัญหาในการติดตั้งโปรดสอบถสมที่กล่อง Comment ด้านล่างบทความนี้ครับผม สุดท้ายหวังว่าบทความนี้จะเป็นประโยชน์กับ blogger ทุกท่านครับ สวัสดีครับ

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

  1. หนึ่ง

    มีแบบไม่มี search มั้ยครับ พอดีมี search อยู่แล้ว

  1. @ คุณหนึ่ง

    1. โปรดแจ้งบล็อกด้วยครับ ส่วนใหญ่ผมจะตอบคำถามให้เฉพาะสมาชิกเท่านั้น
    2. วิธีตัด Search box ออก

    ในขั้นที่ 1 ให้ลบโค้ดต่อไปนี้
    div#search { float: right; height: 40px; padding: 0 10px 0 0; }
    div#search form { padding: 8px 0 0 0; }
    div#search input { border: 0; padding: 4px 10px 0 10px; width: 200px; height: 18px; }
    div#search input {font-family:copperplate gothic light,Arial,Helvetica,sans-serif; font-size: 11px;}
    div#search input { color: #720000; background: transparent url(http://upic.me/i/5s/inputsearch.png) left top no-repeat; text-align:center;}

    และในขั้นที่ 2 ลบโค้ดต่อไปนี้ออก
    <div id='search'>
    <form id='searchform' method='get' action='/search'>
    <div><input type='text' name='q' id='s' size='25' onfocus='doClear(this)' value='Search'/></div>
    </form>
    </div>

  1. มาเพิ่มเติมจากหนึ่งค่ะ

    http://nutsarablog.blogspot.com/

    ลองแสดงตย.แล้ว แถบสีเทามันเลยไปตรงสีชมพูเต็มแถบความกว้างของหน้าเลย มีวิธีปรับมั้ยค่ะ จะให้มันอยู่แค่สีขาว

    หรือมีวิธีอื่นง่ายกว่านี้มั้ยคะ (ไม่รู้เรื่องเกี่ยวกับคอมมาก ๆ เลยค่ะ)

    เคยลองทำ แบบเพิ่ม gadget หน้าเว็บแล้ว แต่มันขึ้น read more ด้วย ไม่อยากให้ขึ้นตรง gadget หน้าเว็บ อ่่ะค่ะ

  1. ตอบคุณ bebetalala

    แก้โค้ด div#navmenusearch-wrapper { margin: 0 auto; width: 962px; }

    เป็น div#navmenusearch-wrapper { margin: 0 auto; width: 98%; }

    ครับผม

  1. ได้ลองทำดูแล้ว ทำไมไม่เรียงแถวเหมือนตัวอย่างที่เห็นครับ
    ของผมมัน Menu เรียงลงมา อย่างนี้ครับ
    Home
    about me
    contact me

    ไม่เหมือนของพี่ครับ เป็น Home aboutme contact me
    ทำยังไงดีครับ
    ช่วยหน่อยครับ

  1. @ ibeeyai : ขอ URL บล็อกก่อนนะครับ จะได้ช่วยดูให้ว่าเกิดจากสาเหตุใดครับ

  1. ของผมครับพี่... http://i-love-lego.blogspot.com/ กำลังสนใจเรื่อง blog อยู่ ครับ

  1. @ ibeeyai : ตอนนี้ที่พี่เข้าไปดูมันเรียงแถวแล้ว แต่อักษรยังอยู่ตรงกลาง เป็นเพราะมันติด Style มาจากส่วน Heading ครับ

    แก้โดย ก่อนหน้าโค้ด

    <!-- Navigation Menu With Search box hacked by Hackublog -->
    <div id='navmenusearch'>

    ให้วางโค้ดด้านล่างนี้ลงไปเพื่อ Clear Style จากส่วน Heading
    <div style='clear:both;'></div>

  1. ขอบคุณครับ

    แต่ผมลองดูแล้ว เหมือนเดินทุกอย่างครับ เรียงลงมาเป็น 3 แถว + ต้ว search เป็น 4 แถวครับ
    อยากเหมือนของพี่ครับ ทุกหัวข้อ อยู่ใน แถวเดียวกันครับ

  1. พี่ครับ

    พอผมลองดูทำ blog ใหม่หมด ทำได้แล้วครับพี่

    ขอบคุณครับพี่ (mr hackublog)

  1. 1. พี่ครับ เจอปัญหาอีกแล้วครับ
    1.พอดีอยากให้ Tab menu ที่อยู่บนสุด มาลงไปอยู่ที่ ใต้ logo
    (ปรับยังไงก็ปรับไม่สำเร็จครับ)
    2.และอีกข้อครับ พอดีอยากให้ พื้นหลังสีดำ ของTab menu ทั้ง 2 ด้านซ้ายและขวา ให้อยู่พอดีกับเส้นของเงาทั้งซ้าย และขวา ไม่ทราบว่าต้องทำยังไง (ลองทำตั้งหลายครั้งแล้ว ก็ปรับไม่สำเร็จครับ)แต่เวลาไป restore down หน้าต่างให้เล็กลง มันก็จะตรงครับ เป็นเพราะไรครับ
    อยากให้พี่ hackublog ให้หน่อยครับ
    ขอบคุณครับ
    ของผมครับ http://yummy-yummy-ichiban.blogspot.com/

  1. @ ibeeyai :
    1. ต้องเอาโค้ดเมนูในขั้นที่ 2 ของบทความนี้ทั้งหมดมาวางก่อนหน้าโค้ด
    <div class='main-outer'>


    2. ถ้าย้ายตามข้อ 1 มันจะพอดีเองครับผม
    สาเหตุเพราะพี่ตั้งความกว้างเอาไว้เป็นค่า % มันจึงจะพอดีกับขอบที่วางโดยอัตโนมัติ และน้องเอาไปวางในตำแหน่งของ body-fauxcolumn-outer มันก็เลยกว้างเท่ากับ body-fauxcolumn-outer แต่ถ้าปรับมาวางตามที่บอกในข้อ 1 ขอบก็จะปรับพอดีไปเองครับ

  1. ขอบคุณครับ พี่ Hackublog

  1. ไม่ได้ครับ

  1. ค้นหาโค้ด <div id='content-wrapper'>( ถ้าหาโค้ดที่ว่าไม่เจอลองค้นหาโค้ด <div id='content'>

    ไม่มีครับ มีอันอื่นแทนไหมครับ

  1. @ คุณ Shitsanupong : นี่เป็นวิธีใส่กับแม่แบบรุ่นเก่า ถ้าคุณใช้แม่แบบรุ่นใหม่แนะนนำให้ใช้ gaget Pagelist และใช้วิธีเพิ่มลิงค์เอาครับ
    ดูบทความนี้ครับ
    http://www.hackublog.com/2010/06/special-links-to-pagelist-gadget.html

    แต่ถ้ายังยืนยันจะใช้วิธีนี้อยู่ก็ หาโค้ดใดโค้ดหนึ่งต่อไปนี้ครับ

    <div class='main-outer'>

    ถ้าเป็นแม่แบบรุ่นเก่าอาจจะพบโค้ดเป็น

    <div id='main'>

  1. 1. ต้องการเปลี่ยนสีจากสีเทาได้ไหมครับ
    2. คำว่า Home ที่ทำไว้เปลี่ยนเป็นคำว่า หน้าแรก ได้ไหมครับ ต้องแก้ตรงไหนผมหาไม่เจอ
    ขอบคุณล่วงหน้าครับ

  1. ขอบคุณครับ ทำได้แล้ว

  1. ขอบคุณมากๆครับ เนียนเรยทีเดียว

  1. พี่คับคือผมไม่รู้เรื่อง css และ HTML เลย แต่ถ้าอยากจะเปลี่ยนแท็บเมนูที่เป็นสีเทาให้เป็นสีอื่นต้องแก้โค๊ดตรงไหนคับ?

  1. พี่ครับ คือว่า ช่อง Search มันกดไม่ขึ้นเลยอะ แต่ตอนแรกมันก็กดขึ้นนะ แต่ทำไปทำมามันก็กดไม่ติดเลยอะ แต่ลองไปกดที่ Browser IE แล้วกดได้ครับ อันนี้บล็อกผมคลับ http://sellypopstars.blogspot.com/

  1. ขอบคุณครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. Login เข้าไปที่ blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

    แบบใหม่มันไม่มีแบบนี้แล้วอะครับหายังไงก็ไม่เจอ

  1. ขอถามหน่อยครับ ว่าจะช่วยผมได้ไหม ว่า พอดีผมใส่ link list ไปแล้ว แต่ไม่มีพื้นหลัง ต้องทำยังครับ ถึงจะมีพื้นหลัง

  1. ...แล้วถ้า ไม่เอากล่อง seach ได้ไหมครับ ถ้าได้ช่วยบอกโค้ดหน่อย

  1. เข้ามาเก็บความรู้บ่อยๆ เลยค่ะ ^^ ตอนนี้กำลังเขียนบล็อกเกี่ยวกับแนวทางลดทอนกรรมทำแท้ง
    รบกวนขอความรู้เพิ่มเติมนิดนึงนะคะ

    คือเข้าไปแก้โค๊ดไปมา แล้วตอนนี้หน้าบล็อกที่แสดงในมือถือ มันไม่เหมือนกับคอมพิวเตอร์ สีสันพื้นหลังมันหายไปน่ะค่ะ

    ไม่ทราบว่าต้องใช้ลิ้งค์ไปดูหรือเปล่า บล็อกนี้น่ะค่ะ http://www.khamakids.blogspot.com (ถ้าไม่เหมาะสมลบได้นะคะ - -")

    แบบนี้ต้องแก้ไขยังไงบ้างคะ ขอบคุณมากๆ ค่ะ ^^

  1. ลองดู ทำได้แล้วค่ะ
    อยากจะลองเปลี่ยนสีดู ไม่เข้ากับสีบล๊อคเลย
    แอบเอากล่องเซิทออก ฮ่า ๆ

    ขอบคุณมาก ๆ ค่ะสำหรับเทคนิค

  1. พี่ครับทำไม่เป็นทำให้ผมได้ไหมครับ^^

  1. ผมทำมาถึงขั้นตอนนี้แล้วครับ แต่ต่อไปผมหาโค๊ตในขั้นตอนที่ 2 ไม่เจอครับ เลยไม่รู้จะวางตรงไหนครับ ทำไงดีครับ ขอบคุณมากครับ

  1. สวัสดีค่ะ
    ก่อนอื่นต้องขอขอบคุณมากค่ะ ที่อนุเคราะห์เขียนบทความ เผยแพร่ความรู้เป็นวิทยาทานต่อผู้อื่น และพวกเรา แต่ละบทความดีมากๆ ไม่เคยพบจากเวปอื่นเลย ตามหาอ่านข้อมูลดีๆนี้มานานแล้วค่ะ จึงดีใจมากที่ได้พบเวปนี้ค่ะ

    ดิฉันมีบล๊อกอยู่นานแล้ว แต่ต้องการแต่งเพิ่มเติม หลายอย่างตามบทความแต่ละบทที่สนใจ และได้ทำตามขึ้นตอนแต่ก็ไม่สำเร็จสักเรื่องเลยค่ะ เลยเป็นงงมากค่ะ
    ทั้งที่เคยเรียนการทำเวปไซด์กับ เวป โรงเรียนดอทคอม มาแล้วก็พอมีพื้นฐานอยู่บ้างค่ะ พยายามมากค่ะแต่่ก็ไม่ทราบว่าผิดตรงไหน

    หากส่งเมล์ได้ ก็จะดีค่ะจะก๊อปภาพถามได้ แต่ก็เกรงใจกลัวว่าจะรบกวนมากเกินไปค่ะ ไม่ทราบว่าเปิดสอนคอร์สสอนด้วยหรือเปล่าค่ะ


    ขอบคุณมากค่ะ
    manow

  1. ถ้าหาอย่างที่คนสอนบอกไม่เจอให้หาอันนี้ค่ะ เราลองใช้ได้เหมือนกัน <div class='tabs-outer'>
    ถ้าไม่เอาเหนือสุดเลื่อนลงมาก็ วางโค้ด ลงก่อน <div class='tabs-outer'> จะเลื่อนลงมาค่ะ เราลองวางเลื่อนๆตามโค้ดดู อันนี้คือเลื่อนลงมานะคะ

  1. ขอรบกวนคุณ hack หน่อยนะคะ ดิฉันทำ blog โดยใช้ป้ายกำกับ เป็นเมนูบาร์ แต่หากต้องการเรียงเมนูบาร์ ให้ได้ตามที่ใจดิชั้นต้องการต้องทำอย่างไรคะ เช่น คำว่า HOME ควรจะอยู่อันแรก แต่มันไม่เป็นยังงั้น ดิฉันต้องทำอย่างไรคะ ขอรบกวนจริง ๆ ค่ะ
    (อยากทำ blog มากแต่พอมีปห.ไม่รู้จะปรึุกษาใคร อาศัยท่าน google ก็แล้วค่ะ) ขอบคุณค่ะ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. สุดยอดครับ ผมชอบมากเลยมีประโหยดมาก

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

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

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