วิธีการสร้างเมนูใน Blogger ด้วย html

ใครที่มีบทความเผยแพร่บน Blogger หรือ Blogspot เคยมีความคิดอยากจะสร้างเมนู (Menu) ให้กับ Blog ของคุณไว้ใช้เองหรือไม...วันนี้บทความนี้จะแนะนำวิธีการสร้างเมนู (Menu) หรือ เมนูย่อย (SubMenu) ไว้ใช้กันแบบง้ายยยย...ง่าย

ขั้นตอนการสร้างเมนูให้กับ Blogger อย่างง่าย

วิธีนี้คุณต้องไปโหลด Template ที่คุณชอบมาก่อน โดยเราสามารถไปค้นหาจากหลายๆที่ (คุณๆสามารถไปเปิดอ่านในบทความ "การสร้างรูปแบบของ Blogger ให้สวยเพียง 1 นาที" ซึ่งเราได้หา Template แล้วตามรูป 1

รูปที่ 1 แสดงตัวอย่างเมนูจาก template

1. ให้เปิดเข้าไปในส่วนของ Back-End ของระบบ
2. เลือกเมนูทีม (Theme) ดังรูป 2

รูปที่ 2 เลือกเมนูธีม เพื่อเข้าไปจัดการเมนูใน blogger

3. คลิกที่ปุ่ม "แก้ไข html" ตามรูปที่ 1 ระบบจะแสดงโค้ช html ให้ดังรูปที่ 3

รูปที่ 3 แสดงหน้าโค้ช html 

4. ค้นหาคำตามเมนู ในรูปที่1 โดยเมนูถัดไปจาก Home คือคำว่า Excel ให้คุณวางเมาส์ไว้ที่แสดง HTML code และ กด Ctrl+F จะเกิด PopUp ที่มุมบน ด้านขวาของจอ ซึ่งจะแสดงตามรูปที่ 4

รูปที่ 4 ค้นหาคำในเมนู

ให้คุณสังเกต Code ที่คล้ายแบบข้างล่างนี้

<li><a href='#'>Excel</a>
<ul class='children'>
<li><a href='https://www.itlearncenter.com/search/label/Basic-Excel'>Basic Excel</a></li>
<li><a href='https://www.itlearncenter.com/search/label/Data-Management'>Data Management</a></li>
<li><a href='https://www.itlearncenter.com/search/label/Functions'>Function</a></li>
<li><a href='https://www.itlearncenter.com/search/label/Data-Analysis'>Data Analysis</a></li>
</ul>
</li>

ตัวหนังสือสีดำ ให้ใส่ชื่อเมนูที่ต้องการ ซึ่งใน Code นี้ Excel จะเป็นเมนูหลัก และ Basic Excel / Data Management / Function / Data Analysis จะเป็นเมนูย่อยภายใต้เมนูใหญ่

ตัวหนังสือสีแดงเป็น URL ที่คุณต้องการให้สามารถ Link ได้ถึง 

กำหนด URL ให้กับเมนูย่อยภายใน Blogger

สำหรับเมนูย่อยภายใต้เมนูใหญ่ใน Blogger สำหรับมือใหม่อาจจะสับสน ว่าจะได้ URL ของเมนูย่อยนั้นมาอย่างไร ... ให้คุณๆย้อนกลับไปถึงการสร้างเนื้อหาภายใน Blogger ทางด้านขวาจะมี "ป้ายกำกับ (Label)" ให้คุณระบุ Keyword ของบทความนั้น ก็ให้คุณกำหนด Keyword ที่ต้องการให้เป็นเมนูย่อยลงไป ดังรูปที่ 5

รูปที่ 5 การใส่ Keyword ในป้ายกำกับ (Label) ให้บทความภายใน Blogger

 จากรูปที่ 5 ใส่ Keyword เข้าไป 4 คำ ถ้าคุณไม่ต้องการใส่ Keyword อีกก็คลิกเสร็จสิ้น จากนั้นให้เปิดบทความนั้น และคลิกที่ Keyword ที่คุณต้องการให้เป็น SubMenu ของเว็บคุณ ดังรูปที่ 6

รูปที่ 6 การสร้าง Submenu ใน Blogger

คลิกเข้าไปที่ Keyword ที่ต้องการ ซึ่งจากรูปที่ 6 ให้คลิกที่ Data Management ระบบจะรวบรวมบทความที่มี Keyword นี้ โดย URL จะเป็นแบบนี้ https://www.itlearncenter.com/search/label/Data-Management เพียงแค่นี้คุณก็จะได้ SubMenu ไปแก้ไข Code ในข้อ 4 ได้แล้ว 

Read More

Atom Feed ปะทะ RSS Feed บนโลกออนไลน์

RSS ย่อมาจาก Really Simple Syndication หรือ Rich Site Summary โดยเริ่มต้นเมื่อช่วงต้นปี พ.ศ. 2538 ซึ่งไฟล์จะมีนามสกุลเป็น .rss หรือ .xml

ส่วน Atom ย่อมาจาก Atom Syndication Format ซึ่งถูกพัฒนาเป็นอีกหนึ่งทางเลือกของ RSS โดยคุณสมบัติของ Atom ถูกกล่าวว่ามันมาลดข้อจำกัดของ RSS บางประการนั้นเอง  ซึ่งไฟล์จะมีนามสกุลเป็น .atom หรือ .xml

ในด้าน Computer ชื่อทั้ง 2 ชื่อข้างบน มักจะพบในบทความที่อธิบายการ Feed แต่ถ้าเป็นบทความเกี่ยวกับ Social Marketing ก็จะพบในบทความที่อธิบายถึง Content Syndication นั้นเอง

Feed คือ อะไรละ !!! 

Feed คือ ไฟล์ขนาดเล็ก ที่จะค่อย Update เนื้อหาบทความใน Blog ที่คุณ ๆ เขียนขึ้น และมี Application ที่เรียกว่า “readers” or “aggregators” มาค่อยตรวจสอบไฟล์ Feed นี้ และค่อยทำการแจ้งให้ผู้อ่านอื่น ๆ ทราบเมื่อมีบทความใหม่ ซึ่งบางเว็บไซต์ได้จัดทำ  Feed ทั้ง 2 แบบเลยก็ได้

เทคโนโลยีนี้ถือเป็นสิ่งที่เกิดมานานแล้ว โดยบางคนอาจเคยเข้าไปอ่าน Feed จากเว็บที่เปิดให้ผู้อ่านสามารถถึง RSS หรือ Atom ไปได้ 

เมื่อมีฝั่งส่งข้อความมา ก็ต้องมีฝั่งรับข้อมูลไปใช้ในอุปกรณ์ต่าง ๆ เช่น Desktop Mobile Tablet หรือนำไปใส่ใน Application ต่าง ๆ

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


เมื่อประโยชน์ของมันเป็นแบบนี้ ก็มีคนเห็นประโยชน์นำมันไปใช้ในการทำ Social Marketing หรือ SEO ให้กับเว็บไซต์ 

😥😥😥😥😥

Feed ถือเป็นส่วนประกอบหนึ่งของการทำ Content Syndication หรือ การเผยแพร่เนื้อหาใน Blog ไปที่แหล่งอื่น เพื่อให้ผู้อ่านสามารถเข้าถึงเนื้อหาได้ง่ายขึ้น แล้ววิธีนี้ ก็เป็นการเผยแพร่ที่แทบไม่มีค่าใช้จ่ายอะไรด้วย

ในปัจจุบัน การทำให้ Website หรือ Blog นั้นติดหน้า Search engine ต่าง ๆ Website หรือ Blog นั้น ต้องมีเนื้อหาที่มีคุณภาพ ดังนั้น การหาเทคนิคที่สร้างความสำเร็จให้กับ Website หรือ Blog คือ การเราต้องเผยแพร่เนื้อหาที่มีคุณภาพไปสู่ผู้อ่านนั้นเอง 

ด้วยเหตุนี้ จึงทำให้ การเผยแพร่เนื้อหา หรือ Content Syndication จึงเป็นวิธีที่ส่งผลที่ดีในการทำ SEO นั้นเอง 

การเผยแพร่เนื้อหาใหม่ๆ ให้กับผู้อ่านที่กว้างขึ้น ๆ จะเป็นวิธีการที่สร้างความเชื่อมั่นให้กับ Website หรือ Blog นั้นเอง 


อ้างอิง: 
https://searchenginewatch.com/sew/how-to/2049167/content-syndication-how-to-get-started
https://opensource.com/article/17/3/rss-feed-readers
http://latestsolution.com/get-rss-atom-feed-blogger/amp/
https://droidsans.com/google-reader-rss-feed-usage/

Read More

ขั้นตอนการเพิ่ม Email Subscription Form ใน Blogger

ในการสร้าง Blogger คุณ ๆ สามารถเพิ่มคุณลักษณะช่องทางรับ Email จากผู้อ่านที่สนใจรับข่าวสาร (Feed) ของ Blogger ของคุณ ๆ ได้ อย่างง่าย ๆ ดังรูปที่ 1

รูปที่ 1 ตัวอย่างการเพิ่มช่องทางเพื่อติดตามบทความผ่านทาง email 

ขั้นตอนการเพิ่ม Email Subscription Form 
1. เปิดเว็บ http://feedburner.google.com/ โดย Login ด้วย email ของ google 

2. ระบุ URL ของ Blog ของคุณ ส่วนถ้าคุณคลิกเลือก "I am a podcaster" จะเป็นการบอก FeedBunder ว่า Blog ของคุณมีเนื้อหาแบบ Podcast และคลิกปุ่ม Next ดังรูปที่ 2 

รูปที่ 2 แสดงช่องทางการระบุ URL ของ Blog เพื่อสร้าง feed

3. FeedBunder จะไปตรวจสอบ Blog ที่คุณระบุไว้ เมื่อพบ ระบบจะถามคุณว่า คุณต้องการให้ Feed แบบ Atom หรือ RSS และเลือกปุ่ม Next ดังรูปที่ 3

รูปที่ 3 Feedbunder ให้คุณเลือกประเภทของ Feed 

4. แล้วให้คุณระบุชื่อ และ ที่อยู่ ของ Blog โดยเราแนะให้คุณระบุชื่อให้สอดคล้องกับ Blog ของคุณ ๆ แล้วคลิก Next ดังรูปที่ 4

รูปที่ 4 แสดงหน้าจอให้ระบุชื่อและที่อยู่ Blog เพื่อทำ Feed

5. Feedbunder จะดำเนินการ 3 ขั้นตอน ดังนี้ ขั้นแรก เป็นการยืนยัน Feed ของคุณ โดยแสดงช่องทางที่คุณได้ทำการระบุไว้ในก่อนหน้านี้ เป็น URL http://feed.feedbunder/happylearntool เพื่อให้คุณ ๆ เข้าไปดูรายละเอียดอื่น ๆ ได้ และให้คลิก Next ดังรูปที่ 5 

รูปที่ 5 แสดง URL เพื่อให้คุณจัดการ Feed ใน FeedBunder

6. ขั้นที่สอง ถ้าเว็บของคุณมีเนื้อหาที่เป็น Podcast ให้กำหนดด้วย แต่ของเราตอนนี้ข้ามไปก่อนได้ ดังรูปที่ 6

รูปที่ 6 หน้าจอ Config ว่า Blog มีเนื้อหาเป็น Podcast

7. ขั้นตอนที่สาม หน้านี้คุณต้อง Config สถิติต่างๆ ดังรูปที่ 7

รูปที่ 7 แสดงการ Config ค่าสถิติเพื่อให้ FeedBunder ดำเนินการ

หน้านี้จะทำการ Set ให้ FeedBurner วัดระดับการเข้าชมโดยทั่วไปสำหรับ Feed ของคุณ และยังมี link ให้คุณไปเรียนรู้เครื่องมืออื่นๆ ตาม Tell me more about all FeedBurner Stats features.

โดยคุณ ๆ สามารถเลือกว่าจะให้ FeedBurner ติดตามสถิติแบบไหนบ้าง 

• Circulation — How many people are subscribed หมายถึง จำนวนสถิติผู้สมัครรับข้อมูลจาก Blog ของคุณ
• Readership — What feed readers people are using หมายถึง จำนวนสถิติผู้อ่าน Feed ที่ใช้งานอยู่ 
•  Uncommon Uses — Other services and sites using your feed 
•  Clickthroughs — How often people click items back to your site หมายถึง จำนวนสถิติคนทีกลับมายัง Blog ของคุณ
•  Item enclosure downloads (podcast downloads)
•  I want more! Have FeedBurner Stats also track: 

8. การทำ Activate โดยการเปิดเมนู Optimize (ด้านบน) >> SmartFeed (ด้านซ้าย) 

9. ให้คัดลอก Code จากแถบเมนู Publicize (ด้านบน) >> Email Subscriptions (ด้านซ้าย) ให้คัดลอกโค้ดในกรอบสีแดง ไปใส่ใน Blog ของคุณ ดังรูปที่ 8

รูปที่ 8 แสดงหน้าสำหรับคัดลอกโค้ดไปใส่ใน Blog

หลังจากนี้เป็นส่วนในการนำโค้ดที่คัดลอกมาวางในพื้นที่ที่คุณ ต้องการใน Blogger 

ขั้นตอนการวางโค้ดใน Blogger
1. เข้าไปในส่วน Dashboard 
2. เลือกเมนู Layout แล้วคลิก Add Gadget ในส่วนที่คุณต้องการให้มีช่อง Email Subscription Form 
3. เลือก HTML/JavaScriptAdd และวางโค้ด ดังรูปที่ 9

รูปที่ 9 แสดงการวาง Feed Code ในหน้า Blogger

หลังจากวาง Code และกดปุ่ม save แล้วที่หน้า Blogger จะมีช่องสำหรับรับ email จากผู้อ่าน ตามรูปที่ 1 

Read More

Blogger มีช่องทางผูก Search Console

คุณๆ ที่เขียน Blog ด้วย Blogger นั้นทาง Blogger มีช่องทางในการผูกกับ Google Analytics ได้อย่างง่ายๆ ดังนี้

1. เข้าสู่หน้า Dashboard ของ Blogger >> Settings >> Search Preferences
2. คลิก Edit ของ Google Analytics ในส่วน Crawlers and indexing ดังรูปที่ 1

รูปที่ 1 แสดงช่องทางที่ Blogger เชื่อมกับ Google Analytics

3. ระบบเปิดไปหน้า https://www.google.com/webmasters/tools/home?hl=en เลือกหน้าเว็บลงทะเบียนไว้ ดังรูปที่ 2

รูปที่ 2 แสดงช่องทางการเชื่อมกับ Google Analytics ผ่าน Blogger

4. คลิกปุ่ม Setting ด้านขวาบน >> เลือก Google Analytics Property ดังรูปที่ 3

รูปที่ 3 แสดงช่องทางการเชื่อมกับ Google Analytics 

5. เข้าสู่หน้า Search Console ให้คลิกปุ่ม สร้างบัญชี Google Analytics ดังรูปที่ 4

รูปที่ 4 แสดงหน้าจอ Search Console

6. ระบบจะไปที่หน้าของ Google Analytics เพื่อให้คุณ ๆ ต้องใส่รายละเอียดการลงทะเบียนในครั้งแรก ซึ่งจะมีรายละเอียด ดังรูปที่ 5

รูปที่ 5 แสดงหน้าลงทะเบียนครั้งแรกของ Google Analytics

7. เมื่อกรอกข้อมูลครบหมดแล้ว ให้กดปุ่มรับรหัสติดตาม ด้านล่างสุด จะมี PopUp ขึ้นมาให้คุณอ่านเงื่อนไขการให้บริการของ Google Analytics ถ้าคุณยอมรับให้คลิกปุ่มฉันยอมรับ เพื่อเข้าใช้ Google Analytics ดังรูปที่ 6

รูปที่ 6 แสดงหน้าจอข้อกำหนดในการให้บริการของ Google Analytics

8. เมื่อยอมรับเรียบร้อยแล้ว ระบบจะแสดงหน้า Property ใน Google Analytics ซึ่งเมื่อกลับไปที่หน้า Search Console >> เลือก Google Analytics Property ให้ทำการเชื่อมโยง Search Console ใน Google Analytics ดังรูปที่ 7

รูปที่ 7 แสดงหน้าจอ Search Console ใน Google Analytics 

เรียบร้อยคุณสามารถติดตามดูเว็บของคุณได้

Read More

9 ขั้นตอนในการสร้างหน้าติดต่อ (Contact Form) ภายใน Blogger สำหรับผู้เริ่มต้น

ปกติการสร้าง Contact Form ใน Blogger มันต้องเข้าไปเพิ่ม Gadget ใน Template ซึ่งถ้าทำแบบนี้ Contact Form ของเรา จะเป็นพื้นที่ส่วนเล็กที่เพิ่มใน Template ของ Blog เราเท่านั้น ดังรูปที่ 1

รูปที่ 1 แสดงตัวอย่าง Contact Form ที่ Blogger มีให้ 

แต่ถ้าคุณต้องการทำหน้า Contact Form แยกออกมาเป็นหน้า Contact Us ละ (ไม่ งง กันใช่ไหม 👌👌👌หมายถึง คุณสามารถคลิกเมนู Contact Us แล้วจะเปิดหน้าที่มีรายละเอียดของ ชื่อ อีเมล์ และข้อความ ให้กรอก) ดังรูปที่ 2

รูปที่ 2 แสดงตัวอย่างการสร้างหน้า Contact Form ใน Blogger

บทความนี้ จะอธิบาย 9 ขั้นตอนการสร้างหน้า Contact Form ใน Blogger 
โดยทั้ง 9 ขั้นตอนนี้ จะต้องดำเนินการกับ 3 เมนู ดังนี้
1. "Layout" หรือ "รูปแบบ"
2. "Template" หรือ "ธีม"
3. "Page" หรือ "หน้าเว็บ"


วิธีการเพิ่มฟังค์ชั่น Contact Form ใน Blogger 
ขั้นตอนที่ 1. ไปที่หน้า Dashboard
ขั้นตอนที่ 2. เลือกเมนู "Layout" หรือ "รูปแบบ" ที่ด้านซ้าย
ขั้นตอนที่ 3. คลิกที่ "เพิ่ม Gadget" ดังรูปที่ 3

รูปที่ 3 แสดงหน้าจอการเพิ่ม Contact Form

ขั้นตอนที่ 4. จะเกิด PopUp ขึ้นมา ให้เลือก "More Gadget >> Contact Form" หรือ "แกดเจ็ด >> ฟอร์มรายชื่อติดต่อ" ดังรูปที่ 4

รูปที่ 4 แสดงหน้าจอเพื่อเลือก Contact Form

ขั้นตอนที่ 5.  เลือกเมนู "Template" หรือ "ธีม" ที่ด้านซ้าย แล้วคลิกปุ่ม HTML เพื่อแก้ไขโค้ด

ขั้นตอนที่ 6.  ค้นหาคำว่า "ContactForm" จะเจอ Code ด้านล่างนี้ ก็ให้ Hi-Light ข้อความระหว่าง Code ทั้งสองข้างบนนี้ 
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
...
<b:includable id='main'>

ขั้นตอนที่ 7.  ให้เลือกข้อความส่วนสีส้ม แล้วตัดข้อความสีส้มทั้งหมดไปว่างในหน้าติดต่อ (Contact us) ที่สร้างไว้
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

ขั้นตอนที่ 8: ค้นหาคำว่า ]]></b:skin> และคัดลอก Code ด้านล่างนี้ ไปวางที่ด้านบน

