Tip.maxlayout.com

Internet Explorer: กำหนดหน้าเว็บที่ถูกเปิดขึ้นมาเป็นหน้าแรก

2010-05-10T11:28:00.009+07:00

วิธีเ้ลือกหน้าเว็บที่จะแสดงขึ้นมาเป็นหน้าแรกในตอนเปิดใช้อินเตอร์เน็ตด้วย Internet Explorer หรือการตั้งค่าหน้าที่เป็น Home Page สามารถทำได้ดังนี้

ขั้นตอนที่ 1. เริ่มโดยเปิดโปรแกรม Internet Explorer ตามภาพข้างล่างนี้แล้วเลือกที่
Tools > Internet Options > General

ขั้นตอนที่ 2. ตั้งค่าในช่อง Home Page ตามต้องการ ซึ่งโดยทั่วไปแล้วจะมีวิธีใส่ค่าลงไปดังนี้

พิมพ์ URL ของเว็บที่ต้องการใส่ลงไปในกรอบสี่เหลี่ยมขนาดใหญ่นั้นโดยตรง
กดปุ่ม "Use Current" จะเป็นการใส่ URL ของหน้าเว็บเรากำลังเปิดอยู่ขณะนี้
กดปุ่ม "Use Default" จะกลายเป็น URL ของค่าเบื้องต้นซึ่งเป็นเว็บของ Microsoft
กดปุ่ม "Use Blank" เป็นการใส่ URL ของหน้าว่างเปล่าลงไป คือไม่เปิดหน้าใดๆ ทั้งสิ้น

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

ขั้นตอนที่ 3. กดที่ปุ่ม "Apply" ก็เสร็จแล้ว

Flash: แสดงไฟล์แฟลชบนบล็อก

2010-09-05T23:50:00.004+07:00

การใส่ไฟล์ Flash ลงในบล็อก (Embed Flash SWF file into Blogger) เหมือนกับตัวอย่างข้างบนนี้ทำได้โดยใส่โค้ดลงในช่อง HTML ของ Widget หรือบทความก็ได้ โดยโค้ดที่ใช้ในตัวอย่างนี้ก็คือ

<embed src="http://sites.google.com/a/maxlayout.com/upload/flash/shopinbottle_banner.swf" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/flashplayer/" align="middle" width="400" height="200"></embed>

ถ้าต้องการให้ลิงก์ไปยังไฟล์ Flash อันอื่นก็ให้แทนที่ URL ในโค้ดจาก
http://sites.google.com/a/maxlayout.com/upload/flash/shopinbottle_banner.swf
ให้กลายเป็น URL ของไฟล์ Flash อันใหม่ได้ตามต้องการ

นอกจากนี้อย่าลืมเปลี่ยนขนาดในการแสดงผลของโค้ดให้ตรงกับไฟล์ Flash อันใหม่ที่จะใช้แทน
ซึ่งขนาดในตัวอย่างนี้ดูได้จากบริเวณส่วนท้ายของโค้ดคือ
width="400" height="200"
โดยให้แทนค่าความกว้าง 400 และสูง 200 ด้วยขนาดของไฟล์ Flash อันใหม่ตามลำดับ

Credit: http://www.aleosoft.com/flashtutorial_blogger.html

Flash: ใส่ลิงก์ให้ Movie Clip

2010-09-06T12:39:00.001+07:00

วิธีใส่ลิงก์ใน Movie Clip ของแฟลช (Creating URL links for Flash Movie Clip) เพื่อให้เวลาที่ถูกคลิกแล้วจะเปิดหน้าเว็บที่ต้องการขึ้นมา โดยใช้ Flash ActionScript 3 แบบเดียวกับตัวอย่างข้างล่างสามารถทำได้ดังนี้

ขั้นตอนที่ 1. สร้างไฟล์ Flash ActionScript 3 จากนั้นเอา Movie Clip ที่ทำไว้วางลงไปบนหน้าจอ

ขั้นตอนที่ 2. เลือกที่ Movie Clip บนหน้าจอ จะพบว่ามีเมนู Properties ปรากฏขึ้นมา โดยใส่ชื่อในช่อง Instance name ว่า myMc

ขั้นตอนที่ 3. สร้างเลเยอร์ใหม่เพิ่มขึ้นอีกหนึ่งอันไว้ด้านบนเหนือเลเยอร์ที่มี Movie Clip อยู่ แล้วให้เลือกทำงานในเลเยอร์อันใหม่ที่อยู่ด้านบนนี้ โดยกด F9 เพื่อเปิดหน้าต่าง Action แล้วใส่โค้ดว่า

var url:String = "http://www.shopinbottle.com";
var request:URLRequest = new URLRequest(url);

myMc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void
{
   navigateToURL(request, "_blank");
}

myMc.addEventListener(MouseEvent.ROLL_OVER,myMcOver);

function myMcOver (e:MouseEvent):void {
   myMc.buttonMode = true;
   myMc.useHandCursor = true;
}

ขั้นตอนที่ 4. จากนั้นก็กด F12 สั่งให้ส่งออกเป็นไฟล์ .swf ก็เสร็จแล้ว
โดยไฟล์ที่ได้จากตัวอย่างมันจะลิงก์ถูกไปที่เว็บของ Shopinbottle.com แต่เวลาที่จะเอาโค้ดนี้ไปใช้ก็อย่าลืมเปลี่ยน URL จาก http://www.shopinbottle.com ที่อยู่ในโค้ดบรรทัดที่ 1 ให้กลายเป็น URL ของเว็บอันใหม่ตามที่คุณต้องการ

อธิบายเพิ่มเติม
ถ้าลองคลิกลงบนไฟล์ swf ที่สร้างเอาไว้ในเครื่องของเราเองมันอาจไม่ยอมเปิดลิงก์หน้าเว็บขึ้นมา ซึ่งต้องอัพโหลดไฟล์นั้นขึ้นไปบนเว็บไซต์ก่อนจึงจะทำงานได้

นอกจากนี้หากไม่ต้องการให้เคอเซอร์เมาส์เปลี่ยนเป็นรูปมือเวลาอยู่เหนือ Movie Clip ก็ให้ลบโค้ด 6 บรรทัดสุดท้ายทิ้งไป ซึ่งก็คือ

myMc.addEventListener(MouseEvent.ROLL_OVER,myMcOver);

function myMcOver (e:MouseEvent):void {
   myMc.buttonMode = true;
   myMc.useHandCursor = true;
}

Credit: http://www.actionscript.org/forums/showthread.php3?t=191349
Credit: http://codingrecipes.com/cursor-hand-when-mouse-over-images-actionscript-3-flash

Blogger: ลบหรือซ่อนแถบนำทางด้านบนของบล็อก

2010-02-12T12:39:00.021+07:00

วิธีลบหรือซ่อนแถบนำทางของ Blogger (Remove or Hide Blogger NavBar) จะมีผลต่างกันคือถ้าเป็นวิธีซ่อนจะทำให้แถบนำทางหายไปแต่ตำแหน่งของเนื้อหายังคงที่ดังเดิม แต่ถ้าเป็นวิธีลบนั้นนอกจากแถบนำทางจะหายไปแล้วยังจะมีการเลื่อนเนื้อหาขึ้นมาด้านบนแทนที่ตำแหน่งของแถบนำทางที่ถูกลบทิ้งไปด้วยซึ่งทั้ง 2 วิธีสามารถทำได้ดังนี้

วิธีการซ่อนแถบนำทาง (Hide Blogger NavBar) จะทำให้ผู้อ่่านไม่สามารถมองเห็นแถบนำทางด้านบน แต่ตำแหน่งของเนื้อหาต่างๆ ภายในบล็อกก็จะอยู่คงที่ดังเดิม

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่
รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ

ขั้นตอนที่ 2. กดปุ่มคีย์บอร์ด Ctrl + F แล้วค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอด้วย

#navbar-iframe { display: none !important; }

]]></b:skin>

ขั้นตอนที่ 4. เลือกที่ บันทึกแม่แบบ

วิธีการลบแถบนำทาง (Remove Blogger NavBar) จะทำให้แถบนำทางด้านบนหายไป และจะส่งผลให้ตำแหน่งของเนื้อหาในบล็อกมีการขยับเลื่อนขึ้นด้านบนมาแทนที่ตำแหน่งของแถบนำทางที่ถูกลบทิ้งไป

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่

รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ

