แนะนำ Gadget ใหม่ของ blogger “หน้าเว็บ” พร้อมตัวอย่างการใช้

ตามเว็บไซต์ต่าง ๆ เราคงจะเคยเห็นกันว่าแต่ละเว็บไซต์จะมี เมนูสำหรับเลือกเปิดไปดูหน้าอื่น ๆภายในเว็บนั้นๆ เช่น ตัวอย่างในรูปด้านล่าง

สอนทำบล็อก


เมื่อ 1-2 วันที่ผ่านมา(ที่จริงเห็นตั้งแต่ปลายปีที่แล้ว) Blogger ได้พัฒนา Gadget ตัวใหม่ขึ้นมา มีชื่อว่า หน้าเว็บ เพื่อให้ผู้ใช้ได้สร้างหน้าของบล็อกที่ต้องการได้โดยไม่ต้องมีความรู้ในการดัดแปลงหรือแก้ไขแม่แบบด้วยตนเอง

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



การเรียกใช้ Gadget ชนิดนี้สามารถเลือกใช้ได้เช่นเดียวกับการ Add Gadget ชนิดอื่น ๆ  นั่นคือ ไปที่ องค์ประกอบของหน้า >> แล้วเลือก เพิ่ม Gadget  


ต่อไปเรามาดูว่า Gadget นี้ ใช้อย่างไร และใช้เพื่อจุดประสงค์ใด

หลักการของ Gadget นี้เหมือนการสร้างบทความขึ้นมา 1 บทความ และ สร้าง Link เชื่อมโยงไปยังบทความนั้น ๆ แต่มีความพิเศษตรงที่ผู้ใช้ทั่วไปสร้างเมนูขึ้นเองได้อย่างง่ายดาย โดยไม่ต้องมีความรู้พื้นฐานเกี่ยวกับ HTML เลย

ตัวอย่างวิธีการใช้งาน(จริง)

ในตัวอย่างนี้ผมจะสร้าง 2 หน้าให้เห็นเป็นตัวอย่าง ได้แก่ HOME และ CONTACT ME



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

เนื่องจากผมจะยกตัวอย่างการสร้างหน้า Contact me ดังนั้นให้ทุกคนไปสร้าง Form สำหรับติดต่อเจ้าของบล็อกซึ่งก็คือเราเอง ได้ที่

ซึ่งขั้นตอนในการสร้าง ฟอร์มนั้นง่ายมาก มีเพียง 4 ขั้นเท่านั้น (ดูรูป)

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

สอนทำ blogger 
   

เทคนิคการใช้งาน blogger


เมื่อได้โค้ด แล้วคัดลอกเก็บเอาไว้ก่อนครับ



ขั้นสร้างหน้าเว็บจริง



ขั้นที่ 1 สร้างหน้าแรก หรือ HOME

Log in เข้าไปที่ draft.blogger

ไปที่แผงควบคุม >> องค์ประกอบของหน้า >> แล้วเลือก เพิ่ม Gadget เลือกอันแรกเลยครับ คือ gadget หน้าเว็บ

การปรับแต่ง blogger

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

แต่งบล็อก

ขั้นที่ 2 เมื่อผ่านขั้นที่ 1 มาแล้วก็เท่ากับว่าเราได้สร้าง หน้าบล็อกขึ้นมาแล้ว 1 หน้า

ถ้าจะทำการเพิ่มหน้าอีก ให้ไปที่แผงควบคุม >> การส่งบทความ >> แก้ไขหน้าเว็บ >> หน้าเว็บใหม่

ทำบล็อก

เมื่อคลิกสร้างหน้าเว็บไหม่ เราก็จะพบเครื่องมือต่าง ๆ เหมือนการเขียนบทความนั่นเองครับ


สร้างบล็อก


ให้นำโค้ดของ Form ที่เตรียมไว้ จากขั้นเตรียมการมาวางในหน้าหน้านี้ จัดรูปแบบตามต้องการแล้วบันทึกหน้าได้เลยครับ

bloger trick

เพียงขั้นตอนสั้น ๆ นี้เราก็จะมีเมนูเชื่อมโยงไปยัง หน้าของบล็อกถึง 2 หน้าด้วยกัน ได้แก่ HOME และ CONTACT ME



