Computer Knowledge: Blogger

แสดงบทความที่มีป้ายกำกับ Blogger แสดงบทความทั้งหมด

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

BeHappyกุมภาพันธ์ 17, 2562Blogger, Create-Blogger, Menu, SubMenu ไม่มีความคิดเห็น

ใครที่มีบทความเผยแพร่บน 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 ได้แล้ว

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

BeHappyตุลาคม 01, 2560การเผยแพร่เนื้ือหา, Blogger, Content Syndication, Create-Blogger, Feed RSS Atom คือ อะไร ไม่มีความคิดเห็น

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/

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

BeHappyกันยายน 30, 2560การเพิ่ม Subscription ให้ Blogger, การสร้างฟีต, Blogger, Create-Blogger, Feed RSS Atom คือ อะไร ไม่มีความคิดเห็น

ในการสร้าง 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

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

BeHappyกันยายน 22, 2560ผูกเว็บกับ Google Analytics, Blogger, Create-Blogger, Search Console, Search engine ไม่มีความคิดเห็น

คุณๆ ที่เขียน 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

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

ประเภทของแผนผังเว็บไซต์ (Sitemap) สามารถแบ่งได้กี่ประเภท

BeHappyกันยายน 08, 2560Blogger, Search engine, SEO ไม่มีความคิดเห็น

เมื่อคุณสร้างบทความใน Web หรือ Blog ของคุณเรียบร้อยแล้ว คุณก็คงหวังจะให้ Search Engine ไม่ว่าจะเป็น Google / Bing / Yahoo / Ask.com / AOL เป็นต้น มาทำความรู้จัก Web หรือ Blog ของคุณ

ในบทความนี้ เราจะเสนอวิธีหนึ่งที่คุณต้องทำ นั้นก็คือ การสร้าง Site Map หรือ แผนผังเว็บไซต์ นั้นเอง ซึ่ง Site Map จะมีหน้าที่อธิบายถึง โครงสร้างของเว็บไซต์ ทั้งหมด อ่านมาถึงตรงนี้ มีใคร งง กับคำว่าโครงสร้างของเว็บไซต์หรือไม่ ... ถ้าคุณๆ ฟังแล้วนึกภาพไม่ออก เราขอเรียกสิ่งนี้ว่ามันเหมือนกับหน้าสารบัญของเว็บไซต์

Search Engine จะทำการเก็บข้อมูลและตรวจสอบ Meta-tag ไฟล์ .txt ข้อมูลเนื้อหา และคำค้นต่างๆ

"SEO ชอบ Sitemap ประเภทไหนละ !!!"

Sitemap หรือ แผนผังเว็บไซต์ จะมีอยู่ด้วยกัน 4 ประเภท

1. URLlist (Text Sitemap) เป็น Sitemap ที่สร้างด้วยการ List หน้า Page ไว้ในเว็บไซต์ให้เป็นหมวดหมู่ เพื่อให้ผู้ใช้สามารถเข้าถึงเนื้อหาได้อย่างง่าย ตามรูปที่ 1

รูปที่ 1 แสดงตัวอย่างรูปแบบ Sitemap ที่สร้างแบบ list หน้าเพจต่างๆ

2. HTML Sitemap เป็น Sitemap แบบที่มีโครงสร้าง ที่สามารถบอกข้อมูลให้ทั้งผู้เยี่ยมชมเว็บไซต์ และ Search Engine Bot

อะไรที่เพิ่มลงไปใน HTML Sitemap

2.1 รูปแบบที่มีโครงสร้างที่ชัดเจน มีการเรียงลำดับชั้นไว้แล้ว ทำให้ผู้เยี่ยมชมเว็บไซต์สามารถเข้าใจโครงสร้างเนื้อหาของ Site ได้อย่างรวดเร็ว
2.2 สามารถจัดการ anchor text ได้ หรือ Backlink คือ การทำให้ข้อความธรรมดาเป็นข้อความที่ Link ไปเว็บไซต์หรือหน้าบทความที่ต้องการได้ เช่น <a href="url">Anchor Text</a> ดังนั้น คุณๆ ควรคิด Keyword ที่เกี่ยวข้องกับเว็บไซต์ที่จะเชื่อมโยงไปหรือเนื้อหาในบทความ
2.3 ควรทำเป็น Static Page เพื่อให้ Bot สามารถเก็บข้อมูลได้อย่างถูกต้อง