ขั้นตอนที่ 2. กดปุ่มคีย์บอร์ด Ctrl + F แล้วค้นหา

]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอด้วย
#navbar{
height:0px;
visibility:hidden;
display:none;
}
]]></b:skin>

ขั้นตอนที่ 4. เลือกที่ บันทึกแม่แบบ

Credit: http://www.bloggerarticle.com/2009/12/how-to-remove-and-adding-navbar-or-navigation-on-blogger/

Blogger: ทำเมนูแบบลิงก์ด้วยรูปภาพ

2010-03-10T19:50:00.104+07:00

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

ตัวอย่างเมนูรูปภาพแบบ 5 ลิงก์ใน Blog

ซึ่งเมนูนี้สร้างได้โดยนำโค้ดด้านล่างนี้ไปวางในช่ิอง HTML ของ widget หรือบทความก็ได้โดยมีวิธีแก้ไขภาพเมนูและลิงก์ปลายทางดังนี้ครับ

ขั้นตอนที่ 1. เริ่มจากลองทำเมนูแบบภาพเดียวก่อน

ซึ่งเขียนด้วยโค้ดตามด้านล่างนี้

</td></tr>

</tbody></table>

</div>

เวลานำไปใช้งานอย่าลืมแก้คำว่า URL_ของลิงก์ปลายทาง และ URL_ของภาพเมนู ในโค้ดที่กล่าวมาให้เป็น URL ของลิงก์ตามที่คุณต้องการ เช่นในตัวอย่างของเมนูแบบภาพเดียวที่ทำให้ดูนี้ประกอบด้วย
URL_ของลิงก์ปลายทาง ก็คือ
http://tip.maxlayout.com/2009/11/photoscape-gif-animation.html
URL_ของภาพเมนู ก็คือ
http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg

ขั้นตอนที่ 2. การทำให้เมนูมีลิงก์เพิ่มขึ้น

ทำให้ลิงก์รูปภาพเพิ่มขึ้นอีกหนึ่งอันด้วยการนำโค้ดในขั้นตอนที่ 1 มาแล้วก็แทนที่โค้ดใน 3 บรรทัดสุดท้ายซึ่งก็คือ

</td></tr>

</tbody></table>

</div>

โดยให้แทนที่โค้ดที่กล่าวมานั้นด้วยโค้ดตามด้านล่างนี้

</td><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">

</td></tr>

</tbody></table>

</div>

ซึ่งพอแก้ตามที่บอกแล้วก็จะกลายเป็นแบบนี้
<div align="center">
<table border="0" bordercolor="#000000" cellpadding="3" cellspacing="0" style="border-collapse: collapse; border: 0px; margin: 0px;"><tbody>
<tr style="text-align: center;"><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">
<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>
</td><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">
<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>
</td></tr>
</tbody></table>
</div>

สังเกตได้ว่าพอแก้ไขตามขั้นตอนที่ 2 นี้แล้วก็จะมีลิงก์รูปภาพเพิ่มขึ้นมาอีกหนึ่งอัน และจะมีส่วนท้ายของโค้ดใน 3 บรรทัดสุดท้ายเหมือนกับของขั้นตอนที่ 1 ดังนั้นจึงสามารถทำซ้ำตามขั้นตอนที่ 2 นี้เพื่อเพิ่มจำนวนเมนูภาพให้มากขึ้นอีกได้่

ขั้นตอนที่ 3. การปรับระยะห่างของภาพในเมนู

ลองสังเกตโค้ดของขั้นตอนที่ 1 ในบรรทัดที่ 2 ซึ่งก็คือ
cellpadding="3"
โดยให้แทนที่เลข 3 ในโค้ดเพื่อเพิ่มหรือลดระยะห่างระหว่างรูปในเมนู ซึ่งถ้าต้องการให้ห่างมากขึ้นก็เพิ่มเลขให้มากกว่านี้ และถ้าอยากให้อยู่ใกล้กันก็ลดเลขให้น้อยลง

ขั้นตอนที่ 4. การเลือกตำแหน่งวางเมนู

ถ้าไม่ชอบเมนูแบบตั้งอยู่ตรงกลางจอ ก็สามารถเลื่อนตำแหน่งได้โดยสังเกตโค้ดของขั้นตอนที่ 1 ในบรรทัดที่ 1 ซึ่งก็คือ
<div align="center">
ซึ่งสามารถแก้ไขโค้ดตำแหน่งที่กล่าวมาได้ดังนี้
ใช้ <div align="center"> ตามแบบเดิมเพื่อให้เมนูตั้งอยู่ตรงกลาง
ใช้ <div align="left "> เพื่อให้เมนูตั้งชิดด้านซ้าย
ใช้ <div align="right"> เพื่อให้เมนูตั้งชิดด้านขวา

RSS Feed คืออะไร

2010-06-18T11:05:00.005+07:00

อาร์เอสเอส (RSS = Really Simple Syndication) คือ ข้อมูลที่อยู่ในรูปแบบเอ็กเอ็มแอล (XML) ที่กำหนดขึ้นมา สำหรับกระจายข้อมูลออกไปสู่เว็บไซต์ (Website Syndication) หรือเว็บบล็อก (Web Blog) เพื่อให้ผู้ที่สนใจสามารถใช้ติดตามข่าวสารใหม่ๆได้ในทันที
ตัวย่อต่าง ๆ ที่ใช้อ้างถึงมาตรฐานนี้

Rich Site Summary (RSS 0.91)
RDF Site Summary (RSS 0.9 และ 1.0)
Really Simple Syndication (RSS 2.0)

RSS หรือ Really Simple Syndication เป็นบริการใหม่บนเว็บไซต์ภาษา XML ใช้สำหรับดึงข้อมูลหรือข่าวจากเว็บต่างๆ มาแสดงบนหน้าเว็บเพจ โดยนำมาเฉพาะหัวข้อข่าว เมื่อผู้ใช้คลิกลิงค์ก็จะแสดงรายละเอียดข่าวในเว็บต้นฉบับนั้นๆ โดยที่หัวข้อข่าวจะอัปเดทตามเว็บต้นทางโดยถ้าข้อมูลที่เว็บต้นแบบถูกแก้ไขจะทำให้ข่าวที่เว็บของเรามีการแก้ไขตามไปด้วย ซึ่งการดึงหัวข้อข่าวไปแสดงนั้นจะมีส่วนประกอบทั้งหมดสามส่วนคือส่วนผู้ให้บริการดึงข่าว และส่วนผู้สร้างเว็บไซต์ใช้ทั่วไปที่ต้องการดึงข่าวไปแสดง และส่วนผู้ใช้ทั่วไป

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

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

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

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

Safari: เปลี่ยนการเข้ารหัสภาษาในหน้าเว็บ

2010-08-07T12:10:00.014+07:00

เวลาที่ใช้โปรแกรม Safari เข้าเว็บบางแห่งแล้วพบว่าตัวอักษรที่แสดงอยู่ในหน้านั้นไม่สามารถอ่านได้ เนื่องจากกลายเป็นภาษาต่างดาว จะสามารถแก้ไขได้โดยใช้วิธีเปลี่ยนการเข้ารหัสภาษาในหน้าเว็บ (Change Text Encoding) โดยให้เข้าไปที่
display a menu for the current page > Text Encoding
แล้วเลือกภาษาที่เข้ารหัสใหม่ให้ตรงกับเว็บหน้านั้นเหมือนกับภาพด้านล่างนี้

Blogger: จัดการลิงก์รูปภาพ

2010-03-10T19:40:00.011+07:00

ในตามปกติถ้าเราแทรกรูปภาพลงในบทความ แล้วเมื่อคลิกลงบนภาพก็จะลิงก์เข้าไปที่ URL ของภาพนั้นในขนาดเต็ม แต่ถ้าหากต้องการให้รูปภาพนั้นลิงก์ไปยัง URL ของเว็บปลายทางที่ต้องการ ซึ่งอาจต้องการให้เปิดแทนที่หน้าเดิม เปิดขึ้นในหน้าใหม่ หรือให้เป็นภาพที่ไม่มีลิงก์เวลาที่คลิิก ก็สามารถกำหนดในโค้ด HTML ได้ัตามตัวอย่างด้านล่างนี้

ก่อนอื่นให้กำหนด URL ซึ่งก็คือ
URL_ปลายทาง = เวลาโดนคลิกแล้วจะให้ไปที่ไหน หรือเปิดหน้าไหนขึ้นมา
URL_ของภาพ = ที่ตั้งของรูปซึ่งเก็บ หรือฝากเอาไว้