ขั้นที่ 3
- ถ้าหากต้องการเพิ่มหน้าบล็อกเพิ่มขึ้นอีกก็ทำซ้ำขั้นตอนที่ได้กล่าวมาข้างต้นครับ


- แต่ถ้าต้องการลบหน้าบล็อกทิ้ง ก็มาที่เดิม แล้วจะเห็นคำว่าลบ ถ้าต้องการลบทิ้งก็กดคำว่าลบได้เลย


blogger tips  



ขั้นที่ 4 วิธีจัดการกับเมนูหน้าเว็บ

- ถ้าต้องการเรียงลำดับหน้าเว็บใหม่ ก็ไปที่ องค์ประกอบของหน้า แล้ว คลิก Gadget หน้าเว็บขึ้นมาแก้ไข >> ดูรูป


SEO


นอกจากนี้ Gadget หน้าเว็บจะมีลักษณะพิเศษ คือ ถ้าอยู่ที่ Sidebar เมนูจะจัดเรียงเป็นแนวตั้ง


widget


gadget




แต่ถ้าลากไปในตำแหน่งใต้ส่วนหัว จะจัดเรียงเรียงเป็นแนวนอนโดยอัตโนมัติ


Templates

เทคนิคการทำบล็อก 



อย่างไรก็ตามรูปแบบของเมนูที่ได้ก็ยังคงไม่สวยงามนัก ซึ่งถ้าอยากได้เมนูที่สวยงามจริง ๆ ก็ลองศึกษาดูจาก >> ที่นี่

สำหรับการแนะนำ Gadget นี้ผมก็ขอจบเพียงเท่านี้ครับ สงสัยประการใด โปรดสอบถามได้เลยครับ