/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

ขั้นตอนที่ 9: เลือกเมนู "Page" หรือ "หน้าเว็บ" ที่ด้านซ้าย และสร้างหน้าเว็บใหม่ ด้วยการคลิกปุ่ม "หน้าเว็บใหม่" และคัดลอก Code ในขั้นตอนที่ 7 ไปวางในหน้าเว็บที่สร้างมาใหม่เมื่อสักครู่ และกด Save

คุณจะได้หน้าติดต่อเรียบร้อย

😥😥😥😥😥

ปล. แต่ใน Blog นี้เรามีการปรับหน้าติดต่อเรานิดหน่อย ถ้าอยากได้รูปแบบเดียวกับเรา ให้เปลี่ยน ดังนี้
ขั้นตอนที่ 7 ทำการลบ Code ทิ้งไป 
ขั้นตอนที่ 8 ทำการลบ Code ทิ้งไป
ขั้นตอนที่ 9 วาง Code ด้านล่างนี้
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
  padding: 30px 30px 20px 30px;
  background: #AA999B;
  border-radius: 3px;
  margin: 30px auto 30px;
  color: #FFF;
  font-size: 16px;
  max-width: 400px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #AA999A;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>

<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 400px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br /></div>
</div>
</div>

Read More

การสร้างรูปแบบของ Blogger ให้สวยเพียง 1 นาที