โดยนำ URL ที่กำหนดไว้นั้นมาใส่ในลงโค้ดดังนี้ (ลองกดตรงภาพตัวอย่างแต่ละชนิดเพื่อดูความแตกต่าง)

วิธีจัดการลิงก์รูปภาพแต่ละชนิด

1. ลิงก์รูปภาพที่เปิดขึ้นในหน้าเดิม
<a href="URL_ปลายทาง"><img src="URL_ของภาพ"></a>

ตัวอย่าง

โดยในตัวอย่างประกอบด้วยโค้ด HTML ดังนี้
<a href="http://maxlayout.com/"><img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg"></a>

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg

2. ลิงก์รูปภาพที่เปิดขึ้นมาในหน้าต่างใหม่
<a href="URL_ปลายทาง" target="_blank"><img src="URL_ของภาพ" /></a>

ตัวอย่าง

โดยจะต่างกับตัวอย่างลิงก์รูปภาพในข้อ 1 ก็ตรงที่มีการเพิ่ม _blank ลงไปโดยมีโค้ด HTML ดังนี้
<a href="http://maxlayout.com/" target="_blank"><img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg" /></a>

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg

3. ทำรูปภาพแบบไม่มีลิงก์
<img src="URL_ของภาพ" />

ตัวอย่าง

ทำได้โดยตัดโค้ดเกี่ยวกับลิงก์ออกไปดังนี้
<img src="http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg" />

ซึ่ง URL ของตัวอย่างนี้ถูกกำหนดว่า
URL_ปลายทางคือ http://maxlayout.com/
URL_ของภาพคือ http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg

Blogger: ลบบล็อก

2009-11-02T12:32:00.029+07:00

การลบบล็อกของ Blogger หรือ Blogspot ทำได้โดยไปที่ การตั้งค่า > ขั้นต้น > ลบบล็อก จากนั้นเลือกที่ ลบบล็อกนี้
โดยจะมีเวลาให้เปลี่ยนใจกลับมาใช้ใหม่ได้ภายใน 90 วันก่อนที่ข้อมูล blog จะถูกลบทิ้งไป

Blogger: แนะนำแหล่งรวมเทมเพลท

2009-11-02T12:15:00.009+07:00

แนะนำแหล่งดาวน์โหลดเทมเพลทของบล็อก (Download Blogger Template) ไว้ตบแต่งหน้าตาของ Blogger ซึ่งมีให้เลือกเยอะมากจนนับไม่ถ้วน และนอกจากนี้บางแห่งก็จะมีการสอนวิธีปรับแต่งเทมเพลทแนบอยู่ด้วย

Blogger: รายงานข้อมูลการเข้าชมบล็อกด้วย Google Analytics

2010-04-11T21:37:00.000+07:00

การใช้ Google Analytics ติดตาม Blogger (Install Google Analytics on Blogger) เพื่อตรวจสอบข้อมูลเกี่ยวกับการเข้าชมบล็อกเช่น จำนวนผู้เข้าชมในแต่ละวัน สถิติการเข้าชมหน้าเว็บ มีการเข้าชมหน้าเว็บไหนบ้าง ผู้ชมเข้ามาหน้าเว็บผ่านเส้นทางใด และวิเคราะห์บทความที่ได้รับความนิยมมากที่สุด มีขั้นตอนการติดตั้งดังนี้

ขั้นตอนที่ 1. เริ่มต้นสมัครเข้าใช้ Google Analytics โดยไปที่ http://www.google.com/analytics/ แล้วเลือกที่ "เข้าถึง Analytics"

ขั้นตอนที่ 2. ให้ใส่ชื่อและรหัสเข้าใช้ของบัญชี Google หรือ Gmail ของตัวเองลงไป และเลือกที่ "เข้าสู่ระบบ"

ขั้นตอนที่ 3. เลือกที่ "สมัครเข้าใช้"

ขั้นตอนที่ 4. ใส่ข้อมูลในแบบฟอร์ม "การสมัครเข้าใช้บัญชีใหม่" โดยในช่องด้านบนสุดก็ให้นำ URL ของบล็อกที่คุณต้องการติดตามใส่ลงไป และหลังจากใส่ข้อมูลเสร็จแล้วก็เลือกที่ "ดำเนินการต่อ"

ขั้นตอนที่ 5. ใส่ชื่อนามสกุลลงไปแล้วเลือกที่ "ดำเนินการต่อ"

ขั้นตอนที่ 6. กดยอมรับข้อกำหนดในการให้บริการ จากนั้นเลือกที่ "สร้างบัญชีใหม่"

ขั้นตอนที่ 7. คัดลอกโค้ดการติดตามที่ปรากฎในช่องดังรูป

ขั้นตอนที่ 8. เลือกที่ "บันทึกและสิ้นสุด"

ขั้นตอนที่ 9. จะพบว่าในตารางช่องสถานะมีสัญลักษณ์ว่า "ยังไม่ได้ติดตาม" แสดงไว้อยู่

ขั้นตอนที่ 10. โดยสามารถเข้าไปดูสถานะการติดตามของบล็อกได้โดยเลือกที่ "แก้ไข"

ขั้นตอนที่ 11. จากนั้นลองเลือกที่ "ตรวจสอบสถานะ" เพื่อสั่งให้ระบบติดตามบล็อกของคุณ

ขั้นตอนที่ 12. จะพบว่าในช่องข้อมูลสถานะการติดตามจะแสดงไว้ว่า "ยังไม่ติดตั้งการติดตาม"

ขั้นตอนที่ 13. ที่ด้านล่างของหน้าจอนี้ก็จะมี "โค้ดการติดตาม" โดยเป็นโค้ดแบบเดียวกับในขั้นตอนที่ 7 แสดงไว้ให้เราดูอีกครั้ง ซึ่งถ้าหากทำโค้ดในขั้นตอนที่ 7 หายไปก็สามารถเข้ามาคัดลอกจากที่นี่ได้เลย

ขั้นตอนที่ 14. นำโค้ดการติดตามไปวางลงในบล็อก โดยเข้าไปที่บล็อกของคุณ แล้วเลือกที่
รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ
ให้กด Ctrl+F บนคีย์บอร์ดแล้วค้นหา </body> ซึ่งมักจะอยู่ที่ส่วนท้ายของหน้าดังรูป จากนั้นให้วาง "โค้ดการติดตาม" ของ Google Analytics ที่ได้คัดลอกมาในบรรทัดด้านบนเหนือ </body>

ขั้นตอนที่ 15. เมื่อวางโค้ดเสร็จแล้วให้เลือกที่ "บันทึกแม่แบบ"

ขั้นตอนที่ 16. ให้เข้าไป https://www.google.com/analytics/settings/home ก็จะพบว่ายังมีสัญลักษณ์ว่า "ยังไม่ได้ติดตาม"แสดงไว้อยู่เหมือนเดิม

ขั้นตอนที่ 17. โดยสามารถเข้าไปดูสถานะการติดตามของบล็อกได้โดยเลือกที่ "แก้ไข"

ขั้นตอนที่ 18. ให้เลือกที่ "ตรวจสอบสถานะ" อีกครั้งเพื่อสั่งให้ระบบเริ่มติดตามบล็อกของคุณ

ขั้นตอนที่ 19. ในคราวนี้ระบบจะบอกว่าติดตั้ง Analytics เสร็จสมบูรณ์แล้ว โดยจะมีสถานะการติดตามแสดงไว้ว่า "รอข้อมูล"

ขั้นตอนที่ 20. จากนั้นพอกลับมาที่หน้าจอ https://www.google.com/analytics/settings/home อีกครั้ง ก็จะพบว่ามีสัญลักษณ์รูปนาฬิกาซึ่งหมายถึงกำลังรอข้อมูลแสดงไว้อยู่

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

ขั้นตอนที่ 22. โดยสามารถเข้าไปดูกราฟและแผนภูมิแสดงข้อมูลผู้เข้าชมบล็อกของคุณได้โดยเลือกที่ "ดูรายงาน"

ขั้นตอนที่ 23. ซึ่งลองดูตัวอย่างรายงานของ Google Analytics ได้จากภาพด้านล่างนี้

Credit: http://www.eblogtemplates.com/how-to-install-google-analytics-on-blogger/

เปลี่ยนโลโก้ในผลการค้นหาของ Google Custom Search

2010-07-16T12:30:00.008+07:00