ล.ป. (ลืมไป) นี่คือตัวอย่างของ ฟอร์มที่ได้สร้างประกอบตัวอย่างนี้



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

  1. ของผมมัน 19 จาก 19 ไม่มีแกดเจดอันนั้นอ่าครับ search ก็ไม่เจอ

  1. อ๋อต้อง Log in ที่ http://draft.blogger.com ครับ ที่นี่มีเครื่องมือครบเลยครับ

  1. เป็นไปได้ไหมครับที่จะใส่กล่องคอมเมนต์ในหน้าเว็บ (page)ด้วย

  1. และเมื่อผมย้าย gadget ตัวนี้ไปไว้ในส่วนหัวมันก้ยังเป็นแนวตั้งอยู่ดี ทำไมมันไม่เป็นแนวนอนล่ะครับ

  1. ตอบคุณ koknam

    1. ถ้าต้องการใส่ กล่องคอมเมนต์ในหน้าเว็บ (page)ด้วย แนะนำให้เขียนเป็นบทความ และทำ link ไปหาบทความนั้นดีกว่าครับ

    http://hackublog.blogspot.com/2009/12/templates-link-menu.html

    2. ขึ้นอยู่กับแม่แบบที่คุณใช้ครับ แนะนให้เปลี่ยนแม่แบบหรือ ใส่เมนูด้วยตัวเองครับ
    http://hackublog.blogspot.com/2010/01/css-menu.html

  1. ตอนที่เข้าไปในfoxyform พอถึงขั้นตอนที่3มันไม่submitให้อ่ะค่ะมันอยู่เฉยๆ ต้องทำยังไงค่ะ

  1. @ lady_n : ลองดูอีกทีนะครับเว็บ foxyform มีเพียง 4 ขั้นตอนไม่น่ายาก ลองอีกทีครับ

  1. หวัดดีครับ

    คือยากได้หน้าเว็บ forum เป็นหน้าเดียวเลยอ่าครับ ไม่อยากให้มี sidebar จะต้องทำอย่างไรบ้างครับ ขอบคุณครับ

  1. @ aloha_ana :
    ต้องอ่านและทำตาม 2 บทความข้างล่างนี้ครับ
    http://www.hackublog.com/p/hackublog-forums.html
    และ
    http://www.hackublog.com/2010/05/how-to-create-difference-pgae-on.html

  1. อยากได้ ที่กรอก ให้คน กรอก แบบจองรหัส หรือให้ข่าวสารมี ฟอร์มแบบนี้หรือเปล่าค่ะ

    ยังเข้าไม่ได้ วันก่อน ทำได้วันนี้ลืมแล้ว daft.blogger

  1. ผมยังไม่เข้าใจคำถามที่ถามครับ

  1. สร้าง Gadget "หน้าเว็บ" เสร็จแล้ว มาดูบล็อกตนเอง ปรากฏว่า มี Link "หน้าเว็บ" ตามมาด้วยข้างล่างสุด (ใต้บทความของบล็อก)
    อยากเอาออกต้องทำอย่างไรครับ
    <a href ="http://sasukraman.blogspot.com/"> บล็อกที่ผมสร้างครับ</a>

  1. @ สสอ.รามัน : Link "หน้าเว็บ" ที่ว่าเป็น Page navigation ครับ เอาไว้สำหรับเปิดหน้าถัดไปหรือย้อนกลับมาหน้าแรก ตอนนี้ที่ขึ้น คำว่าหน้าแรกอย่างเดียว เพราะบทความยังน้อยครับ

    ถ้าจะลบก็ ค้นหาโค้ด ]]></b:skin>

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

    #blog-pager{display:none;}

  1. ขอโค้ตลบข้อความ "สมัครสมาชิก: บทความ (Atom)" ที่ขึ้นใต้บทความด้วยครับ

  1. เอาโค้ด .feed-links{display:none;} ไปวางไว้ก่อนหน้าโค้ด ]]></b:skin> ครับ

    อยากให้ถามให้เกี่ยวข้องกับบทความด้วยครับ
    บทความที่เกี่ยวกับเรื่องที่ถาม>> http://www.hackublog.com/2010/05/customization-post-element-on-blogger.html

  1. ขอบคุณมากค่ะ ลองนำไปใช้แล้วค่ะ

  1. ถ้า template ที่เราเลือกมันมี หน้าเว็บมาให้อยู่แล้ว เช่น HOME ABOUT CONTACT เราต้องลิงค์ยังไงค่ะ คือ ลองทำตามที่ คุณบอกแล้วมันกลับมีหน้าเว็บขึ้นมาให้ต่างหากอีกอันค่ะ

    แล้วถ้าเราจะลบหน้าเว็บที่มากับแม่แบบ ได้หรือเปล่าค่ะ แล้วลบยังไงค่ะ รบกวนด้วยนะค่ะ

  1. ขอโทษนะค่ะจอยลืมบอกไปว่า จอยดาวน์โหลดแม่แบบมาจาก http://btemplates.com/2010/blogger-template-glory/ อยากจะลบตัวเมนู แล้วก็ตัว Feed กับ Twitter ออกค่ะ ไม่ทราบต้องทำยังไงบ้างค่ะ

  1. สวัสดีครับคุณ joy บออภัยที่ตอบช้าไปหน่อย ผมแนะนำว่าให้เก็บเมนุเอาไว้ดีกว่าครับเพราะใช้ประโยชน์ได้ ใน 1 หน้าจะมีเมนู 2 ที่ก้ไม่ผิดครับ

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

    โค้ดเมนู ยาวหน่อยนะครับ

    /* top navigation
    ---------------------------------------------------------- */
    #nav {
    position:absolute;
    top:28px;
    left:320px;
    z-index:1;
    }
    #nav ul {
    margin:0 auto 0 ;
    padding:0;
    }
    #nav li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    background: url(http://4.bp.blogspot.com/_0Nr--qemD8Y/TCuxtUghq1I/AAAAAAAABcE/2zdKZvgdtsw/s1600/bg_nav_link.gif) top left no-repeat;
    }
    #nav ul li a {
    font-family:georgia,verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight:bold;
    text-decoration: none;
    font-style:italic;
    display: block;
    padding:5px 35px 10px 10px;
    margin: 0 0 0 15px;
    color: #f9f5e7;
    background: url(http://4.bp.blogspot.com/_0Nr--qemD8Y/TCuxtUghq1I/AAAAAAAABcE/2zdKZvgdtsw/s1600/bg_nav_link.gif) top right no-repeat;
    }
    #nav ul li:hover, #nav ul li.hover, #nav ul li.current_page_item {
    background: url(http://4.bp.blogspot.com/_0Nr--qemD8Y/TCuxtN1yADI/AAAAAAAABb8/ZWRJiN2gvgc/s1600/bg_nav_hover.gif) top left no-repeat;
    color: #fff;
    }
    #nav ul li a:hover {
    color: #fff;
    background: url(http://4.bp.blogspot.com/_0Nr--qemD8Y/TCuxtN1yADI/AAAAAAAABb8/ZWRJiN2gvgc/s1600/bg_nav_hover.gif) top right no-repeat;
    }
    #nav ul li:hover a, #nav ul li.hover a, #nav ul li.current_page_item a {
    color: #fff;
    background: url(http://4.bp.blogspot.com/_0Nr--qemD8Y/TCuxtN1yADI/AAAAAAAABb8/ZWRJiN2gvgc/s1600/bg_nav_hover.gif) top right no-repeat;
    }







    และลบนี่ด้วยครับ

    <div id='nav'>
    <ul>
    <li class='current_page_item'><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#' title='Contact'>Contact</a></li>
    </ul>
    </div>

  1. กรณีที่ต้องการลบโค้ด feed และ twitter ให้ลบชุดโค้ดเหล่านี้ทิ้งครับ

    <a class='feedlink' href='/feeds/posts/default' title='RSS Feed for all Posts'><img id='rss' src='http://1.bp.blogspot.com/_0Nr--qemD8Y/TCuxzRGqn8I/AAAAAAAABek/H6thVvRWBoI/s1600/rss.jpg'/></a>

    <a href='http://twitter.com/YOUR-URL-HERE' target='blank' title='Follow Us'>
    <img id='twit-icon' src='http://3.bp.blogspot.com/_0Nr--qemD8Y/TCuxzg3nGiI/AAAAAAAABes/S9yJZiP2_ao/s1600/twitter.png'/>
    </a>


    สงสัยสอบถามเพิ่มเติมเลยนะครับ บทความที่อยากแนะนำให้อ่านเพื่อทำความเข้าใจเรื่องการใส่ลิงค์ครับ

    http://www.hackublog.com/2009/12/templates-link-menu.html

  1. ขอบคุณมากนะค่ะ :)

  1. อยากสอบถามน่ะครับ คือผมได้ลองทำBlogของผมให้มีการย่อบทความตาม http://www.hackublog.com/2009/09/read-more.html ครับ แล้วพอจะทำแถบเมนูข้างบนตามที่นี่น่ะครับ แต่พอทำได้เมนูแล้วกระทู้ที่มาจากเมนูนี้การโดนย่อด้วย แถมยังเข้าไป่านที่ข้างในReadmoreไม่ได้อีกด้วย ที่ http://patinace.blogspot.com/p/test-link.html ตรงTest Linkนะครับ แต่เห็นของท่านกลับยังขึ้นหน้างเต็มไม่มีการย่ออยากถามว่าทำยังไงน่ะครับ หรือให้สามารถเข้าไปอ่านข้างในReadmoreก็ได้ ขอบคุณครับ

  1. @ Patin : ความคิดเห็นของคุณถูกมองว่าเป็นสแปมครับ มันเลยไม่ขึ้น นี่ผมไปดึงออกมาให้ก็เลยขึ้นแล้ว

    เอาง่าย ๆ ครับ read-more เวอร์ชันเก่า ใช้ไม่ได้กับ Gadget หน้าเว็บ ต้องใช้ฉบับปรับปรุงจากบทความนี้

    http://www.hackublog.com/2010/04/automatic-readmore-for-blogger-newhack.html

  1. รบกวนสอบถามคะ โหลด template มา แต่ไอ้ตรงแกทเก็ทข้างๆ พอใส่ไปแล้ว มันมีแทบติดมาทุกอันเลยค่ะ อันใหญ่ด้วยเลยไม่รู้จะเอาออกยังไง คล้ายๆไอคอนนะคะ แต่คลิกดู url ก็ไม่ได้ มันจะขึ้นมากำกับเวลาเราเพิ่มแกทเก็ททุกครั้งค่ะ ช่วยหน่อยนะคะ

  1. @ นานา : ต้องบอก url ของบล็อกด้วยครับ จึงจะช่วยดูให้ได้

  1. ขอบคุณมากค่ะ

  1. เยี่ยมครับ ขอบคุณครับ

  1. เหนื่อนจังวันนี้

  1. รบกวนสอบถามนิดครับ คือถ้าผมต้องการ Link ไปที่เว็บอื่น โดยเป็นการ Click แล้วเปิดหน้าเว็บอื่นๆขึ้นมาเลย gadget นี้ทำได้หรือเปล่าครับ

  1. @ Şiłąncē Mőbiuş : ทำได้ด้วยบทความนี้ครับ # วิธีใส่ Link ที่ต้องการลงใน PageList Gadget

  1. ทำตามขั้นตอนข้างบนแล้วนะค่ะ แต่ตรง Contact Me มันขึ้นเป็น HTML ที่ก็อปปี้มาอ่ะค่ะ ไม่ออกมาตามที่บอกค่ะ ไม่รู้ว่าผิดที่ขั้นตอนไหน อันนี้ชื่อบล็อกของปาล์มค่ะ www.lechalonny.blogspot.com ขอบคุณล่วงหน้าเลยค่ะ

  1. ก๊อปปีแล้วมาวางแล้วคะ ไม่ขึ้นเป็น ฟอร์มอะีึคะ มีแต่ตัวโคตที่ก๊อปมา ทำไม่ได้อะคะ รบกวนช่วยหน่อย

  1. แล้วตกแต่งยังไงอ่าครับ ผมจะแต่งให้มันต่างกัน และพอผมลบหน้านี้ไป อีกหน้าที่เพิ่มมาก็หายไปเหมือนกันเป๊ะเลย

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

  1. ช่วยแก้ปัญหาให้หน่อยครับ ผมพึ่งหัดสร้างเรยไม่ค่อยเข้าใจโครงสร้าง

    http://mmpm-max.blogspot.com/

    คือทำไม เมนู หน้าสอง ของผมมันต้องเอาเมาส์ไปชี้ก่อนถึงค่อยขึ้นอะครับแก้ยังไง ขอบคุณครับ

  1. http://www.pailanitaecoliving.com/ รบกวนถามค่ะ gadget "หน้าเว็บ" หายทำไงดีคะ

  1. 555 ผมไปตอบที่แบบฟอร์มข้างบนมา เขิลจัง 55

    เป็นประโยชน์มากมายเลยครับ
    ขอบคุณครับ

  1. ขอบคุณได้ความรู้เพิ่มมากเลยค่ะ

  1. ขอสอบถามว่า ทำไมฟอร์มที่ทำจากhttp://www.foxyform.com/ ขึ้นข้อความว่า Diese Präsenz ist leider nicht verfügbar. ไม่สามารถใช้ได้ ทั้งที่เคยใช้ได้มาตั้งหลายเดือนแล้ว ต้องแก้อย่างไรคะ

  1. ถ้าเป็น blogger แบบใหม่ที่ google พัฒนามาให้ใช้ในตอนนี้
    ผมจะหา
    แผงควบคุม >> การส่งบทความ >> แก้ไขหน้าเว็บ >> หน้าเว็บใหม่
    ได้ที่ตรงไหนครับ งงกับแบบใหม่มากใช้ไม่คล่องเลยครับผม...

  1. คือว่าหน้าเว็บเนี่ยมันใส่ได้ข้อความเดียวหรอครับ แล้วจะเอาบทความไปใส่ในหน้าเว็บนั้นๆต้องทำยังไง

  1. ขั้นที่สองทำต่อไม่ได้ค่ะ หาเมนูส่งบทความไม่เจอค่ะ รบกวนช่วยบอกหน่อยค่ะอยู่ตรงไหนหาไม่เจอ

  1. ขอบคุณมากเลยคับ

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

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

  1. อยากรู้ว่าจะเขียนหลายๆบทความใน 1 หน้าเว็บทำไงอ่ะครับ

  1. ขอบคุณมากๆครับสำหรับความรู้ที่มอบให้

  1. มีวิธีทำหน้าเว็บซ้อนๆ กันแบบนี้มั้ยครับ http://prntscr.com/9n5i3y

  1. สอบถามครับคือผมเพิ่มตัวเเกทเก็ทเพจนะครับ แต่ทำไมเวลาเปิดมาแล้วมันไม่โชว์ครับ มันจะโชว์เฉพาะตอนที่เราออนเฟสบุคเท่านั้นเหรอครับ
    บล็อกผม http://success4uateam.blogspot.com/
    คือผมเพิ่งหัดเขียนนะครับ ยังไม่ได้โปรโมทครับ รบกวนวิจารณ์ด้วยครับผม
    สองคือผมอยากได้โค๊ดป๊อบอัพให้คนอ่านเขาไลค์เพจน่ะครับ พอมีไหมครับ
    ขอบคุณมากครับ

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

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

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