หลายคนปวดหัวกับการออกแบบหน้า Blogger ให้สวย ดูดี มี Style ต่างจากคนอื่นๆ ซึ่งพอจะมาตกมาแต่ง Blog ให้สวยแบบที่ฝันไว้ ก็มักจะเจอปัญหาปวดหัวกับ Code หรือ Technic ต่างๆ แล้วก็ไม่ได้แบบที่ต้องการ

วันนี้เรามีวิธีการง่ายกว่านั้น มานำเสนอ เพียงคุณเข้าไปค้นหารูปแบบ Template ที่ตัวคุณถูกใจ แล้วค่อยมาปรับแต่งข้อมูลภายใน Blog ให้เป็นเนื้อหาที่คุณต้องการนำเผยแพร่

แล้วรูปแบบ Template ที่ว่าต้องไป Download จากไหนละ ?

เว็บที่ 1: Templatelib (https://templatelib.com/)

เว็บที่ 2: gooyaabitemplates (https://gooyaabitemplates.com/)

เว็บที่ 3: 100+ Best Free Responsive Blogger Templates 2017 (https://cssauthor.com/responsive-blogger-templates/)

เว็บที่ 4: btemplates (https://btemplates.com)

เว็บที่ 5: mybloggerthemes (http://www.mybloggerthemes.com/)

นี่เป็นตัวอย่าง 5 เว็บที่รวม Free Template สำหรับ Blogger เพื่อให้คุณๆเข้าไปเลือกแบบที่ชื่นชอบได้อย่างจุใจกันไปเลย

เมื่อคุณเลือก Template ที่ชอบ ก็สามารถทำการ Download Template นั้นมาเก็บไว้ที่เครื่องคอมพิวเตอร์ก่อน ซึ่งไฟล์ที่ได้จะเป็นไฟล์ Zip ให้คุณคลิกขวาที่ไฟล์ >> เลือก Extract Here

ขั้นตอกการนำ Template ที่เก็บใน Blogger 
1. เข้าไปที่ Dashboard
2. เลือกเมนู "Template" หรือ "ธีม"
3. คลิกที่ปุ่ม "Backup/Restore" หรือ "สำรอง/กู้คืน" ดังรูปที่ 1

รูปที่ 1 แสดงหน้าจอ Dashboard โดยเลือก Template >> Backup/Restore

4. Blogger จะแสดง Popup ขึ้นมา ดังรูปที่ 2

รูปที่ 2 แสดงหน้าจอ PopUp เพื่อให้สามารถ Upload Template เข้าไปใน Blog ได้

5. คลิกปุ่ม Choose File เลือกไฟล์ .XML ใน Folder ที่คุณได้ทำ Extract ไว้ก่อนหน้านี้
6. คลิกปุ่ม Upload

เพียงแค่นี้ คุณก็จะได้ Template Blogger ที่สวยๆ เพียง 1 นาที ซึ่งสามารถปรับแต่ง Template ได้เพิ่มเติมอีกด้วย

Read More

วิธีทำ Robots Header Tags ใน Blogger ให้ Google รู้จักเร็วๆ

เครื่องมือสร้าง Blog อย่าง Blogger มี Function เพื่อกำหนดให้ Search Engine ต่างๆ เข้ามาค้นหาข้อมูลและทำดัชนี Blogger ของคุณๆ 

ซึ่งในบทความนี้ จะอธิบายเฉพาะ แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด (Robots Header Tags)

แล้วอะไร คือ แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด (Robots Header Tags) 
มันก็เป็น Function ที่กำหนดให้ Search Engine รู้ว่าจะต้องค้นหาข้อมูล (Crawling) และจัดทำดัชนี (Indexing) ให้กับ Blogger ของคุณอย่างไร 

ดังนั้น ถ้าส่วนนี้คุณกำหนดค่าผิดพลาดเพียงสิ่งเดียวใน Custom Robots Header Tags อาจทำให้ Blog ของคุณ ถูกลบออกจาก Search Engine ต่างๆ ได้

วิธีการกำหนด แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด หรือ Robots Header Tags 
1. เปิด Dashboard เลือก Settings หรือ การตั้งค่า 

2. เลือก Search preferences หรือ ค่ากำหนดของการค้นหา ดังรูปที่ 1

รูปที่ 1 แสดงการเลือก ค่ากำหนดของการค้นหา เพื่อกำหนด Robots Header Tags ให้กับ Blogger

3. ไปที่ส่วน โปรแกรมรวบรวมข้อมูลและการจัดทำดัชนี (Crawlers and Indexing) ที่อยู่ด้านขวา และคลิก แก้ไข ที่ แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด ดังรูปที่ 2 

รูปที่ 2 แสดงส่วนโปรแกรมรวบรวมข้อมูลและการจัดทำดัชนี 

ให้คุณคลิก แก้ไข ที่ แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด (Robot Header Tag)Blog จะให้คุณคลิก ใช่ เพื่อเปิดใช้งานแท็กส่วนหัวสำหรับโรบ๊อตที่กำหนดหรือไม ดังรูปที่ 3

รูปที่ 3 แสดงส่วนกำหนด Robot Header Tag 

ระบบจะแสดงหน้าจอให้ท่านสามารถกำหนดคุณสมบัติของ แท็กส่วนหัวสำหรับโรบ๊อตที่กำหนด (Robot Header Tag) ได้ ดังรูปที่ 4

รูปที่ 4 แสดงหน้าจอที่ใช้กำหนดคุณสมบัติของ Robot Header Tag 

ให้คุณกำหนดว่าจะให้ Search Engine เข้ามาค้นหาข้อมูล (Crawling) และจัดทำดัชนี (Indexing) ให้กับ Blogger ของคุณอย่างไร ซึ่งการที่คุณจะเข้าไปกำหนด Robots Header Tags ให้กับ Blog ได้นั้น คุณจะต้องทำความเข้าใจกับค่าต่างๆ ที่จะให้เราไปกำหนด ดังนี้

All หมายถึง Robot จะทำการรวบรวมข้อมูลและดัชนีโดยไม่มีข้อกำหนดใดๆ
Noindex หมายถึง Robot จะ ไม่ สามารถเข้ามารวบรวมข้อมูลและทำดัชนีได้ 
Nofollow หมายถึง Robot จะ ไม่  รวบรวมข้อมูลและดัชนีตาม link ต่างๆ ใน Blogger 
None หมายถึง คุณเลือกทั้ง noindex และ nofollow
Noarchive ปกติ Google จะรวบรวมข้อมูลและดัชนีไว้ใน Server ของเขา เมื่อ Web/Blog ของเราล้ม มันจะยังมองเห็น cached ที่เก็บไว้อยู่ แต่ถ้าคุณคลิกเลือกคุณสมบัตินี้ หมายถึง Robot จะไม่ต้องเก็บ cached 
Nosnippet หมายถึง Robot จะ ไม่  เก็บ snippet หรือ meta description 
Noodp หมายถึง Robot จะ ไม่  ใช้ Open Directory Project หรือ Dmoz เป็น Web Directory ที่รวบรวมเว็บไซต์ต่างๆ และมาจัดเก็บไว้เป็นหมวดหมู่ 
Notranslate หมายถึง คุณต้องการปิดการแปลภาษาให้กับเว็บของเรา
Noimageindex หมายถึง Blogger ของคุณยังถูก Robot ค้นหาเจอจากเนื้อหาได้ แต่ ไม่  สามารถถูกค้นหาจากรูปได้
Unavailable_after หมายถึง จะ ไม่  สามารถรวบรวมและค้นหาดัชนี ตามช่วงเวลาที่กำหนด

คุณสมบัติดังกล่าว คุณสามารถกำหนดใน Page 3 ประเภท ดังนี้
1. หน้าแรก (Homepage) 
2. หน้าการเก็บถาวรและหน้าค้นหา (Archive and Search pages) 
ปกติแล้วหน้า Archive ถือว่ามีความสำคัญที่จะทำให้มีผู้เข้ามาชม Blog ของเรา หรือทำให้ spiders, Search Engines, bots สามารถเก็บข้อมูลหรือ Index ใน Blog ของเราได้ง่ายยิ่งขึ้น ดังนั้น การกำหนดคุณสมบัติในส่วนนี้จึงถือว่ามีความสำคัญไม่น้อย 
แล้วหน้า Archive ของ Blogger คือ หน้าไหนละ ... อ่านที่ การสร้าง Archive ของ Blogger 
3. ค่าเริ่มต้นสำหรับโพสต์และหน้าเว็บ (Defaults for posts and pages) 

Read More

วิธีการสร้างเมนูใน Blogger

จากคุณลักษณะของเครื่องมือ Blogger เมื่อคุณเขียนบทความต่อเนื่องกันไปเรื่อยๆ Blog ของคุณจะแสดงบทความใหม่ไว้ลำดับบนต่อเนื่องจากบทความเก่า

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

ดังนั้น เราควรหาทางจัดการเนื้อหาใน Blog ของเราใหม่ ซึ่งบทความนี้ เราจะนำเสนอการสร้างเมนู เพื่อจัดประเภทบทความของเรา

วิธีการสร้างเมนูเพื่อจัดประเภทบทความใน Blogger
1. Login เข้า Blogger
2. เปิด Dashboard ของ Blogger ดังรูปที่ 1

รูปที่ 1 Dashboard ของ Blogger

3. กรณีที่ยังไม่มี Page ให้ไปที่เมนู "หน้าเว็บ" หรือ "Page" เพื่อสร้างหน้าเว็บที่ต้องการขึ้นมาก่อน
4. เลือกที่เมนู "รูปแบบ" หรือ "Layout"
5. เลือก "เพิ่ม Gadget" ระบบจะแสดง Popup ดังรูปที่ 2

รูปที่ 2 แสดงหน้าการกำหนดค่ารายการหน้าเว็บ

ในหน้ากำหนดค่ารายการหน้าเว็บ คุณสามารถเพิ่ม Page ได้ทั้งจากภายใน Blogger และภายนอก
กรณีที่เพิ่ม Page จาก Blog ของเรา ให้ทำเครื่องหมายถูกที่ Page ที่ต้องการสร้างให้เป็นเมนู

เมื่อมีเมนูที่ต้องการแล้ว คุณสามารถจัดเรียงเมนูใหม่ โดยการลากกล่องแต่ละเมนูที่ส่วนของ "ลำดับรายการ" และคลิกปุ่ม บันทึก

ที่หน้า blog จะแสดงเมนูออกมาที่ Gadget ดังรูปที่ 3

รูปที่ 3 แสดงเมนูที่กำหนดไว้บนหน้า Blog

Read More