ถ้าใช้้ Google Custom Search ที่เลือกให้แสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' จะสามารถเปลี่ยนภาพโลโก้ (Logo) ซึ่งแสดงในหน้าผลการค้นหาได้เหมือนกับภาพตัวอย่างด้านบน โดยมีวิธีการเปลี่ยนโลโก้ดังนี้

ขั้นตอนที่ 1. เริ่มแรกให้ไปที่ http://www.google.com/cse/ แล้วกดที่ 'จัดการเครื่องมือค้นหาที่มีอยู่ของคุณ' หรือจะเลือกเข้าไปที่ http://www.google.com/cse/manage/all โดยตรงเลยก็ได้เหมือนกัน

ขั้นตอนที่ 2. จะมีรายชื่อเครื่องมือค้นหาที่เราทำขึ้นแสดงอยู่ โดยให้เลือกที่ 'แผงควบคุม' ที่อยู่ข้างๆ ชื่อเครื่องมืออันนั้น

ขั้นตอนที่ 3. เลือก 'รูปลักษณ์และความรู้สึก' ในเมนูด้านซ้ายมือ

ขั้นตอนที่ 4. ในเมนู 'ตัวเลือกการโฮสต์' ต้องตั้งค่าเป็น 'หน้าเว็บที่โฮสต์โดย Google'

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

ขั้นตอนที่ 6. กดที่ปุ่ม 'กำหนดค่า' ที่อยู่ใต้ไอคอนรูปแบบที่เลือกเอาไว้

ขั้นตอนที่ 7. ตอนนี้จะพบว่าไอคอนรูปแบบที่เลือกไว้ก็จะกลายเป็น 'สไตล์ของฉัน' จากนั้นให้กดที่ตัวเลือก 'โลโก้' ในแถบด้านล่างแล้วจะมีเมนูให้ปรับแต่งโลโก้ปรากฎออกมา

ขั้นตอนที่ 8. เลือกขนาดโลโก้

ขั้นตอนที่ 9. 'URL ของโลโก้' หมายถึง ที่ตั้งของภาพโลโก้ที่เราอัพโหลดไว้

ลิงก์โลโก้ 10. 'ลิงก์โลโก้' หมายถึง เมื่อมีการกดลงบนภาพโลโก้แล้วจะให้นำไปสู่หน้าเว็บหน้าใด

ขั้นตอนที่ 11. ถ้าตั้งค่าโลโก้เสร็จแล้วก็ให้กดที่ปุ่ม 'บันทึก'
โดยถ้าหากคุณเป็นผู้ใช้้ Google Custom Search ที่เลือกให้แสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' อยู่แล้วก็จบที่ขั้นตอนนี้และสามารถเข้าไปดูผลได้เลย แต่ถ้าหากคุณใช้ Google Custom Search ในรูปแบบอื่นอยู่ก็ต้องรับโค้ดใหม่โดยทำตามขั้นตอนต่อไป

ขั้นตอนที่ 12. เลือกที่ 'รับโค้ด' ทางซ้ายมือ หลังจากนั้นก็ให้สั่งคัดลอกโค้ดภายในกรอบสี่เหลี่ยม ไปวางใส่ลงเว็บไซต์หรือบล็อกของเราก็จะมีช่องค้นหาปรากฎออกมา ซึ่งถ้าลองสั่งค้นหาข้อมูลดูก็จะพบว่าโลโก้ของผลการค้นหาจะถูกเปลี่ยนกลายเป็นภาพที่เราใส่ลงไป

อธิบายเพิ่มเติม
ในครั้งหน้าถ้าต้องการเปลี่ยนภาพสัญลักษณ์ หรือแก้ไขปรับค่าต่างๆ ของเมนูโลโก้ในขั้นตอนที่ 8-10 เมื่อกดที่ปุ่ม 'บันทึก' ตามขั้นตอนที่ 11 แล้วก็จะส่งผลให้โลโก้ที่เรากำลังใช้อยู่มีการเปลี่ยนแปลงไปโดยอัตโนมัติ โดยที่เราไม่จำเป็นต้องไปรับโค้ดในขั้นตอนที่ 12 อีก

Blogger: สมัครใช้และติดตั้ง Google Custom Search

2010-07-15T18:23:00.016+07:00

Google Custom Search เป็นการค้นหาข้อมูลด้วยที่กำหนดได้เอง สำหรับให้ผู้เข้าชมใช้ค้นหาข้อมูลในเว็บไซต์หรือบล็อก ซึ่งใช้งานได้ฟรีไม่ต่องเสียค่าใช้จ่ายและสามารถทำได้ง่ายๆดังนี้

ซึ่งบทความนี้จะจำแนกการอธิบายโดยแบ่งออกเป็น 3 ส่วนคือ

ขั้นตอนที่ 1-10 > วิธีสร้างเครื่องมือค้นหาด้วย Google Custom Search
ขั้นตอนที่ 11-14 > วิธีเปลี่ยนรูปลักษณ์และความรู้สึกของ Google Custom Search
ขั้นตอนที่ 15-18 > ตัวอย่างการติดตั้ง Google Custom Search ใส่ลงในบล็อกของ Blogger

วิธีสร้างเครื่องมือค้นหาข้อมูลด้วย Google Custom Search

ขั้นตอนที่ 1. เริ่มแรกให้ไปที่ http://www.google.com/cse/ แล้วกดปุ่ม 'สร้่าง Google Custom Search' แล้วก็ใส่ข้อมูลของเครื่องมือค้นหาที่ต้องการลงไปตามขั้นตอนด้านล่าง โดยข้อมูลที่ใส่ลงไปนี้ส่วนใหญ่จะสามารถแก้ไขได้ในภายหลังเมื่อเข้าไปเลือกที่ 'แผงควบคุม'

ขั้นตอนที่ 2. ตั้งชื่อให้เครื่องมือค้นหา

