Submit to
Posts
All Comments
HTML5
Monday, February 17, 2014
HTML
คือ อะไร
หลายคนคงเข้าใจแล้ว แต่ผมก็มั่นใจว่าบางคนยังไม่เข้าใจมันดีพอ เลยอยากจะแนะนำให้พอเข้าใจง่ายๆ อย่างนี้ครับHTML มาจาก HyperText Markup Language
เป็นภาษาประเภทการกำหนดสัญลักษณ์ (Markup Language)ที่ใช้ในการกำหนดโครงร่าง webpage หรือข้อมูลอื่นที่เรียกดูผ่าน web browser ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูลในลักษณะของ tagซึ่ง HTML นี้พัฒนามาหลายเวอร์ชั่น จนมาเป็น HTML5 ที่ใช้อยู่ในัจจุบัน โดยได้มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้สามารถใช้งานได้ง่ายมากยิ่งขึ้น
ความเป็นมาแบบสั้นๆของ HTML
- ปี คศ.1990 Tim Berners-Lee นักวิทยาศาสตร์ชาวอังกฤษ ได้นำเสนอรูปแบบการจัดการเอกสารที่เรียกว่า "HTML tag" โดยใช้พื้นฐานภาษา SGML(Standard Generalized Markup Language) ซึ่งเป็นภาษาในการจัดโครงร่างของเอกสาร รูปแบบภาษาที่นาย Tim เสนอนี้ได้ถูกนำไปใช้เป็นข้อกำหนดในการสร้างเว็บเบราเซอร์ตัวแรกคือ NCSA Mosaic และต่อมา Tim ได้จัดตั้งหน่วยงานชื่อ World Wide Web Consortium (W3C) เพื่อดูแลกำหนดมาตรฐานต่างๆของภาษา HTML
- ปี คศ.1994 ได้พัฒนาเป็น HTML 2.0 และถูกนำไปใช้อย่างแพร่หลาย และพัฒนาต่อมาเรื่อยๆจนเป็นเวอร์ชั่น 3.0, 3.2, 4.0, 4.01 และ XHTML
- ปี คศ. 2004 กลุ่มบริษัทผู้สร้างเว็บเบราเซอร์ ได้แก่ Apple, Mozilla และ Opera ได้จับมือกันสร้างมาตรฐานใหม่เพื่อขยายขีดความสามารถของ ภาษา HTML ภายใต้หน่วยงานใหม่ที่ชื่อ Web Hypertext Application Technology Working Group (WHATWG) ซึ่งทาง W3C ที่มีโครงการพัฒนา HTML 2.0 ก็หันมาสนับสนุนกลุ่ม WHATWG แทน
- ปี คศ. 2007 HTML5 ก็ได้ถูกเผยแพร่ออกมาเพื่อเป็นมาตรฐานใหม่
มีอะไรใหม่ใน HTML5
มีการเพิ่มคุณลักษณะใหม่ๆเข้ามาและก็มีการลดคุณลักษณะบางอย่างออกไปเพื่อลดข้อจำกัดและให้สามารถใช้งานได้สะดวกตรงตามความต้องการมากขึ้น โดยสิ่งที่ถูกเพิ่มเข้ามามีดังนี้
Audio/Video support
โดย HTML5 สามารถรองรับมัลติมีเดียได้อย่างเต็มรูปแบบ โดยเพิ่มแท็กสำหรับแสดงภาพและเสียงได้โดยตรง
New Form Input เพิ่ม input ชนิดใหม่ๆเพื่อให้สามารถรับข้อมูลรูปแบบนั้นได้โดยตรง เช่น number, email, url, datetime เป็นต้น ทำให้รับข้อมูลได้อย่างถูกต้องและช่วยให้ลดขั้นตอนในการเขียนสคริปต์ตรวจสออบข้อมูลลงด้วย
Semantic Markup Page Layout เพิ่มกลุ่มแท็กที่ใช้ในการจัดโครงร่างของเพจที่ระบุถึงส่วนต่างๆโดยตรง เช่น <header>, <nav>, <article>, <section>, <aside>, และ <footer>
Canvas Graphics ให้สามารถวาดกราฟิกต่างๆบนเว็บเพจได้
Drag & Drop ให้รองรับการ Drag & Drop อ็อบเจ็กต่างต่างในหน้าเว็บเพจ โดยการใช้คำสั่งจาวาสคริปต์ควบคุม
Web Storage เป็นกลไกการจัดเก็บข้อมูลแบบใหม่ของเว็บเบราเซอร์ ให้สามารถจัดเก็บข้อมูลที่ซับซ้อนได้ดีกว่าเดิมที่เคยเป็นแบบคุ๊กกี้
Geolocation เป็นการระบุตำแหน่งบนพื้นโลกเป็นละติจูดลองกิจูด
Saturday, September 14, 2013
ในพื้นที่ของ 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:section class='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.
หรือไปที่ 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) อีกจนลงตัว
ลองทำดูครับ!!
หากยังไม่เหมาะสมกับบล็อกของเราลองวิธีนี้ดู ใส่ Widget ลงใน Blogger Header โดย CSS
ใส่ Widget ลงใน Blogger Header โดย CSS
เพราะส่วนใหญ่ Template ที่ Blogger ให้มามันไม่สามารถใส่โฆษณาลงไปข้างๆ header ได้ ซึ่งเป็นหนึ่งในเป้าหมายของเราได้ และพื้นที่ตรง header ก็มีศักยภาพต่อการคลิ๊ก ads มากๆเอาซะด้วย ก็มันเห็นก่อนส่วนอื่นเลยนี่
อย่างที่เราเคยเห็นในหลายๆ website หรือ blog มักจะใส่ Ads ไว้ตรงนั้น เราก็ทำได้ไม่ยาก มาเริ่มกันเลย
อย่างที่เราเคยเห็นในหลายๆ website หรือ blog มักจะใส่ Ads ไว้ตรงนั้น เราก็ทำได้ไม่ยาก มาเริ่มกันเลย
ใส่ Widget ลงใน Blogger Header
และยังมีอีกวิธีลองดูนี่ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header
Step 1. ปลดล็อค Header Section
ขั้นตอนนี้จะเป็นการปลดล็อค Template ที่กำหนดให้ส่วน Header มี widget ได้เพียงอันเดียวนั่นก็คือ header นั่นเองมันก็เลยใส่อะไรลงไปไม่ได้อีกการปลดล็อคตรงนี้ไม่ยาก โดยไปที่ Template>Edit HTML แล้วหาโค๊ดต่อไปนี้เพื่อจะทำการแก้ไข
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>เพื่อให้หาง่ายในกล่อง HTML กด Ctrl+f (เปิดกล่องค้นหา) แล้วใส่โค๊ดลงไป เมื่อเจอแล้วก็แก้ไขสองจุด
1. หลัง maxwidgets= แก้ไขจาก "1" เป็น "" (เอาตัวเลขออกหรือจะใส่ตัวเลขที่ต้องการลงไปก็ได้)ตรงนี้หมายถึงแก้ไขจำนวน widget ที่มีได้ใน section header นี้ที่เคยกำหนดว่าให้มีได้เพียง 1 ให้เป็นไม่จำกัด
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>2. หลัง showaddelement= แก้ไขจาก "no" เป็น "yes" เป็นการแก้ไขจาก "ไม่สามารถใส่ widget ลงในส่วน header นี้ได้" เป็น "สามารถใส่ widget ลงในส่วน header นี้ได้"
Step 2. ใส่ Widget และ หา ID ของมัน
ไปที่ Layout แล้วก็เพิ่ม widget ลงไปในส่วนของ header แต่ตอนนี้มันจะยังซ้อนกันอยู่ จัดเรียงตามใจว่าต้องการให้มันแสดงผลอย่างไร เนื่องจากความต้องการที่จะให้มันแสดงอยู่ข้างๆกันจึงต้องจัดเรียง โดยที่
- Widget ที่อยู่บนสุดจะอยู่ทางซ้ายสุด
- Widget ที่อยู่ล่างสุดจะอยู่ทางขวาสุด
เมื่อเราใส่ widget ลงไปและ Save แล้ว เราจำเป็นต่้องรู้ widget ID เพื่อจะทำการปรับแต่งแต่ละอันได้อย่างถูกต้อง คลิ๊กเพื่อดูวิธีการหา Widget ID
Step 3. ใส่ CSS code
ตอนนี้เราจะทำให้ widget มันแสดงผลตามที่เราต้องการในที่นี้คือไว้ด้านข้างของ Header จะกำหนด padding และ margin อีกทั้งส่วนอื่นๆNote: มันจะเปลี่ยนการแสดงผลเฉพาะที่หน้า blog นะ ไม่เปลี่ยนที่หน้า Layout
1. ไปที่ Template>Cudtomize>Advance>Add CSS แล้วใส่ CSS code ตามด้านล่างลงไป หรือสามารถเข้าไปใส่ลง Template ได้โดยตรงใน Edit HTML วางไว้ก่อนโค๊ด ]]></b:skin>
.header .widget { border: 1px solid; display:inline-block; *float: left; height: 200px; overflow: auto; margin: 10px 5px !important; vertical-align: top; } .header #Header1 { width: 50%; } .header #widgetID1, .header #widgetID2 { width: 20%; }
2. เปลี่ยน Widget ID เป็น ID ของเราที่ได้จาก Step 2. และปรับแต่งค่า(ไฮไลท์สีเหลือง) border(กรอบ), height(ความสูง), margin(ขอบ), width(ความกว้าง) ให้ลงตัวตามต้องการ หากผลรวมของความกว้าง widget ทั้งหมดเกิน widget ด้านขวาก็จะดันอันอื่นลงมา
3. ดูตัวอย่างที่ส่วน Preview ขณะปรับแต่ง เป้าหมายของเราคือปรับ widget ให้เรียงตัวกันสวยงาม
4. เมื่อถูกใจแล้วก็กด Apply To Blog
...เป็นอันเสร็จครับ
แต่ถ้าดูแล้วยังไม่เข้ากับบล็อกเราลองอีกวิธีดู ใส่ Adsense, Search box หรือ Banner Ads ใน Blogger Header
Friday, September 13, 2013
เคยมั้ยที่พอเขียนบทความเสร็จมาลองอ่านเอง แต่รู้สึกว่ามันไม่ค่อยดึงดูดใจให้อยากอ่านทั้งๆที่เราว่าบทความของเราดีมากๆ โดยเฉพาะบทความที่มีตัวหนังสือเยอะๆ รูปก็ไม่ค่อยจะมีใส่ มาดูวิธีทำให้มันดึงดูดสายตาให้น่าอ่านกันดีกว่า
Drop cap
การทำให้อักษรตัวแรกในบทความเป็นตัวใหญ่ โดยตัวอักษรจะมีขนาดใหญ่และยื่นลงมาหลายบรรทัดด้านบนอยู่ในระดับเดียวกันกับข้อความที่ตามหลัง Drop cap ใช้เพื่อดึงดูดความสนใจของผู้อ่าน จะพบเห็นบ่อยๆในพวก ข่าว หนังสือพิมพ์ magazinesมาดูวิธีการทำให้ตัวอักษรตัวแรกกลายเป็นตัวใหญ่แบบง่ายๆ ซึ่งพอเราใส่โค๊ดลงใน template โดยไม่ต้องไปแก้ไขใน post(ไม่ยากหรอก) แล้วมันสามารถเปลี่ยน post ทั้งหมดให้อักษรตัวแรกกลายเป็น Drop cap ได้เลย รวมถึง Post ในอนาคตด้วย โอ้ว!! (ถ้าไม่อนากให้เปี่ยนทั้งหมดก็ปรับแต่งได้นะ)
สำคัญ เพื่อจะให้มันแสดงอักษรแรกเป็นตัวใหญ่ดังใจเรา สิ่งแรกคือบทความของเราต่องขึ้นต้นด้วยตัวอักษร สระ พยัญชนะ เครื่องหมายใดๆก็ได้ หากคุณใส่ รูปภาพ div หรือองค์ประกอบทางHTML เพราะ code จะไม่ทำงานเลย
Step 1. ใส่ รูปแบบของ Drop cap ใน CSS
1. ไปที่ Template>Edit HTML2. ใส่ CSS code ย่อ ต่อไปนี้ ไว้หน้าบรรทัด ]]></b:skin> ใน template (หากเป็น Designer template ให้ ใส่ลงใน custom CSS editer ได้เลย)
.post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold; font-size:65px; float:left; padding:0; margin:-4px 5px 0px 0px; position: relative; background-color:none; line-height:0.9;} Note: หาก blogger ท่านใดเขียนบทความจาก Windows Live Writer ให้แทนที่ post-body:first-letter ด้วย .post-body p:first-child:first-letter เพราะว่า Windows Live Writer จะใส่ <p> ทำให้เป็น paragraphหรือย่อหน้าโดยอัตโนมัติ3. กด Preview ดูตัวอย่างว่าเป็นไง
หากขนาดอักษรยังไม่ได้ดั่งใจก๋สามารถปรับแต่งได้ที่จากในcodeตรง font-size:65px เปลี่ยนเลข 65 เป็นขนาดอักษรที่ชอบได้เลย
4. Save เมื่อเราได้แบบที่เราชอบแล้ว
Step 2. ใส่คำสั่งกำหนดใช้ Dropcap class ลงใน Post
ใช้ขั้นตอนนี้ก็ต่อเมื่อเราทำตาม Step 1. แล้ว(เน้นว่าทำขั้นที่ 1. ด้วยนะ) Drop cap ไม่แสดงในบทความ (อาจเนื่องมาจากเหตุผลใดเหตุผลหนึ่งที่ให้ไว้ใน สำคัญ ด้านบน)จำเป็นต้องเข้าไปแก้ไขในทุก post ที่มีปัญหา
1. เข้าไปใน Post ที่ต้องการแก้ไข
2. สลับไปแก้ไขใน HTML mode
3. ล้อมตัวอักษรหรือคำที่เราต้องการให้เป็น Drop cap ใว้ในโค๊ดด้านล่าง
<span class="dropcap">ล้อมให้อักษรใน post ที่คุณอยากให้เป็น Dropcap อยู่ในนี้ โดยจะให้เป็น Dropcap กี่ตัวก็ได้ตามใจ</span>4. Preview หากพอใจแล้วกด Save
Tips:
- หากต้องการให้แสดงแบบ Drop cap ในบางpost ที่เราต้องการ ให้ลบ ".post-body:first-letter" ใน Step 1.ออก แล้วทำตาม Step 2.
- หากเข้าไปดู post ของเราใน HTML Mode แล้วมันขึ้นต้นด้วย <p> แล้ว โค๊ดอาจจะไม่ทำงานให้ลองเปลี่ยน "post-body:first-letter" เป็น ".post-body p:first-child:first-letter"
Step 3. วีธีที่ผมชอบที่สุด
หากทำตามขั้น Step 1. และ Step 2. ลองจนหมดแล้วยังไม่ได้อีก อย่าพึ่งท้อ ลองนี้ครับ ลืมขั้นตอนทั้งหมดไปได้เลยครับเรามาว่ากันที่โค๊ดบรรทัดเดียวเลยคืออยากให้ post ไหนแสดงเป็น Drop cap ก็ใส่ code ตามด้านล่างนี้<p class="dropcap"><span style="position: relative; padding-bottom: 0px; line-height: 0.9; margin: -4px 5px 0px 0px; padding-left: 0px; padding-right: 0px; float: left; font-size: 65px; font-weight: bold; padding-top: 0px">ล้อมให้อักษรใน post ที่คุณอยากให้เป็น Dropcap อยู่ในนี้ โดยจะให้เป็น Dropcap กี่ตัวก็ได้ตามใจ</span>
ต่อจากนั้นคุณจะไปทำให้ตรงไหนก็ได้ให้เป็น drop cap อีก ก็เอาโค๊ดไปใส่อีกเช่นเคยแต่ไม่ต้องใส่ <p class="dropcap"> แล้ว ใส่ครั้งเดียวก็พอ
จบแล้ว ลุยเลยครับ
Tuesday, September 10, 2013
Desciption ที่ดีก็ย่อมเพิ่มโอกาสที่ post จะถูกคลิ๊ก
Bloggerบางท่านคงรู้จักหรือคุ้นเคยกับ Meta Descriptions กันมาพอสมควรนะครับ สำหรับท่านทียังไม่คุ้นเคยก็มาทำความรู้จักกันเลย
Meta Descriptions คือ คำจำกัดความสั้นๆของ blog ของเราว่ามีเนื้อหาเกี่ยวกับอะไร อย่าง http://createonlineincomes.blogspot.com นี้ก็มีเนื้อหาเกี่ยวกับ การสร้างรายได้ออนไลน์ หาเงินออนไลน์ คือบอกให้กระบวนการของ search engine รู้ว่า web นี้ blog นี้มีเนื่อหาแบบนี้ หากมีคนใช้ keyword ที่ใกล้เคียงกันนี้ search engine ก็มีโอกาสหาเราเจอง่ายขึ้น ทำให้เรามีโอกาสได้ผู้ชมเพื่มขึ้นอะไรประมาณนี้ครับ
แต่ที่คุ้นเคยกันอาจจะเป็นการใส่ Meta description ให้ Web หรือใส่ให้ Blog แต่ที่จะแนะนำคือ อะไรที่ดีกว่านั้น มีผลต่อ search engine มากว่านั้น ไปรู้จักกันเลยดีกว่า
การใส่ Meta Descriptions ให้ Blogger Post และ Page
เป็นลูกเล่นเพื่อเพิ่มขีดความสามารถให้ blogger ในส่วนของ SEO (Search Engine Optimization) เพราะมันบรรยายถึงเนื้อหาของบล็อกหรือบทความ มันจะแสดงสั้นๆในผลการค้นหา และมันจะแสดงโดยบรรยายให้เห็นเมื่อคุณ share บน Google+, Facebook หรือ social network อื่นๆ desciption ที่ดีก็ย่อมเพิ่มโอกาสที่ post จะถูกคลิ๊ก
Step 3. ใส่ description สำหรับบล็อกของเราลงไปในช่อง โดยที่ Meta description นี้จะแสดงในส่วนของ homepage และ หน้า post โดยรวม(multi-post page)
1. ใส่ meta description ให้ multi-post pages (homepage และ หน้า post โดยรวม)
Step 1.ไปที่ setting>Search Preferances>Meta Tags>Description แล้วคลิ๊กที่ EditStep 2. เลือก "Yes" ตรง Enable search description
Step 3. ใส่ description สำหรับบล็อกของเราลงไปในช่อง โดยที่ Meta description นี้จะแสดงในส่วนของ homepage และ หน้า post โดยรวม(multi-post page)
Step 4. คลิ๊ก "Save Change"
2. ใส่ Meta Description ให้แต่ละหน้า
สำหรับการใส่ meta description ให้หน้า post หรือแต่ละ page นั้นสามารถทำได้ที่ส่วนสร้างหรือแก้ไขบทความ
Step 1. คลิ๊กเลือก post ที่ต้องการแก้ไข
Step 2. ที่ Post Settings(อยู้ทางขวามือ) คลิ๊ก Search Descriptions ที่อยู่ข้างล่างนั้น (ตัวเลือก Search Descriptions นี้จะปรากฏก็ต่อเมื่อเราเลือก Enable search description ตามข้อ 1 Step 2. แล้วเท่านั้น)
Step 3. ใส่ meta description สำหรับบทความนั้นลงไป แล้วคลิ๊ก "Done"
สำหรับ Post เก่าๆของเรา เราก็สามารถเข้าไปแก้ไขและเพิ่ม description ลงไปได้
แต่ก่อนที่จะไปเพิ่ม description ให้ post เก่าๆ มาดูกันก่อนว่ามันใช้งานได้กับ template ของเราไหม
3. ตรวจดูว่ามันทำงานกับ template เราได้ไหม
ขั้นตอนนี้จะเป็นการตรวจสอบดูว่า meta description ที่เราใส่ให้บล็อกหรือ post นั้นสามารถทำงานได้ไหม เราจะตรวจสอบก็ต่อเมื่อมันเผยเพร่หรือ publish ไปแล้ว
ใส่ URL ของหน้า post ลงใน online meta tag checker หากมันทำงานกับ template ของเรามันจะแสดง description ในส่วนของ result
ตรวจดู หน้า Homepage ด้วยก็ดี
4. ทำอย่างไรเมื่อ meta description ไม่แสดง
หากทำตามข้อ 3. แล้วแต่ไม่มี description ปรากฏออกมาก็มีโอกาสสูงที่ template ของเราไม่มี code ที่จะ import meta description จาก database ของ Blogger
เราต้องใส่ code ลงไปใน template เอง
Step 1. Template>Edit HTML และใส่ code ด้านล้างลงไปก่อนหน้า <b:skin><
ที่แนะนำให้เขียนเรื่องใกล้ตัวเพราะเราไม่ต้องไปเสียเวลาหาข้อมูล(มันอยู่ในหัวคุณอยู่แล้ว) คุณจะสามารถเขียนตามเรื่องราวจริงๆที่คุณเจอมาซึ่งมันจะเป็นบทความที่ไม่ซ้ำใครแน่นอน
บางคนบอกวันๆผมไม่ทำอะไรเลยจีบหญิงไปวันๆ นั่นก็เรื่องที่คนค้นหาในเน็ตอันดับต้นๆเลยนะครับ
เอาล่ะเลือกเรื่องได้แล้ว เริ่มเขียนบทความเลยดีกว่า ..........
สำหรับบางคนที่อาจมีประสบการณ์เหมือนผมตอนเริ่มเขียนบทความ
- ไม่รู้จะเขียนบทความอะไร
- ไม่เข้าใจในเรื่องที่อยากเขียน ก็อยากทำบล็อก keyword นี้แต่ไม่มีความรู้ T_T
- เขียนแล้วกลัวเนื้อหาดีไม่พอ
- มีเรื่องที่อยากเขียนแต่เริ่มต้นไม่ได้สักที
- เขียนไปสักพักเกิดวิตกจริต บทความแบบนี้มีเยอะแล้วดีกว่านี้ด้วยใครจะมาอ่านของเรา
แต่สำหรับตอนเริ่มต้นจริงๆบางคนอาจเคยเป็นนักบริโภคข้อมูลตัวจริง (บริโภคจัง) จะมีอาการประมาณว่า วันนี้ตั้งใจจะทำblog ล่ะ จะต้องเขียนบทความไปโพสให้ได้ อ้าวแล้วบทความเขาเขียนกันยังไง? ไม่เป็นไรนี่มันโลกอินเตอร์เน็ตอยากรู้ไรถามพี่กู (google) แล้วก็ไปค้นหาด้วย keyword ต่างๆ เริ่มบริโภคข้อมูล พออ่านไปเจออันนั้นเราก็ยังไม่รู้ โอ้อันนี้เจ๋ง อันนี้เคล็ดลับสุดๆ ต้องเก็บให้หมด อ่านไปเรื่อยเลยไปเรื่องอื่นๆด้วยเพราะคิดว่าอันนี้ก็น่าจะรู้อันนั้นใช้งานได้แน่
คำแนะนำสำหรับการเขียนบทความ
- บางคนอ่านไปเจอบทความที่ทำให้รู้ตัวเองว่าเรามันช่างไม่รู้เรื่องเอาซะเลยแล้วเกิดอาการท้อแท้เบื่อหน่ายไปเลยก็มี
- บางคนพอมีสติ คิดได้เอาล่ะพอแค่นี้เริ่มเขียนล่ะ แล้วก็มานั่งเฝ้า keyboard จะเริ่มยังไงดีล่ะ!!
- เวลาหมดสุดท้ายไม่ได้เริ่ม
- เลิก
- เริ่มเขียนบทความให้ได้ก่อน
- เขียนให้เป็นรูปแบบ (แบบของเราเอง)
- เขียนให้น่าอ่านเป็นกันเอง คนอ่านแล้วสบายใจอยากกลับมาอ่านบทความที่เราเขียน
- เขียนให้ถูกหลัก SEO
สำหรับบทความนี้ยังไม่ต้องไปไหนครับ เอาแค่ข้อแรกนี่ล่ะ(อย่าพึ่งหิวเกินไป ค่อยๆกิน)
การเริ่มต้นอยากแนะนำให้เขียนเรื่องที่เราถนัด เรื่องใกล้ตัว โดยเฉพาะอย่างยิ่งคนที่ในชีวิตไม่เคยคิดอยากจะเขียนอะไรมาก่อนเลย(ผมก็คนนึงล่ะ) เช่นเรื่องงานประจำ ที่ๆคุณอาศัยอยู่ หรือแม้กระทั่ง บันทึกประจำวันของคุณเอง
อ้าวไหนบอกว่าบทความต้องมีประโยชน์ บันทึกประจำวัน? งานประจำ? เรื่องใกล้ตัวเรา? มันจะมีใครอยากอ่านกัน
ถ้าวันๆคุณทำงานอ๊อฟฟิตถ่ายเอกสารเครื่องเดิมๆที่รวนเป็นประจำ ในที่ทำงานมีแต่คุณที่จัดการมันได้ถ้าคุณไม่ไปทำงานสักวันสาวอ๊อฟฟิตคงคิดถึงคุณแย่แน่ แค่นี้ต้องเขียนลงblogเลยเรอะ แล้วเครื่องถ่ายเอกสารแบบเดียวกันกับที่คุณใช้ก็คงไม่ใช่เครื่องเดียวในโลกหรอก
ยิ่งอาชีพของคุณเป็นอาชีพที่คนไม่ค่อยรู้จักยิ่งจะทำให้บทความที่คุณเขียนเกี่ยวกับมันเป็นเรื่องที่ Unique (ดีและมีคนเขียนน้อย ค้นหาแล้วมีโอกาสเจอบทความเราสูงมาก)
แล้วบันทึกล่ะใครจะอยากอ่านเราเองก็ไม่ใช่ดาราคนดัง ลองคิดดูว่าที่ผมจะบอกต่อไปนี้จริงใหม ประสบการณ์ของใครในโลกในแต่ละวินาทีไม่มีทางไปซ้ำกันแม้ผมกับคุณไปเจอเรื่องราวพร้อมๆกันก็ไม่มีทางบรรยายความรู็สึกต่อเหตุการณ์ได้เหมือนกัน ถามซ้ำ"แล้วมันจะมีประโยชน์กับใคร" อย่างน้อยก็ตัวคุณล่ะ และก็อีกนั่นล่ะคนอย่างคุณไม่ได้มีคนเดียวในโลก
ที่แนะนำให้เขียนเรื่องใกล้ตัวเพราะเราไม่ต้องไปเสียเวลาหาข้อมูล(มันอยู่ในหัวคุณอยู่แล้ว) คุณจะสามารถเขียนตามเรื่องราวจริงๆที่คุณเจอมาซึ่งมันจะเป็นบทความที่ไม่ซ้ำใครแน่นอน
บางคนบอกวันๆผมไม่ทำอะไรเลยจีบหญิงไปวันๆ นั่นก็เรื่องที่คนค้นหาในเน็ตอันดับต้นๆเลยนะครับ
เอาล่ะเลือกเรื่องได้แล้ว เริ่มเขียนบทความเลยดีกว่า ..........
...วิธีดึงดูดความสนใจ กสอ้่ร ้ะ่วรหนิ่ี้งยนห่ี้นาะงยน.................??????????????????????เริ่มไม่ได้ ไม่รู้จะเริ่มยังไง หากมีอาการแบบนี้ นึถึงหลายบทความที่คุณไปอ่านมาคงแนะนำให้ร่างโครงสร้างขึ้นมา ให้มีส่วนประกอบ
- เกริ่นนำน่าสนใจ(ให้อยากอ่านต่อ เขียนหลังสุดได้)
- เนื้อเรื่อง(บรรยายเรื่องที่คุณอยากให้ชาวบ้านเขารู้ อาจแตกเป็นส่วนย่อยๆให้เขียนง่ายๆ เป็นข้ันเป็นตอน)
- สรุป(นี่ล่ะประเด็นหลักเรื่องที่เล่าไป)
ใช่ครับก็อยากให้ทำได้อย่างนั้นแหละครับ แต่มันก็ยังเขียนไม่ออกอีก ตกลงเรามันโง่เองใช่ใหมนี่ก็รู้ขั้นตอนหมดแล้วแต่ทำไมเขียนไม่ได้สักที อย่าพึ่งท้อครับลืมเรื่องส่วนประกอบไปก่อนแล้วอ่านเรื่องนี้ก่อนจะตัดสินใจบอกว่าตัวเองไม่เหมาะที่จะเขียนบทความ
ในชั้นเรียนประถมแห่งหนึ่ง ชั่วโมงภาษาไทย ครูประจำชั้นเข้ามาสอนและให้การบ้านนักเรียนเขียนเรียงความเรื่อง "โรงเรียนของฉัน" ความยาวอย่างน้อยหนึ่งหน้ากระดาษ ให้เวลาเขียนหนึ่งวัน วันรุ่งขึ้นให้เอามาอ่านให้เพื่อนๆฟัง ว้นนี้เวลายังไม่หมดให้นักเรียนสามารถเริ่มเขียนได้เลยใครเสร็จทันในชั่วโมงก็เล่นได้ตามสบาย แล้วครูปล่อยเด็กๆเขียนเรียงความตามลำพัง
เวลาผ่านไปครึ่งชั่วโมง ครูก็เข้าไปเดินดู เรียงความของเด็กแต่ละคน บางคนก็เขียนได้เป็นหน้าแล้ว ส่วนใหญ่เด็กผู้หญิงจะเขียนกันเกือบเสร็จแล้ว ครูเดินต่อไปเรื่อยๆจนถึงโต๊ะของเด็กชายเก่ง พอครูเอ่ยถาม "ยังไม่เริ่มเขียนเหรอครับ" เก่งก็น้ำตาซึมก่อนจะบอกคุณครูด้วยน้ำเสียงสั่นๆไปว่า "โรงเรียนมันกว้างจริงๆครับผมไม่รู้จะเริ่มเขียนตรงไหน ผมคิดว่ามันยากเกินไปสำหรับผมครับ"
คุณครูเลยบอกเด็กชายเก่งว่า "เก่งจ้ะไม่ต้องรีบเขียนครูให้เป็นการบ้านได้ ครูก็คิดว่า โรงเรียนมันอาจจะใหญ่ไปจริงๆงั้นตอนโรงเรียนเลิกเก่งเอาก้อนหินสวยๆก้อนเล็กที่ประดับหน้าประตูโรงเรียนกลับไปบ้านด้วยนะแล้วก็เขียนเรื่องก้อนหินก้อนนั้นมาส่งพรุ่งนี้นะจ้ะ" เด็กชายเก่งดีใจรีบขอบคุณครูเพราะมั่นในว่าเขาเขียนได้แน่นอนเพราะเขาจะเล่นอยู่ที่ประตูโรงเรียนเป็นประจำก่อนขึ้นรถกลับบ้าน เย็นนั้นเด็กชายเก่งก็เล่นที่หน้าประตูโรงเรียนเช่นเคยแต่เขาไม่ได้หยิบก้อนหินกลับบ้าน
วันรุ่งขึ้นในห้องเรียนชั่วโมงภาษาไทย ครูก็ให้นักเรียนแต่ละคนออกไปอ่านเรียงความของตนหน้าชั้นเรียน คนแล้วคนเล่าจนมาถึงคราวของเด็กชายเก่ง ซึ่งคุณครูอนุญาตให้เขียนเรียงความเรื่องก้อนหินหน้าประตูโรงเรียนได้ แล้วเด็กชายเก่งก็เริ่มอ่าน
"สวัสดีครับ วันนี้ผมจะเสนอเรียงความเรื่อง โรงเรียนของฉัน มีก้อนหินสวยๆรูปร่างรีๆเหมือนไข่ไก่ผิวมันวาวสะท้อนแสงแสบตา มีหลายสี สีเทา สีเหลืองอ่อน สีดำก็มี จับแล้วรู้สึกเย็นมือดี มีหลายขนาดใหญ่จนยกไม่ได้ก็มีหลายก้อนแต่ที่ผมชอบคือก้อนเล็กๆ ผมชอบเอามาโยนเล่นกับเพื่อนๆแต่พวกผมก็เอามันไปวางไว้ที่โคนต้นไม้เหมือนเดิมทุกครั้งเพราะมันทำให้ต้นไม้ในสวนหย่อมหน้าประตูโรงเรียนดูสวยขึ้น ด้านหลังประตูเป็นอุโมงค์ต้นไม้ยาวไปจนถึงลานพระพุทธรูปกลางโรงเรียน ซึ่งมีพระประธานประจำโรงเรียนองค์ใหญ่........................................................................................................................................................................................................................................................................................."
แล้วเก่งก็อ่านเรียงความไปจนจบสี่หน้ากระดาษเพื่อนๆและคุณครูตบมือให้ เก่งยิ้มด้วยความดีใจและภูมิใจ
เริ่มแบบนั้นเลยครับ ส่วนที่เรารู้จักดีที่สุด คุ้นเคยที่สุด ง่ายที่สุด เริ่มมันจากตรงนั้นเลย แล้วอะไรล่ะที่ใกล้ที่สุด..."ความรู้สึกของคุณเองครับ"...บทความจะเป็นบทความที่จริงที่สุด Unique ที่สุด อ่านแล้วรับรู้ง่ายที่สุด
พอคุณเริ่มเขียนบทความได้แล้วคุณจะพบปัญหาที่จะตามมา ก็คือ คุณเขียนไม่ทัน
อ้อเขียนแล้วก็อย่าลืมใส่ Meta Description ด้วยนะครับ
Wednesday, August 7, 2013
หลังจากที่เราใส่ Widget(Gadget) ใน blogger มันก็จะแสดงทุกหน้าเพราะมันถูกตั้งค่าพื้นฐานมาอย่างนั้น แต่จากใช้งานจริงเราบางหน้าเราไม่ต้องการให้แสดง Widget หรือแสดงบาง Widget บางทีก็อยากให้เป็นหน้าที่ไม่มี Widget เลย นู่น นี่ นั่น แล้วแต่ว่าอยากให้หน้าตา blog ของเราออกมาเป็นอย่างไร
ก่อนเริ่มมาทำความเข้าใจลักษณะคำสั่งของ Widget ก่อนดีกว่ามองภาพกว้างๆให้เข้าใจไปเลยจะได้ไม่ต้องมาอ่านกันหลายๆรอบ (ความจริงเข้ามาอ่านบ่อยๆมันก็ดีกับผมนะ แต่คงเสียเวลาคุณน่าดู) มองภาพ กว้างๆพอเห็นไอเดียแล้วค่อยลงมือทำให้มันเข้าใจ (อย่าบอกว่าทำได้ถ้ายังไม่ได้ทำ)
ลักษณะโค้ดของ Widget ที่จะไปอยู่ใน template (แม่แบบ) มันจะไปสั่งให้แสดง content (เนื้อหา) ของ Widget โดยมันเป็นคำสั่งทั่วไปที่จะแสดงทุกหน้า(ทุก page) อาจมีเงื่อนไข(conditional tags)ของมันประกอบเช่นว่า แสดงเมื่อมีข้อมูลเช่น Widget "Profile" มันก็จะสั่งให้ template แสดงรายละเอียดของเจ้าของ blog
เราจะกำหนดให้มันแสดงหรือไม่แสดงในหน้าไหนก็ได้ตามใจเรา โดยการใส่เงื่อนไข(conditional tags) เพิ่มเข้าไปใน Widget เช่นเงื่อนไขว่า "ถ้าเป็นหน้าแรก(homepage) ให้แสดง Widget" คำว่า "ถ้าเป็นหน้าแรก" ก็คือเงื่อนไขที่เราใส่ให้ Widget นี้ครับ คลิกเพื่อดูรายละเอียดของเงื่อนไขต่างๆ การกำหนดเงื่อนไขการแสดงผลให้หน้าเว็บ
ลักษณะตัวอย่างที่เอาไปประยุกต์ใช้บ่อยๆ เช่น
- ให้แสดงแค่หน้าแรก
- ไม่ให้แสดงในหน้านี้เลย
- ไม่ให้บาง gadget แสดงในหน้านี้
- ให้แสดงเฉพาะหน้าที่กำหนด
อ้อสำคัญ วิธีนี้ใช้ไม่ได้กับ gadget ป้ายกำกับ(Labels) คลังบทความ(Archive) และ ผู้ติดตาม(Followers) กับ gadget พวกนี้ต้องใช้ CSS ครับ
Hide/Display Widget on specific pages for Blogger
1. เราต้องรู้ Widget ID (ก็ ID ของ Gadget นั่นแหละครับ) หรือ Section ID ของเราที่ต้องการแก้ไขการแสดงผล
เพื่อจะได้ไปใส่เงื่อนไขให้ถูกอันน่ะครับ ประมาณว่าอยากโทรหาหญิงก็ต้องรู้เบอร์เค้าสุ่มโทรไปทั่วคงไม่ได้คุย ไปนู่นเลย และ Section ID ก็คือ ID ของพื้นที่แสดงผลส่วนต่างๆคลิกที่นี่เพื่อดูวิธีการหา ID ของ Widget และ Section
2. ไปดู HTML code ของ Widget หรือ Section ที่จะแก้ไข
2.1 ไปที่ Template(แม่แบบ)>Edit HTML (คือคลิกที่ Template พอมาหน้า Template แล้วก็คลิก Edit HTML)
2.2 หา Widget หรือ Section ในกล่อง HTML code โดยกด Ctrl+f (คลิกในกล่อง HTML code ก่อนสักทีนึงนะ search box จะได้อยู่ในกล่อง HTML code) ก็ใส่ ID ที่เราจะไปแก้ไขกด Enter มันก็จะพาเราไปอยู่ที่คำค้นหาจะมีแถบสีแสดงอยู่
2.3 คลิกเพื่อขยาย code ออก (คลิกที่สามเหลี่ยมดำเล็กๆใน code box ทางซ้ายบรรทัดเดียวกับ ID)
2.4. คลิกขยายอีกครั้งที่บรรทัด <b:includable id='main'> (อยู่ถัดไปด้านล่างบรรทัดของ ID)
หน้าตาโค้ดของก็จะออกมาประมาณนี้แต่อาจแตกต่างไปในบาง widget ไม่ต้องตกใจบทความนี้ให้สนใจแค่ 2 บรรทัด คือ <b:includable id='main'>
และ </b:includable> code ที่อยู่ระหว่างสองบรรทัดนี้ก็คือ content ของ widget
3. เลือกเงื่อนไข(conditional tags) โดยเลือกจากบทความนี้ก็ได้ครับ กำหนดเงื่อนไขการแสดงผลให้หน้าเว็บ copy เงื่อนไขที่จะใช้มาเลย
4. วางเงื่อนไขเข้าไปใน code
4.1 วางโค้ดที่เรา copy มาจากขั้นที่ 3. ไว้ต่อจาก <b:includable id='main'>
4.2 วาง </b:if> ไว้ตรงหน้า </b:includable> (อ่าน Note ท้ายบทความก่อนวาง tag นี้)
ตามภาพตัวอย่างด้านล่าง (โค้ดของคุณอาจแตกต่างไปแล้วแต่ widget)
5. คลิก Save Template แล้วก็ไปดูผลงานเลย
Note: บางคนพอใจบางคนยังไม่จบเพราะว่าบาง Template ถึง widget มันไม่แสดงแต่พื้นหลังของมันยังแสดงอยู่ เพื่อแก้ไขตรงนี้ให้เราต้องเปลี่ยนโค้ดข้อ 4.2 </b:if> เป็น
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
โดยเปลี่ยน WidgetID เป็น Widget ID ของเรา วางแล้วก็ Save Template ไปดูอีกรอบ
แค่นี้ครับ จบ
Subscribe to:
Posts (Atom)
