Gadget (ของตกแต่งบล็อก) ตอนที่ 1 : flag counter หรือแสดงธงชาติของผู้เยี่ยมชมบล็อก

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

ไปที่เว็บไซต์ http://flagcounter.com/ จะเห็นหน้าเว็บไซต์ตามภาพข้างบน

เว็บนี้ใช้งานง่าย ไม่ยุ่งยากซับซ้อน มีไม่กี่หน้า หน้าหลักจะโชว์ตัวอย่างหลักของการแสดงธงชาติ ตามภาพข้างบน มีทั้งหมด 6 ส่วน ดังนี้ครับ
  1. Maximum Flag to Show : เป็นการแสดงจำนวนธงชาติ ปกติโชว์แค่ 12 ธงชาติ เลือกได้สูงสุด 200 และ "all" ธงชาติ
  2. Columns of Flags : เป็นการแสดงแถวของธงชาติพร้อมข้อมูล ปกติจะโชว์ 2 แถว เลือกได้สูงสุดถึง 8 แถว
  3. Lebel on Tops of Counter : มีให้เลือก Viewers, Visitors และ Custom (เมื่อติ๊กเลือก จะขึ้นกรอบช่องว่างให้เติมข้อความ) แต่โดยปกติจะโชว์ Viewers ไว้ก่อน
  4. Show Country Labels : คือการแสดงตัวอักษรย่อประเทศ เมื่ออติ๊กถูกในช่องสี่เหลี่ยม ซึ่งจะช่วยทำให้เราเดาได้ว่าเป็นประเทศอะไร
  5. Show Pageview Count : คือการแสดงจำนวนรวมของการคลิกดูหน้าต่างๆ ในบล็อกของเรา หรือ pageview แต่ต้องติ๊กถูกในช่องสี่เหลี่ยมเล็กๆ
  6. Colors : เป็นการเลือกสี ของพื้นที่ธงชาติ 3 ส่วน คือ Background Color (สีพื้นที่ด้านหลัง ซึ่งปกติจะเป็นสีขาว), Text Color (สีตัวอักษร ซึ่งปกติจะเป็นสีดำ) และ Border Color (สีกรอบ ซึ่งปกติจะเป็นสีเทา) สามารถเลือกสีที่ชอบ หรือต้องการเปลี่ยนที่เมนูด้านหลังที่มีคำว่า "choose"

ภาพตัวอย่างข้างบน ผมได้มีการเปลี่ยนแปลงข้อกำหนดต่าง ดังนี้
  1. แสดง 70 ธงชาติ
  2. แสงดง 3 แถว
  3. ผมไม่เปลี่ยน ให้แสดงหัวข้อ Visitors เหมือนเดิม
  4. ผมติ๊กถูก ให้แสดงอักษรย่อของประเทศ
  5. ผมติ๊กถูก ให้แสดง จำนวนของ pageviews
  6. ผมไม่แก้ไขสีใดๆ จึงเป็น ตวอักษรสีดำ พื้นขาว กรอบสีเทาครับ

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






เมื่อเลือกข้อกำหนดการแสดงธงชาติทุกอย่างครบแล้ว ให้กดที่ปุ่มแสดงโค้ด หรือ "get my flag counter" ตามตัวอย่างในภาพข้างบน


ก็จะเห็นหน้าเว็บไซต์ตามนี้เลยนะครับ

ดูที่หัวข้อ "Code for websites" จะเห็น HTML โค้ด ก็ให้คลิ๊กขวาที่เม้าส์ แล้วเลือก copy เพื่อจะนำโค้ดนี้ไปวางใน หน้าต่าง "ตั้งค่า HTML/ JavaScript" เพื่อแสดงที่แถบด้านข้าง (Side Bar)

ไปที่หน้าเว็บการจัดการ "รูปแบบ" กด "เพิ่มองค์ประกอบหน้า หรือ เพิ่ม Gadget" เมื่อเห็นหน้าต่าง "เพิ่ม Gadget" เลือกแบนเนอร์ องค์ประกอบ "HTML/ จาวาสคริปต์"