ขั้นตอนที่ 3. ช่องสำหรับคำอธิบายของเครื่องมือค้นหา (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 4. ใส่ URL เว็บไซต์ที่จะให้ถูกรวมอยู่ในผลการค้นหาของเครื่องมือนี้
โดยตามภาพนี้ผมต้องการสร้างให้เป็นเครื่องมือสำหรับค้นหาข้อมูลที่ครอบคลุมทั้งโดเมนจึงใส่ค่าลงไปเป็น maxlayout.com ดังรูป แต่ถ้าหากต้องการทำแบบอื่นก็ลองอ่านวิธีใส่ได้โดยกดที่ 'เคล็ดลับการจัดรูปแบบ URL.'

อธิบายเพิ่มเติม
นอกจากนี้สามารถอ่านรายละเอียดเกี่ยวกับรูปแบบ URL ของ google custom search ได้ที่
http://www.google.com/support/customsearch/bin/answer.py?hl=th&answer=71826

ขั้นตอนที่ 5. เลือก 'ยอมรับข้อกำหนดในการให้บริการ'

ขั้นตอนที่ 6. กดที่ 'ถัดไป'

ขั้นตอนที่ 7. กดที่ 'เสร็จสิ้น'

ขั้นตอนที่ 8. จะมีชื่อเครื่องมือค้นหาที่ทำขึ้นแสดงอยู่ในรายการด้านล่าง โดยเราสามารถเข้าไปจัดการปรับแต่งเครื่องมือนี้ด้วยการเลือกที่ 'แผงควบคุม'

ขั้นตอนที่ 9. จะเข้าสู่หน้า 'ข้อมูลเบื้องต้น' โดยจะพบว่ามีข้อมูลต่างๆ ของที่ใส่ลงไปแสดงไว้อยู่ ซึ่งเราสามารถเปลี่ยนแปลงใหม่ได้ตามต้องการ

ขั้นตอนที่ 10. ถ้าหากลองกดปุ่ม 'รับโค้ด' ที่เมนูทางซ้ายมือ จะพบโค้ดของเครื่องมือค้นหาอันนี้แสดงอยู่

ซึ่งในตอนนี้ถ้านำโค้ดไปใช้เลยก็จะได้เครื่องมือค้นหาเป็นแบบ 'Search Element' ที่ผลการค้นหาจะปรากฎออกมาในหน้าบล็อกหน้านั้นเลยตามแบบภาพข้างล่างนี้

ภาพตัวอย่างผลการค้นหาแบบ 'Search Element'

แต่อาจมีบางคนที่ชอบเครื่องมือค้นหาแบบ 'หน้าเว็บที่โฮสต์โดย Google' ซึ่งจะแสดงผลการค้นหาเหมือนในภาพข้างล่างนี้มากกว่า โดยเราสามารถเปลี่ยนวิธีแสดงผลการค้นหาได้ตามวิธีในขั้นตอนต่อจากนี้ (ส่วนคนที่ชอบแบบแสดงผลในหน้านั้นเลยก็ให้ข้ามขั้นตอนที่ 11-14 ไป)

ภาพตัวอย่างผลการค้นหาแบบ 'หน้าเว็บที่โฮสต์โดย Google'

วิธีเปลี่ยนรูปลักษณ์และความรู้สึกของ Google Custom Search

ขั้นตอนที่ 11. เลือก 'รูปลักษณ์และความรู้สึก' ในเมนูข้่างซ้ายมือ

ขั้นตอนที่ 12. เปลี่ยนตัวเลือกการโฮสต์จาก 'Search Element' ให้กลายเป็น 'หน้าเว็บที่โฮสต์โดย Google'

ขั้นตอนที่ 13. จากนั้นกดที่ปุ่ม 'บันทึก'

ขั้นตอนที่ 14. หลังจากนั้นก็ให้กดเลือกที่ 'รับโค้ด' ทางซ้ายมืออีกครั้งจะพบว่าโค้ดในกรอบสี่เหลี่ยมจะเปลี่ยนไป โดยถ้าสั่งคัดลอกโค้ดในกรอบนี้ไปวางใส่ลงเว็บไซต์หรือบล็อกของเราก็จะมีช่องค้นหาปรากฎออกมา

ตัวอย่างการติดตั้ง Google Custom Search ใส่ลงในบล็อกของ Blogger

ขั้นตอนที่ 15. การเอาโค้ดที่ได้มาไปใส่ลงบล็อกเริ่มโดยให้คัดลอกโค้ดในขั้นตอนที่ 14 มาจากนั้นเข้าไปที่เมนูของบล็อกแล้วเลือกที่
การออกแบบ > องค์ประกอบของหน้า > เพิ่ม Gadget > HTML/จาวาสคริปต์

อธิบายเพิ่มเติม
อาจสงสัยว่าในเมื่อ Blogspot มันมีตัวเลือก 'Gadget ช่องค้นหา' เหมือนในรูปข้างล่างนี้ไว้ให้ใช้อยู่แล้ว แต่ทำไมต้องไปเอาโค้ดสร้าง Google Custom Search มาใส่อีก

นั่นก็เป็นเพราะว่า ในขณะนี้ 'Gadget ช่องค้นหา' ที่มีไว้ให้เลือกนั้นยังไม่สามารถตั้งค่าให้แสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' และนอกจากยังไม่มีการตั้งค่าจัดรูปแบบ URL ที่ถูกครอบคลุมในผลการค้นหา

ขั้นตอนที่ 16. วางโค้ดที่คัดลอกมาลงใส่ในช่องที่ปรากฎ

ขั้นตอนที่ 17. ตั้งชื่อ 'หัวข้อ' ของ Gadget นี้ (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 18. กดที่ 'บันทึก' ก็เสร็จแล้ว หลังจากนั้นถ้าลองเข้าไปที่หน้าแรกของบล็อกก็จะเห็นเครื่องมือค้นหาแสดงไว้อยู่ โดยถ้าลองค้นหาดูก็จะได้ผลแบบภาพด้านล่างนี้

อธิบายเพิ่มเติม
ถ้ารู้สึกว่าขนาดช่องค้นหาที่แสดงอยู่ในบล็อกมันสั้นหรือยาวมากไป ก็สามารถปรับขนาดได้ง่ายๆ ด้วยการแก้ไขตัวเลขโค้ดจากขั้นตอนที่ 16 ในบรรทัดที่ 6 ซึ่งได้เขียนเอาไว้ว่า
<input type="text" name="q" size="31" />
โดยถ้าอยากให้ช่องสำหรับใส่คำค้นหามันสั้นลงก็ลดเลขให้น้อยกว่า 31 แต่ถ้าอยากให้ยาวขึ้นก็เพิ่มเลขให้มากกว่า 31 ดังที่แสดงในตัวอย่างตามภาพด้านล่างนี้

Blogger: ขีดเส้นใต้แบ่งเนื้อหาบทความ

2010-07-18T11:28:00.005+07:00

ในการจัดวางเนื้อหาบทความจะสามารถใช้วิธีขีดเส้นใต้ (Horizontal Line) เพื่อช่วยในการจัดแบ่งข้อความออกเป็นส่วนๆ ได้โดยนำ <hr /> ไปวางไว้ในช่อง 'แก้ไข HTML' ของเนื้อหาบทความ ซึ่งจะให้ผลเหมือนดังตัวอย่างด้านล่างนี้

ตัวอย่างเส้น Horizontal Line ที่สร้างขึ้นจาก <hr />

Blogger: วิธีห้ามไม่ให้ผู้ชมบล็อกคลิกขวาในบล็อก

2010-04-04T16:08:00.013+07:00

การห้ามไม่ให้ผู้อ่านสามารถคลิกขวาในบล็อก (disable right click in blogger or any webpage) ทำได้ดังนี้
ขั้นตอนที่ 1. เข้าสู่บล็อกแล้วเลือกที่ การออกแบบ > องค์ประกอบของหน้า

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ HTML/จาวาสคริปต์

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง และกดบันทึกก็เสร็จแล้ว
<SCRIPT language=JavaScript>

var message = "function disabled";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>

จากนั้นเมื่อลองคลิกขวาบนหน้าบล็อกจะพบคำว่า function disabled แสดงออกมา ซึ่งสามารถเปลี่ยนเป็นคำเตือนแบบอื่นก็ได้ โดยไปแก้ไขโค้ดในบรรทัดที่ 3 ด้วยการแทนที่คำว่า function disabled ให้เป็นคำอื่นตามต้องก่าร

Credit: http://www.bloggertricks.com/2007/12/how-to-disable-right-click-in.html

เลือกดาวน์โหลดฟรีแวร์เวอชั่นใหม่ได้ที่ Filehippo.com

2010-07-02T10:43:00.015+07:00

เวลาที่จะโหลดโปรแกรมฟรีแวร์ (Freeware) มาใช้หลายๆ ตัว หรือต้องการเช็คว่าตอนนี้มันอัพเดทไปถึงเวอชั่นไหนแล้ว ถ้าจะต้องเข้าไปดาวน์โหลดจากเว็บของผู้พัฒนาทีละแห่งก็คงเสียเวลามาก แต่หากลองเข้าไปที่ http://www.filehippo.com/ จะพบว่ามีโปรแกรมฟรีแวร์จัดแสดงเป็นรายการตามแต่ละประเภท ไว้ให้เราเลือกดาวน์โหลดอยู่มากมายโดยจะมีการอัพเดทให้เป็นเวอชั่นใหม่อยู่เสมอ ซึ่งสามารถเข้าใช้บริการได้ทันทีและโหลดฟรีไม่ต้องเสียค่าใช้จ่าย

ตัวอย่างการดาวน์โหลด
ขั้นตอนที่ 1. กดเลือกชื่อโปรแกรมที่ต้องการ (แต่ถ้าไม่เจอก็ลองค้นหาในช่อง Search ที่ด้านบน)

ขั้นตอนที่ 2. กดที่ปุ่ม Download ที่อยู่ทางขวามือด้านบน เพื่อสั่งโหลดไฟล์นั้นลงในเครื่องเราก็เสร็จแล้ว

เพิ่มเติม
นอกจากนี้จะเห็นว่าทางด้านขวามือใต้ปุ่ม Download จะมีโปรแกรมตัวที่เรากำลังดูอยู่นั้นในเวอชั่นเก่าๆ จัดเรียงไว้ให้เลือกดาวน์โหลดอยู่ด้วย

PhotoScape: ทำภาพ Gif Animation แบบง่ายๆ

2009-11-05T00:46:00.029+07:00

ทุกคนคงเคยรู้จักวิธีทำภาพแบบ Gif อนิเมชั่น (Gif Animation) ด้วยการใช้ Photoshop และ ImageReady มาบ้างแล้ว แต่โปรแกรมฟรีแวร์อย่าง Photoscape (ดูลิงค์สำหรับดาวน์โหลดโปรแกรมได้ที่นี่) ก็สามารถใช้ทำอนิเมชั่นได้ง่ายๆ เช่นกัน ลองทำตามผมดูครับ

ขั้นตอนที่ 1. เตรียมรูปสำหรับทำเป็นภาพอนิเมชั่น ในตัวอย่างนี้ผมใช้ภาพกังหันลมกำลังหมุน 4 จังหวะ โดยเอามาจากเกมส์ Shop In Bottle ซึ่งเป็นเกมส์ออนไลน์ที่ทำโดยคนไทยครับ ลองใช้ภาพเหล่านี้ทำตามกันเลย

ขั้นตอนที่ 2. เปิดโปรแแกรม Photoscape ขึ้นมา แล้วเลือกไอคอน AniGif

ขั้นตอนที่ 3. ย่อหน้าต่างโฟลเดอร์ที่เก็บรูปกังหันลมเอาไว้ แล้วลากรูปที่อยู่ในโฟลเดอร์นั้นโยนลงในช่องว่างสีขาวด้านบนของโปรแกรม Photoscape (ถ้าไม่ต้องการใช้วิธีลากรูปมาโยนใส่ก็อาจใช้วิธีเลือกทีปุ่ม Add ซึ่งอยู่บริเวณขวามือด้านบนก็ได้)

ขั้นตอนที่ 4. ถ้าไม่ชอบค่ารายละเอียดของอนิเมชั่นที่โปรแกรม Photoscape ตั้งมาให้ ก็สามารถปรับแต่งได้เองตามต้องการ ซึ่งในตัวอย่างนี้ผมปรับค่าของ Change time เป็น 0.5 และตั้งค่า Background Color เป็น สีขาว โดยความหมายของค่าต่างๆ มีดังนี้

Change time : ควบคุมเวลาการแสดงภาพอนิเมชั่นทั้งหมดทุกภาพให้เร็วขึ้นหรือช้าลง แต่ถ้าต้องการให้บางภาพมีความเร็วในการเล่นที่เร็วหรือช้ากว่าภาพอื่นๆ ก็ทำได้ด้วยการเลือกที่ปุ่มเล็กๆ ที่พบอยู่ใต้ภาพแต่ละอัน ซึ่งจะมีลักษณะเป็นเครื่องหมายแบบด้านล่างนี้ จากนั้นให้เลือกที่คำสั่ง "change display time" บนเมนูที่ปรากฎออกมา

Change effect : เลือกรูปแบบในการเปลี่ยนภาพจากภาพหนึ่งไปสู่ภาพที่อยู่ถัดมา
Resize Ratio : ปรับขนาดของชิ้นงานอนิเมชั่นโดยยังคงรักษาอัตราส่วนของภาพเดิมไว้
Background Color : เปลี่ยนสีฉากหลังของอนิเมชั่น

ขั้นตอนที่ 5. ให้ลองดูผลงานอนิเมชั่นที่ทำไว้ในจอขนาดใหญ่ทางด้านล่าง โดยถ้าคิดว่าใช้ได้แล้วก็ให้เลือก Save เป็นภาพ Gif เอาไว้ใช้ได้เลย

ขั้นตอนที่ 6. เมื่อทำเสร็จแล้วจะได้อนิเมชั่นลักษณะดังนี้

Blogger: สร้างหน้าเว็บอิสระไว้ในบล็อก

2010-03-10T19:30:00.004+07:00

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

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

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

ขั้นตอนที่ 3. โดยเมื่อสร้างหน้าเว็บเสร็จแล้วค่อยสร้างลิงก์สำหรับเชื่อมโยงเข้าในแต่ละหน้าด้วยตนเอง แต่ถ้าชอบแบบวิธีที่สะดวกหน่อยก็ให้ไปเลือกที่ เพิ่มแกดเจ็ตรายการหน้าเว็บ ซึ่งจะเป็นการสร้าง Gadget เพิ่มขึ้นไว้ใช้งานที่องค์ประกอบของหน้าโดย Gadget นี้จะมีการสร้างลิงก์ตามหน้าเว็บที่สร้างเพิ่มขึ้นโดยอัติโนมัติ

ขั้นตอนที่ 4. โดยเมื่อสร้างหน้าเว็บเสร็จแล้วก็สามารถแก้ไขหรือสร้างหน้าเว็บเพิ่มขึ้นอีกได้โดยเข้าไปที่ การส่งบทความ > แก้ไขหน้าเว็บ ซึ่งจะมีรายการหน้าเว็บของบล็อกแสดงไว้อยู่

Blogger: ส่งออกและนำเข้าบทความระหว่างบล็อก

2010-06-16T13:27:00.016+07:00

การส่งออกบทความ Blogger จะเป็นการคัดลอกสำเนาบทความทั้งหมดรวมถึงความคิดเห็นที่มีอยู่ในบล็อกอันเก่า ไปใส่ลงบล็อกใหม่ ซึ่งบทความที่ถูกส่งออกไปก็จะยังอยู่ในบล็อกเก่าต่อไปเหมือนเดิมจนกว่าคุณจะสั่งลบมันทิ้ง ซึ่งเหมาะมากสำหรับเวลาที่ต้องการย้ายบล็อก โดยมีขั้นตอนดังนี้ (ขั้นตอนที่ 1-3 จะเป็นการส่งออก ส่วนขั้นตอน 4-8 จะเป็นการนำเข้า)

ขั้นตอนที่ 1. ในบล็อกอันเก่า (Old Blog) ให้เลือกที่ การตั้งค่า > ขั้นต้น

ขั้นตอนที่ 2. ในหัวข้อ "เครื่องมือเขียนบล็อก" ให้เลือกที่ "ส่งออกบล็อก"

ขั้นตอนที่ 3. เลือก "ดาวน์โหลดบล็อก" ก็จะทำให้บทความในบล็อกเก่านี้ถูกส่งออกมาเป็นไฟล์ชนิด XML Document โดยให้ "Save" ไฟล์นี้ลงไปในเครื่องของเรา

ขั้นตอนที่ 4. ไปที่บล็อกใหม่ (New Blog) แล้วเลือก การตั้งค่า > ขั้นต้น โดยในครั้งนี้ให้เลือกที่ "นำเข้าบล็อก"

ขั้นตอนที่ 5. กดที่ "เลือกไฟล์" โดยให้ไปเลือกไฟล์ XML Document ที่ถูกเก็บไว้ในเครื่องแล้วกดที่ "open"

ขั้นตอนที่ 6. พิมพ์อักขระที่คุณเห็นในภาพด้านล่าง

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

ขั้นตอนที่ 8. กดที่ "นำเข้าบล็อก" ก็เสร็จแล้ว

อธิบายเพิ่มเติม
ในขั้นตอนที่ 7 ถ้าหากว่าไม่เลือกที่ "เผยแพร่บทความที่นำเข้าทั้งหมดโดยอัตโนมัติ" จะทำให้บทความที่นำเข้ามานั้นถูกส่งไปอยู่ที่ การส่งบทความ > แก้ไขบทความ > นำเข้าแล้ว ดังภาพด้านล่างครับ

Blogger: เริ่มต้นสร้างบล็อก

2009-11-01T12:30:00.006+07:00

การสร้างบล็อกของ Blogger ทำได้ง่ายและฟรี ซึ่งถ้าเป็นผู้ใช้ Gmail ก็สามารถสร้างได้ทันที นอกจากนี้ Blogger ยังสามารถเชื่อมต่อกับบริการอื่นของ Google ได้อย่างสะดวกสบาย

ขั้นตอนที่ 1. เข้าไปที่ https://www.blogger.com/start แล้วใส่ชื่อบัญชีผู้ใช้และรหัส Gmail ของคุณลงไปจากนั้นกดที่ 'ลงชื่อเข้าใช้งาน'

ขั้นตอนที่ 2. ใส่ชื่อผู้เขียนบล็อกที่คุณต้องการแสดงให้ผู้อ่านเห็น แล้วเลือกที่ 'ดำเนินการต่อ'

ขั้นตอนที่ 3. ตั้งชื่อเว็บบล็อก และใส่ที่อยู่บล็อก (URL) จากนั้นเลือกที่ 'ดำเนินการต่อ'

ขั้นตอนที่ 4. เลือกแม่แบบหรือหน้าตาของบล็อกจากเมนู โดยสามารถเปลี่ยนหน้าตาใหม่ในภายหลังได้ แล้วก็เลือก 'ดำเนินการต่อ'

ขั้นตอนที่ 5. เลือก 'เริ่มต้นการเขียนบล็อก'

ขั้นตอนที่ 6. ตอนนี้บล็อกของคุณได้สร้างขึ้นมาเสร็จแล้ว โดยในตอนนี้ระบบมันจะนำคุณไปสู่เมนู 'บทความใหม่' เพื่อให้คุณเขียนบทความแรกที่ต้องการโพสต์ในบล็อกลงไป แต่ถ้ายังไม่ต้องการเขียนบทความในตอนนี้ก็ให้กดเลือกที่ 'ดูบล็อก' เพื่อชมหน้าตาของบล็อกที่สร้างมาแล้วได้เลย

ขั้นตอนที่ 7. นอกจากนี้ยังสามารถดูรายการบล็อกทั้งหมดที่คุณสร้างไว้หรือเป็นผู้ร่วมเขียนได้โดยไปสู่แผงควบคุมบล็อกที่ http://www.blogger.com/home

Photoshop: อักษรลำแสง (Beam Text)

2010-06-26T16:07:00.011+07:00

ขั้นตอนที่ 1. สร้างไฟล์ Photoshop ขนาดเท่าไรก็ได้ ซึ่งตัวอย่างนี้ใช้พื้นที่ขนาด 300x300 แล้วเทพื้นหลังให้เป็นสีดำ

ขั้นตอนที่ 2. พิมพ์ตัวอักษรสีขาวลงไป โดยในตัวอย่างใช้อักษร Georgia ในแบบ Italic ขนาด 60pt

ขั้นตอนที่ 3. สร้างเลเยอร์เพิ่มขึ้นใหม่วางไว้ที่ด้านบนสุดจำนวน 6 เลเยอร์ โดยให้ตั้งชื่อว่า Layer 1,2,3,...,6 ตามลำดับดังรูป

ขั้นตอนที่ 4. ไปที่ Layer 1 แล้วให้กด Load Selection ของเลเยอร์ตัวอักษร (กดปุ่ม <Ctrl> พร้อมเลือกที่เลเยอร์ตัวอักษร) จากนั้นให้เทสี #ff0000 (R=255 G=0 B=0) ลงไป ก็จะได้ตัวอักษรสีแดงดังรูป

ขั้นตอนที่ 5. เลือกอีก 5 เลเยอร์ที่ได้ถูกสร้างไว้จากนั้นให้เทสีด้วยวิธี Load Selection แบบเดียวกับขั้นตอนที่ 4 แต่จะแตกต่างกันก็ตรงสีที่ใส่ลงใน Selection ของแต่ละเลเยอร์ดังนี้
Layer 1: #ff0000 (R=255 G=0 B=0) สีแดง
Layer 2: #f26522 (R=242 G=101 B=34) สีส้มเข้ม
Layer 3: #f7941d (R=247 G=148 B=29) สีส้ม
Layer 4: #ffc87d (R=255 G=200 B=125) สีส้มอ่อน
Layer 5: #ffff00 (R=255 G=255 B=0) สีเหลือง
Layer 6: #ffffff (R=255 G=255 B=255) สีขาว

โดยหลังจากที่ใส่สีลงในแต่ละเลเยอร์เสร็จแล้ว ก็ให้กด <Ctrl+D> เพื่อสั่ง Deselect

ขั้นตอนที่ 6. ให้ใส่ Filter ในแต่ละเลเยอร์ดังนี้
ไปที่ Layer 1: เลือก Filter > Blur > Motion Blur... โดยตั้งค่า Angle: 0 ,Distance: 999

ไปที่ Layer 2: เลือก Filter > Blur > Motion Blur... โดยตั้งค่า Angle: 0 ,Distance: 400
ไปที่ Layer 3: เลือก Filter > Blur > Motion Blur... โดยตั้งค่า Angle: 0 ,Distance: 250
ไปที่ Layer 4: เลือก Filter > Blur > Gaussian Blur... โดยตั้งค่า Radius: 8
ไปที่ Layer 5: เลือก Filter > Blur > Gaussian Blur... โดยตั้งค่า Radius: 14
ไปที่ Layer 6: เลือก Filter > Blur > Gaussian Blur... โดยตั้งค่า Radius: 5

ขั้นตอนที่ 7. ย้ายตำแหน่งเลเยอร์ตัวอักษรขึ้นไปไว้ด้านบนสุด

ขั้นตอนที่ 8. ไปที่เลเยอร์ตัวอักษรซึ่งอยู่ด้านบนสุดจากนั้นให้เลือก Layer > New Adjustment Layer > Hue/Saturation แล้วกดปุ่ม OK

ขั้นตอนที่ 9. จะพบว่ามีเมนูปรากฎออกมาให้เลือกปรับสีได้ตามต้องการโดยในตัวอย่างนี้ได้เปลี่ยนให้ค่า Hue: -100 จากนั้นก็กดปุ่ม OK ก็เสร็จแล้ว

ขั้นตอนที่ 10. โดยถ้าต้องการเปลี่ยนสีของลำแสงก็ทำได้ง่ายๆ ด้วยการไปกดดับเบิ้ลคลิกที่ Layer Thumbnail ของ Adjustment Layer ที่ถูกสร้างขึ้นในขั้นตอนที่ 8 ก็จะพบว่ามีเมนู Hue/Saturation โผล่มาให้แก้ไขอีกครั้ง ซึ่งถ้าหากลองปรับค่า Hue ให้เปลี่ยนแปลงไปก็จะได้ลำแสงที่มีสีแตกต่างกันดังภาพด้านล่าง ซึ่งภาพในตัวอย่างเกิดจากการตั้งค่า Hue ดังนี้
สีน้ำเงิน > Hue: +180
สีเขียว > Hue: +70
สีม่วง > Hue: -100
สีแดง > Hue: -45

Photoshop: อักษรนูนด้วยการขยับเลเยอร์ (Pixel Bevel Text)

2010-05-07T13:10:00.010+07:00

ขั้นตอนที่ 1. สร้างไฟล์ Photoshop ขึ้นมาขนาดเท่าไรก็ได้ โดยในตัวอย่างนี้ใช้ขนาด 200x200 เทพื้นหลังเป็นสีเทา (4a4a4a) แล้วพิมพ์ตัวอักษรลงไป

ขั้นตอนที่ 2. คัดลอกเลเยอร์ตัวอักษรที่ทำไว้เพิ่มอีก 2 เลเยอร์ จากนั้นใส่สีของตัวอักษรในแต่ละเลเยอร์ดังนี้

เลเยอร์ตัวอักษรด้านบนสุด : สีเทาปานกลาง (828282)
เลเยอร์ตัวอักษรตรงกลาง : สีเทาอ่อน (bababa)
เลเยอร์ตัวอักษรด้านหลัง : สีเทาเข้ม (222222)

ขั้นตอนที่ 3. ขยับตำแหน่งเลเยอร์ตัวอักษรดังนี้

เลเยอร์ตัวอักษรด้านบนสุด : ปล่อยไว้เฉยๆ ไม่ต้องขยับย้ายตำแหน่ง
เลเยอร์ตัวอักษรตรงกลาง : ขยับเลื่อนไปทางด้านซ้ายและด้านบนเล็กน้อย
เลเยอร์ตัวอักษรด้านหลัง : ขยับเลื่อนไปทางด้านขวาและด้านล่างเล็กน้อย

ขั้นตอนที่ 4. ลองดูผลที่ได้

Credit: http://www.voidix.com/pixeltext.html

Excel: สลับเปลี่ยนคอลัมน์กับแถว

2010-03-27T10:11:00.002+07:00

วิธีสลับเปลี่ยนการจัดเรียงข้อมูลในคอลัมน์ (Column) กับแถว (Row) ของตาราง Excel ทำได้ดังนี้
ขั้นตอนที่ 1. เลือกเซลข้อมูลทั้งหมดที่ต้องการสลับเปลี่ยนการจัดเรียง แล้วคลิกขวาและเลือกที่คัดลอก

ขั้นตอนที่ 2. เลือกเซลช่องใหม่ที่ต้องการวางข้อมูลที่จัดเรียงใหม่ลงไป แล้วคลิกขวาและเลือกวางแบบพิเศษ

ขั้นตอนที่ 3. เมื่อเมนู "การวางแบบพิเศษ" แสดงออกมาให้เลือกในช่อง "สลับเปลี่ยนแถวกับคอลัมน์" แล้วกด "ตกลง"

ขั้นตอนที่ 4. จะเห็นว่าข้อมูลที่คัดลอกมาได้ถูกจัดเรียงใหม่ในตำแหน่งปลายทาง

Blogger: แสดงบทความย่อพร้อมภาพตัวอย่างแบบอัตโนมัติ

2009-11-03T13:11:00.006+07:00

การให้ Blogger แสดงบทความย่อพร้อมภาพตัวอย่าง (Automatic Read More With Thumbnail) จะช่วยให้ผู้อ่านบล็อคของคุณเห็นตัวอย่างบทความนั้นว่าน่าสนใจเพียงใด ก่อนตัดสินใจอ่านต่อได้ ซึ่งมีวิธีการดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่
รูปแบบ > แก้ไข HTML

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

ขั้นตอนที่ 3. คลิกเลือกที่ ขยายแม่แบบเครื่องมือ เพือเปิดโค้ดแบบเต็มออกมา (ห้ามลืมนะ)

ขั้นตอนที่ 4. กดคีย์บอร์ด Ctrl + F
เพื่อให้ฟังก์ชันช่องค้นหาคำของ Browser เปิดทำงาน ช่วยให้การค้นหาคำที่ต้องการในหน้าเว็บนั้นรวดเร็วยิ่งขึ้นโดยช่องนี้จะไปอยู่บริเวณไหนของหน้าจอขึ้นอยู่กับชนิด Browser ของคุณครับ

ขั้นตอนที่ 5. พิมพ์ </head> ลงในช่องที่ปรากฏขึ้นมาเพื่อค้นหา แล้วคัดลอกโค้ดที่อยู่ข้างล่างนี้ไปวางไว้ที่ด้านบนของโค้ด </head> ซึ่งค้นหาเจอ

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

ขั้นตอนที่ 6. เี่กี่ยวกับการแก้ไขโค้ดในขั้นตอนที่ 5 สำหรับผู้ที่ต้องการเปลี่ยนลักษณะของบทความย่อ

summary_noimg = 430; คือการตัดข้อความของบทความย่อที่ไม่มีภาพตัวอย่าง
summary_img = 340; คือการตัดข้อความของบทความย่อที่มีภาพตัวอย่างอยู่ด้วย
img_thumb_height = 100; คือความสูงของภาพตัวอย่าง
img_thumb_width = 120; คือความกว้างของภาพตัวอย่าง

ขั้นตอนที่ 7. ค้นหาโค้ด <data:post.body/> ด้วยวิธีเดิมแล้วแทนที่ตัวโค้ดที่หาเจอด้วย

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

ขั้นตอนที่ 8. เลือกที่ บันทึกแม่แบบ แล้วก็เป็นอันเสร็จ หลังจากนั้นก็ลองไปที่ ดูบล็อก เพื่อชมผลงานของคุณได้เลยครับ

Credits: http://www.anshuldudeja.com/2009/05/automatic-read-more-hack-for-blogger.html#comment-form

Blogger: แสดงเครื่องมือเฉพาะหน้าแรก หรือในหน้าที่ต้องการ

2010-03-27T14:55:00.009+07:00

ถ้าต้องการแสดงกล่องข้อความต้อนรับ เมนูลิงก์ รวมทั้งโฆษณา เฉพาะแค่ในหน้าแรกของ Blogger เพียงหน้าเดียว หรือการให้แสดงต่อเมื่อผู้อ่านเลือกเข้าไปที่บทความเท่านั้น (Show the Blogger widgets on your blogspot blog Homepage Only or Post Page Only) สามารถทำได้ตามบทความนี้ซึ่งจะอธิบายวิธีแก้ไข 3 แบบคือ

วิธีทำให้เครื่องมือแสดงแค่ในหน้าแรกของ Blogger เพียงหน้าเดียวเท่านั้น
วิธีทำให้เครื่องมือแสดงต่อเมื่อเลือกเข้าไปที่บทความแต่ไม่แสดงในหน้าแรก
วิธีทำให้เครื่องมือแสดงอยู่เฉพาะในลิงก์ URL ใดๆ ใน Bloggger

วิธีทำให้เครื่องมือ (Gadget) แสดงแค่ในหน้าแรกของ Blogger เพียงหน้าเดียวเท่านั้น
HOMEPAGE Only widgets,links in Blogger

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่
รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ

ขั้นตอนที่ 2. แล้วให้สังเกตว่าเครื่องมือ (Gadget) จะขึ้นต้นด้วยโค้ดแบบนี้
<b:widget id=
ตัวอย่างเช่น
เครื่องมือ 'ข้อความ' จะขึ้นต้นด้วย
<b:widget id='Text1' locked='false' title='your-widget-name' type='Text'>
เครื่องมือ 'ป้ายกำกับ' จะขึ้นต้นด้วย
<b:widget id='Label1' locked='false' title='your-widget-name' type='Label'>
เครื่องมือ 'HTML/จาวาสคริปต์' จะขึ้นต้นด้วย
<b:widget id='HTML1' locked='false' title='your-widget-name' type='HTML'>
เครื่องมือ 'รายชื่อลิงก์' จะขึ้นต้นด้วย
<b:widget id='LinkList1' locked='false' title='your-widget-name' type='LinkList'>

ภาพตัวอย่างของเครื่องมือ 'ข้อความ'

จากภาพจะเห็นว่า your-widget-name ภายในส่วนของ title='your-widget-name' ตามโค้ดตัวอย่างที่กล่าวมาด้านบนก็คือชื่อเฉพาะของเครื่องมืออันนั้นที่ถูกตั้งไว้ตามรูป โดยควรจะตั้งชื่อเป็นคำใดก็ได้ซึ่งไม่ซ้ำกับคำอื่นๆ ในโค้ด HTML เพื่อเวลาค้นหาด้วย Ctrl+F จะช่วยให้ระบุตำแหน่งของเครื่องมือนั้นได้ง่าย และเมื่อแก้ไขโค้ดเสร็จแล้วค่อยเข้าไปเปลี่ยนชื่อเครื่องมือตามที่ต้องการอีกทีหนึ่ง

ขั้นตอนที่ 3. จะพบว่าใต้บรรทัดของ <b:widget id= ที่กล่าวมาจะพบโค้ดลักษณะว่า <b:includable
โดยให้นำโค้ดสำหรับกำหนดการแสดงเครื่องมือคือ
<b:if cond='data:blog.url == data:blog.homepageUrl'>
ไปใส่ไว้ที่ใต้บรรทัด <b:includable อีกทีหนึ่ง

ขั้นตอนที่ 4. จากนั้นให้นำค้นหา </b:includable> ในส่วนท้ายของเครื่องมืออันนั้น แล้วแทนที่ด้วย
</b:if>
</b:includable>
โดยจะพบอยู่บนบรรทัดเหนือโค้ด </b:widget> ซึ่งเป็นโค้ดปิดท้ายของเครื่องมืออันนั้นอีกทีหนึ่ง

ดูตัวอย่างการแก้ไขโค้ดได้ดังนี้ (คลิกรูปเพื่อขยาย)

ขั้นตอนที่ 5. กดที่บันทึกแม่แบบก็เสร็จแล้ว

วิธีทำให้แสดงเครื่องมือ (Gadget) ก็ต่อเมื่อเลือกเข้าไปที่บทความแต่ไม่แสดงในหน้าแรก
Showing in only Post Pages (Permalink pages)

ให้ทำตามขั้นตอนเหมือนในวิธีแบบแรกแต่ให้เปลี่ยนจาก
<b:if cond='data:blog.url == data:blog.homepageUrl'>
ในขั้นตอนที่ 3 ของวิธีแรกให้เป็น
<b:if cond='data:blog.pageType == "item"'>

วิธีทำให้เครื่องมือ (Gadget) แสดงอยู่เฉพาะในลิงก์ URL ใดๆ ใน Bloggger
Showing Widgets on a Specific Blog Post url

เช่น ต้องการแสดงไว้คู่กับบทความใดๆเพียงอันเดียว หรือให้แสดงเมื่อมีการเลือกใช้ป้ายกำกับบทความป้ายใดป้ายหนึ่งเท่านั้น เป็นต้น
ให้ทำตามขั้นตอนเหมือนในวิธีแบบแรกแต่ให้เปลี่ยนจาก

<b:if cond='data:blog.url == data:blog.homepageUrl'>

ในขั้นตอนที่ 3 ของวิธีแรกให้เป็น

<b:if cond='data:blog.url == "BLOG-POST-URL"'>

โดยที่ BLOG-POST-URL ในโค้ดก็หมายถึง URL ของป้ายกำกับหรือของบทความที่คุณต้องการ

Credit : http://www.bloggertricks.com/2009/03/how-to-show-blogger-linkswidgets-in.html