How to Get iGoogle Gadget Code for Blogger

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

blogger สอนทำบล็อก วิธีสร้างบล็อก

วิธีรับโค้ด Gadget จาก iGoogle

ขั้นที่ 1 เข้าไปที่

http://www.google.com/ig/directory

สอนสร้าง blogger หรือ blogspot

แล้วเลือก Gadget ที่ต้องการ สมมติในตัวอย่างที่จะทำให้ดูนี้ผมเลือก Gadget ในหมู่กีฬาที่ชื่อว่า schedule and score world cup 2010
จากนั้นคลิกที่ชื่อของ Gadget

แต่ง blogger 


ขั้นที่ 2 เมื่อมาในหน้าของรายละเอียดของ Gadget ที่เลือก
ให้ดูที่ข้อความทางขวามือ แล้วคลิกที่ข้อความ รวม Gadget นี้
 
สร้าง blogger

หมายเหตุ
การเข้ามาที่หน้ารายละเอียดของ gadget อาจจะทำได้โดยคลิกจาก Gadget ที่ได้ติดตั้งใน iGoogle ของตัวเองก็ได้ (ดูรูป)

สอนทำ blogspot สอนสร้างบล็อก


ขั้นที่ 3 เมื่อคลิกที่ข้อความ รวม Gadget นี้ จากขั้นที่ 2 จะพบตัวอย่างและการปรับค่าต่าง ๆ ของ gadget
ในขั้นนี้ให้ปรับค่าตามใจชอบซึ่งคุณสามารถทดลองปรับจน และดูตัวอย่างจนเป็นที่พอใจแล้วคลิก รับรหัส

สอนแต่งบล็อก


ทำบล็อก



ขั้นที่ 4 โค้ดทีได้จะมีลักษณะดังนี้

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/104367414848329575347/Schedule-Score-Worldcup-2010.xml&amp;synd=open&amp;w=300&amp;h=500&amp;title=www.hackublog.com&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

คุณสามารถนำโค้ดนี้ไปติดตั้งใน Blogger โดยใช้ HTML/จาวาสคริปต์ Gadget หรือติดตั้งในบทความ ในหน้าเว็บ หรือใน Template ก็ได้


ขั้นที่ 5 ดัดแปลงโค้ด
สังเกตว่า Gadget จาก iGoogle จะมีโลโก้ติดมาด้วยดังตัวอย่างในรูปด้านล่าง

วิธีสร้าง blogger    

ผมได้ทดลองปรับแต่งโค้ดใหม่โดยใช้โค้ดแบบ iframe ซึ่งผลที่ได้จะทำให้ Gadget ยังทำงานได้ปกติ แต่โลโก้ของ google จะหายไป

วิธีปรับแต่งโค้ด
สมมติว่าโค้ดที่ได้ในขั้นที่ 4 เป็น
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/104367414848329575347/Schedule-Score-Worldcup-2010.xml&amp;synd=open&amp;w=300&amp;h=500&amp;title=www.hackublog.com&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
ให้คัดลอกสีชมพูมาแทนที่โค้ด *** ในโค้ดด้านล่าง
<iframe src="***" width="xxx" height="yyy" allowTransparency="true" frameborder="0" scrolling="no"></iframe>
ส่วนค่า width="xxx" height="yyy" ให้แก้เป็นค่าความกว้างและความสูงที่ต้องการซึ่งโค้ดที่ได้จะเป็น
<iframe src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/104367414848329575347/Schedule-Score-Worldcup-2010.xml" width="320" height="500" allowTransparency="true" frameborder="0" scrolling="no"></iframe>
และผลลัพธ์ที่ได้ก็เป็นดังนี้



จะเห็นว่าผลลัพธ์จากการใช้โค้ดแบบ iframe จะแตกต่างจากที่เราใช้โค้ดที่คัดลอกมาจาก iGoogle โดยตรง 
ชอบ Gadget ไหนก็ลองทำกันดูนะครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 1 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ลองดูนะครับ กับ บล็อกแนะนำแหล่งเที่ยวของจังหวัด
    <a href="http://nakhonsithammarat-sapaipae.blogspot.com/" title="นครศรีธรรมราช">นครศรีธรรมราช</a> นี่เลย

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel