หน้าเว็บ

วันศุกร์ที่ 24 ตุลาคม พ.ศ. 2557

ขั้นตอนเริ่มต้นการศึกษา การทำเวปกับ Blogger

ขั้นตอนเริ่มต้นการศึกษา การทำเวปกับ Blogger

1. ต้องมี Email ของ gmail
2. เข้าสมัครเวป www.blogger.com โดยใช้ Email ของ gmail ที่เราสมัครไว้ในข้อ 1
3. เข้าทำการสร้างเวป Blog ได้ทันที

สำหรับมือใหม่ ผมแนะนำให้ทำดังนี้

1. เลือกเวป blog ทำในสิ่งที่ชอบ เพราะ เราจะทำกับสิ่งนี้ได้นาน แล้วผลจะออกมาดีสำหรับเรา
2. เก็บเกี่ยวความรู้ จากเวปที่เราทำ นำไปใช้กับเวปที่อื่นได้อย่างมีประสิทธิภาพสูงสุด

เหตุผลทำไม ถึงเลือก blogger ในการทำเวป blog
1. ทำง่าย เข้าใจ สะดวก
2. เป็นพันธมิตร กับ google
3. มีผลกับ SEO ในระยะยาวอย่างแน่นอน
4. ชอบที่สุดคือ Index เข้า google ไวมาก ประมาณว่าโพสแล้ว เข้า google เลย

หลักการของ admin มีดังนี้

1. คิด วิเคราะห์
2. วางแผน
3. ลงมือทำ ปฏบัติ
4. สรุป
5. กลับไปทำข้อที่ 1 ใหม่ เมื่อ ผิดพลาด และ สำเร็จ

วันเสาร์ที่ 10 พฤษภาคม พ.ศ. 2557

วิธีสร้าง Contact Page ใน Blogger

หลายคนคงเคยลองใส่ Contact Form Widget ลงใน blog แล้วไม่ชอบใจตรงที่มันแสดงอยู่ที่ sidebar และมันก็แสดงไปทุกหน้า ส่วนตัวผมเองก็ไม่ชอบเหมือนกันเพราะรู้สึกว่ามันเกะกะ มันไม่จำเป็นต้องมาโชว์ทุกหน้ากํได้มั้ง ที่สำคัญรู้สึกว่ามันดูไม่เป็นมืออาชีพยังไงไม่รุ จะดีกว่ามั้ยถ้าเอา Contact Form ไปไว้หน้าเฉพาะของมันให้เป็น Contact page ไปเลย 
สร้าง Contact Form ไว้หน้าเฉพาะ
Create Contact Page
หากคุณก็ต้องการอย่างนั้นเหมือนกัน งั้นเรามาย้ายมันไป Contact Me Page กัน....

 ย้าย Blogger Contact From ไปไว้หน้าเฉพาะยังไง
ไม่ยากเท่าไรครับลองทำทีละขั้นตามนี้เลย ลองดูหน้า Contact page ของผมก่อนได้
  1. ขั้นแรกเราต้องใส่ Contact Form Widget ไว้ที่ sidebar ก่อนครับ (แล้วเราค่อยซ่อน contact form ทีหลัง)
  2. ถ้าใส่เรียบร้อบแล้วก็ไปต่อเลยครับ สร้าง page ขึ้นมาใหม่ โดยไปที่ Page แล้วคลิกที่ New Page เลือก Blank page 