เมื่อเห็นหน้าต่าง "ตั้งค่า HTML/ JavaScript" ก็นำโค้ดที่ได้ copy ไว้มาวางในพื้นที่เนื้อหานะครับ ส่วนหัวข้อก็แล้วแต่เพื่อนๆ อยากจะใส่ลงไปไหม สำหรับผม "ไม่ใส่" เพราะว่าโดยสาวนใหญ่ผู้อ่านน่าจะเข้าใจครับ


ผมนำภาพตัวอย่างของ Gadget หรือ ของตกแต่งบล็อก ที่เป็นธงชาติของแต่ละประเทศ ที่เข้ามาเยี่ยมชมบล็อกของเรา ที่ผมติดตั้งไว้ที่บล็อก http://alittleofknowledge.blogspot.com/ ไหนๆ ก็ได้มาใช้ gadget ของ http://flagcounter.com/ ก็อยากให้ไปลองอ่านถึงข้อดีของเว็บไซต์นี้ได้ที่ลิงก์นี้เลยนะครับ (กำลังเขียนบทความอยู่นะครับ) แล้วในบทความต่อไป ตามอ่าน Gadget ตัวอื่นที่จะนำมาแนะนำด้วยนะครับ

22 ความคิดเห็น:

  1. ขอบคุณมากมายเลย ครับ บทความมีประโยชน์อย่างมากเลยครับ

    ถ้าจำไม่ผิด ผมเคยเห็นพี่ให้สัมภาษณ์ในรายการทีวี เมื่อไม่นานมานี้ใช่ไหมครับ ช่องอะไรจำไม่ได้แล้ว

    เป็นกำลังใจให้นะครับ

    ตอบลบ
  2. ไม่ระบุชื่อ7 สิงหาคม 2552 00:31

    ความคิดเห็นนี้ถูกผู้เขียนลบ

    ตอบลบ
  3. ว้าว ช่วยได้เยอะเลยคะ

    ตอบลบ
  4. ขอบคุณมากๆเลยคะ

    ตอบลบ
  5. เป็นประโยชน์มากเลยค่ะ ขอบคุณน่ะค่ะ

    ตอบลบ
  6. ขอบคุณค่ะ thk a lot ,cheer!

    ตอบลบ
  7. ไม่ระบุชื่อ10 สิงหาคม 2554 13:19

    ขอบคุณมากมาย เป็นประโยชน์มากสำหรับผู้หัดทำบล็อกมือใหม่

    บุญรักษาค่ะ
    จุฑาพร แฮมมาร์

    ตอบลบ
  8. ไม่ระบุชื่อ24 กันยายน 2554 22:36

    ddddddddd

    ตอบลบ
  9. ขอบคุณมากๆค่ะ ขอลองเอาไปใช้กับ blog ตัวเองด้วยนะคะ ^_^

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

    ตอบลบ
  11. อ่านๆๆๆ ศึกษาๆๆๆ ลงมือทำเป็นประจำ สิ่งดีๆ จะตามมาเองครับ

    ขอบคุณครับ
    ปรีดา

    ตอบลบ
  12. พออ่านเสร็จก็ลงมือทำเลยคับ ขอบคุณคับ

    ตอบลบ
  13. เจ๋งมากเลยครับ ขอบคุณมากครับ

    ตอบลบ
  14. ขอบคุณมากค่ะ
    เอาไปทำแล้วง่ายมากๆ

    ตอบลบ
  15. จุ๊ปๆๆๆแถม Like อีก หนึ่งพัน ครั้ง

    ตอบลบ
  16. thx คะ มีประโยชน์มากๆเลย

    ตอบลบ
  17. ไม่ระบุชื่อ26 สิงหาคม 2556 19:18

    มีประโยชน์มากเลยค่ะ พอดีกะลังจะเริ่มๆ

    ตอบลบ
  18. ขอบคุณนะคะ ที่นำมาแบ่งปัน ^_^

    ตอบลบ
  19. โอ..สุดยอดดด
    ขอบคุณมากๆเลยครับสำหรับความรู้นี้

    ตอบลบ

Follow me on Twitter
Visit me on Facebook

บทความที่ได้รับความนิยม 10 อันดับแรก