3. XML Sitemap เป็น Sitemap แบบ ไม่มี โครงสร้าง ซึ่งผู้อ่านจะไม่สามารถเห็นว่ามีเพจอะไรบ้าง

😲😲😲😲

เมื่อผู้ใช้ไม่เห็น Sitemap แบบนี้ .... แล้วจะสร้างไปทำไม ... ก็มีไว้บอกข้อมูลเว็บไซต์เรากับ Search Engine นั้นเอง

5 ขั้นตอนสร้าง Site Map ใน Blogger ด้วย Search Console

BeHappyกันยายน 06, 2560Blogger, Search Console, SEO 1 ความคิดเห็น

ในการสร้าง Blogger มาหนึ่ง Blog คุณต้องมีการสร้าง Sitemap เพื่อให้ข้อมูลกับ Search engine ว่า Blog ของเรามีเนื้อหาเกี่ยวกับอะไร โดยภายใน Blogger มีเมนูนำคุณไปสู่ Google Search Console ซึ่งเป็นเครื่องมือที่ใช้จัดการกับ Sitemap ได้อย่างรวดเร็ว

วิธีการสร้าง Sitemap ด้วย Google Search Console

ขั้นตอนที่ 1. เข้า Dashboard ของ Blogger
ขั้นตอนที่ 2. เลือกเมนู "การตั้งค่า" และ เลือกเมนูย่อย "ค่ากำหนดของการค้นหา"
ที่ด้านขวาของหน้าจอให้มองหาส่วน "โปรแกรมรวบรวมข้อมูลและการจัดทำดัชนี"
ให้คลิก "แก้ไข" ที่ส่วน Google Search Console ดังรูปที่ 1

รูปที่ 1 แสดงช่องทางการเข้าไปจัดการ Google Search Console

ขั้นตอนที่ 3. ระบบจะเปิด https://www.google.com/webmasters/tools/ ให้คลิกปุ่มเพิ่มพร๊อพเพอร์ตี้ ด้วยการพิมพ์ชื่อเว็บ Blog ของเรา ซึ่งบทความนี้ก็ต้องพิมพ์ https://www.happylearntool.blogsport.com/ ระบบจะไปค้นหาและนำเว็บคุณมาแสดง ดังรูปที่ 2

รูปที่ 2 แสดงหน้าที่ Google Search Console ไปค้นหาเว็บตามที่ระบุไปมาแสดง

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

รูปที่ 3 แสดงหน้าแผงการควบคุม

ขั้นตอนที่ 4. คลิกปุ่ม เพิ่ม/ทดสอบแผนผังเว็บไซต์ ระบบจะแสดง PopUp ให้ใส่ atom.xml ที่ช่อง Text ดังรูปที่ 4

รูปที่ 4 แสดง PopUp ให้ใส่ชื่อ atom.xml

ขั้นตอนที่ 5. ให้ คลิกปุ่มทดสอบ ก่อนเพื่อตรวจสอบ แต่ถ้าไม่มี Error อะไรให้ คลิกปุ่มส่ง ได้ทันที

หลังจากคลิกส่งแล้วสามารถคลิก "การรวบรวมข้ออมูล" >> "แผนผังไซต์" ที่จอด้านขวาจะแสดงรายละเอียดบทความภายใน Blog ทันที

เพียงแค่นี้ Blog ของคุณจะมี Sitemap แบบของ XML ให้ Search Engine เก็บข้อมูลแล้ว

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

BeHappyกันยายน 03, 2560Blogger, Create-Blogger 1 ความคิดเห็น

ปกติการสร้าง 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 != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</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>

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

BeHappyกันยายน 02, 2560Blogger, Create-Blogger, Template ไม่มีความคิดเห็น

หลายคนปวดหัวกับการออกแบบหน้า 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 ได้เพิ่มเติมอีกด้วย

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

BeHappyสิงหาคม 29, 2560Blogger, Create-Blogger, Robots Header Tag ไม่มีความคิดเห็น

เครื่องมือสร้าง 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)