แล้วก็ copy code ของ Contact Form ด้านล่าง
       <form name='contact-form'>  
       <div>Your Name : </div>  
       <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>  
       <div>Your Email: <em>(required)</em></div>  
       <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>  
       <div>Your Message: <em>(required)</em></div>  
       <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>  
       <p></p>  
       <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>  
       <div style='text-align: center; max-width: 450px; width: 100%'>  
       <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>  
       <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>  
       </div>  
       </form>  
      
    ที่ page ที่กำลังสร้างขึ้นมาใหม่นี้ ให้คลิกเลือกที่ HTML ตามที่แสดงด้านล่าง แล้วใส่ code ที่ copy มาในนั้นเลยครับ และก็คลิกเลือกที่ Options เพื่อเลือกไม่ให้สามารถใส่ความเห็นหรือลง comment ได้ ตามภาพเลยครับเสร็จแล้วคลิก Done (คงไม่น่าดูเท่าไรเนอะถ้าใครต่อใครมาลงcommentหน้า Contact Form) เรียบร้อยแล้วก็กด Publish เพื่อแสดงผลให้โลกได้รู้

         3.  ไปเลือกที่ Template แล้วคลิกเลือกที่ Edit HTML
    คลิกที่ Jump to widget เลือก ContactForm1 (จะได้ไม่ต้องเสียเวลางมหา)
    แล้วเคอร์เซอร์ก็จะกระโดดไปที่ ContactForm1 เลย ให้กดที่สัญลักษณ์คล้ายๆสามเหลี่ยมตรงบันทัดที่ContactForm1อยู่นั่นเลย เพื่อขยายส่วนที่ซ่อนออกมาตามภาพเลย
    ข้างล่างใกล้ๆกันกดขยายอีกทีตรงบันทัดที่มี main b:includable ครับ
    แล้วก็มาถึงส่วนสำคัญที่จะทำให้มันไม่แสดงอยู่ทุกหน้าตรง sidebar ขั้นตอนนี้้ให้้ลบcodeที่เน้นไว้(highlight)ตามภาพด้านล่างออก
    พอลบออกแล้วก็จะมีหน้าตาประมาณนี้ครับ
    ทีนี้เราก็ได้ป้องกันไม่ให้ Contact Form Widget ไปโผล่แสดงตามหน้าต่างๆแล้วครับ แต่ยังต้องเก็บ widget ที่เราเอาลงที่ Layout Page ไว้นะครับ 
    ห้ามไปเอา widget ออกนะครับเพราะมันจะทำให้การทำงานของหน้าไม่สมบูรณ์ คือถ้าเอา widget ออกมันจะไม่ส่งข้อมูลเลยครับมีแต่หน้าตาแต่ใช้งานไม่ได้

        4.   บันทึก Template โดยกดที่ Save Template เป็นอันจบ จากนั้นก็ไปดูผลงานของคุณเลยครับ

    วันศุกร์ที่ 9 พฤษภาคม พ.ศ. 2557

    ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

    ในพื้นที่ของ Header เราสามารถใส่อะไรๆลงไปได้ เช่นว่า Adsense ad, Search Bar, Banner Ad, Social Icon, หรือ Widget แบบง่ายๆ โดยลดความกว้างของ Header ลงแล้วเพิ่มพื้นที่ลงไปบริเวณแทน เพื่อไม่เป็นการเสียเวลาเรามาเริ่มกันเลย

    ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header

    หรือใส่ Widget ลงใน Blogger Header โดย CSS อีกแบบ

    Step 1. เพิ่ม section (ใน HTML mode)

              1. ไปที่ Template>Edit HTML
              2. Back up Template ของเราก่อนเพื่อความปลอดภัย
              3. หาส่วนต่อไปนี้ใน HTML code
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section>
    หรืออาจยาวกว่านั้น ให้หาตำแหน่ง </b:section> แรกที่เจอ ที่อยู่ถัดลงไปจาก <b:sectionclass='header' ดังในภาพ

              4. ใส่ Section ต่อไปนี้ลงไปต่อจาก code ด้านบน(ตำแหน่งตามภาพ)
    <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>
    <
    div style='clear: both;'/>  
                  เป็นการเพิ่ม Header ด้านขวาลงไป

              5. เมื่อเสร็จแล้วตรวจดู code ที่ได้จะมีหน้าตาประมาณนี้ ได้แล้วก็กด Save
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
     <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> 
     </b:section> 
    <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/> 
    <div style='clear: both;'/>   
    หรือออกมามีหน้าตาแบบนี้ถ้าเป็น designer template
    แต่ถ้าไปดูใน Layout ตอนนี้ จะเห็นเป็น Header สองอันซ้อนกันอยู่อันที่พึ่งใส่อยู่ด้านล่าง ซึ่งยังไม่ใช่แบบที่เราต้องการ

    Step 2. ปรับแต่ง header sections ด้วย CSS

    โดยในตัวอย่างเราจะกำหนดให้ header ทั้งสองส่วนอยู่เคียงข้างกัน กำหนดให้ Header เดิมชิดซ้ายและส่วนใหม่ที่พึ่งเพิ่มเข้าไปชิดขวา(วางสลับกันก็ทำได้) ไปต่อกันเลย
              1. เรายังคงอยู่กันที่ HTML Editer (Template>Edit HTML)หา ]]></b:skin> 
    หรือไปที่ Template>Customize>Advance>Add CSS เพื่อใส่ code ในข้อ 2.
              2. ใส่ CSS code ต่อไปนี้ไว้ก่อนหน้า code ข้อ 1.
    #header, body#layout #header {width:50%;display:inline-block;float:left;}
    #header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
    #header-right .widget {margin:0;}
    ตรงนี้เราสามารถแก้ไขค่าความกว้าง(width) แต่ผลรวมทั้งหมด (header, Header-right, padding, margin)ต่องไม่เกิน100% ของความกว้าง ไม่งั้นมันจะลงมาซ้อนกันอีก

    Step 3. เพิ่ม Widget ลงไป

    ตอนนี้ก็มาถึงขั้นตอนง่ายๆแล้ว เราจะสามารถใส่ Ad banner, Adsense ad, Search box หรืออะไรก็ตามทีโดยวิธีการก็เหมือนการเพิ่ม widget ที่คุ้นเคยกันนั้นล่ะ
              1. ไปที่ Template
              2. คลิ๊กที่ Add A Gadget แล้วก็เพิ่ม widget ลงไป
              3. Save 

    Step 4. ปรับแต่งความกว้างอีกครั้งให้สวยงามลงตัวที่สุด

    หากพบว่า widget มันยังซ้อนอยู่ก็แสดงว่ายังปรับไม่ลงตัว ปรับความกว้าง (width) อีกจนลงตัว