/* <!--Substitution is not a singleton for tag [blog]-->OpalKup-Blogspot : อยากเขียนก็เขียน : ขิเกียจก็ไม่เขียน*/ Opalkup: เมษายน 2008

สร้างเครื่องมือใหม่ สำหรับให้บุคคลอื่นเพิ่มในการจัดหน้า

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

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










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

ส่วนสำคัญของฟอร์มมีดังต่อไปนี้:

form action="http://www.blogger.com/add-widget" - (จำเป็น) ฟอร์มของคุณต้องส่งข้อมูลไปยัง URL นี้เพื่อให้มีการจัดการอย่างเหมาะสมโดย Blogger เราขอแนะนำให้ใช้วิธี POST ในการส่ง แต่ GET ก็สามารถใช้ได้ ถ้าคุณไม่มีข้อมูลในเครื่องมือจำนวนมากเกินไป
widget.title - (เป็นตัวเลือก) ชื่อที่คุณระบุจะแสดงในแท็บองค์ประกอบของหน้าสำหรับผู้ใช้เมื่อผู้ใช้แก้ไขการจัดหน้า นอกจากนี้ยังจะปรากฏเป็นส่วนหนึ่งของแม่แบบเครื่องมือเริ่มต้น ชื่อนี้อาจมีความยาวได้ถึง 100 ตัวอักษร และสามารถมี HTML ที่มีรูปแบบถูกต้อง
widget.content - (จำเป็น) นี่คือเนื้อหาจริงของเครื่องมือ ซึ่งจะปรากฏบนบล็อกของผู้ใช้ สามารถรวมรหัสที่มีรูปแบบถูกต้องที่คุณต้องการ ยกเว้นแท็ก และ แต่โปรดทราบว่าคุณต้องมีการยกเว้นอักขระของรหัส ดังเช่นในตัวอย่าง (เช่น
จะกลายเป็น<a>)
widget.template - (เป็นตัวเลือก) ค่านี้ควรเป็นไปตาม คำแนะนำสำหรับแท็กของเครื่องมือ คุณสามารถใช้ แท็กข้อมูลที่ใช้ได้เป็นสากล ถ้าไม่ได้ระบุแม่แบบไว้ จะใช้ เป็นค่าเริ่มต้น
infoURL - (เป็นตัวเลือก) คุณสามารถใช้ค่านี้เพื่อระบุหน้าที่อยู่บนเว็บไซต์ ซึ่งอธิบายเครื่องมือของคุณ หรือให้ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือ และจะใช้เป็นลิงก์ "ข้อมูลเพิ่มเติม" บนหน้าการตั้งค่าที่บุคคลอื่นพบเห็นเมื่อเพิ่มเครื่องมือของคุณ
logoURL - (เป็นตัวเลือก) คุณสามารถเพิ่ม URL รูปภาพในที่นี้ และรูปภาพจะปรากฏถัดจากลิงก์ "ข้อมูลเพิ่มเติม" รูปภาพควรเป็นขนาดย่อ (กล่าวคือ เล็กกว่า 100x100 พิกเซล)
ขณะนี้เรามีข้อมูลพื้นฐานแล้ว ลองมาดูตัวอย่างที่น่าสนใจยิ่งขึ้น



<form method="post" action="http://www.blogger.com/add-widget">

<input type="hidden" name="infoUrl"

value="http://flickr.com"/>



<input type="hidden" name="logoUrl"

value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>



<input type="hidden" name="widget.title" value="Puppies!"/>



<textarea name="widget.content" style="display:none;">

&lt;/a&gt;&lt;div id='flickr_badge_wrapper'&gt;

&lt;script type='text/javascript'

src='http://www.flickr.com/badge_code_v2.gne?show_name=1&

count=3&display=latest&size=t&layout=x&source=all_tag&

tag=puppy'&gt;&lt;/script&gt;

&lt;span id='flickr_badge_source_txt'&gt;More

&lt;a href='http://www.flickr.com/photos/tags/puppy/'&gt;

Flickr photos tagged with puppy&lt;/a&gt;&lt;/span&gt;

&lt;br clear='all' /&gt;&lt;/div&gt;

</textarea>



<input type="hidden" name="widget.template"

value="&lt;data:content/&gt; />



<input type="submit" name="go" value="Add Puppy Photos"/>

</form>



ในกรณีนี้ เราไปที่
Flickr.com เพื่อเลือก ภาพถ่ายที่มีการติดแท็ก "puppy" จากนั้นเราใช้รูปภาพเพื่อทำป้ายของ Flickr เพื่อให้เราสามารถแสดงภาพถ่ายล่าสุดในคอลเลกชันบนบล็อกของเรา ตามปกติ เราจะนำรหัสของป้ายมาวางไว้ในเครื่องมือ HTML/จาวาสคริปต์ในบล็อกของเราเอง ซึ่งก็จะเสร็จสมบูรณ์ แต่เราได้ตัดสินใจช่วยเหลือบุคคลอื่นที่ต้องการทำเช่นนี้ ดังนั้น เราจึงได้นำรหัสของป้ายมาไว้ในส่วน widget.content ของฟอร์มนี้ และเพิ่มโลโก้และลิงก์ของ Flickr ขณะนี้ ใครๆ ก็สามารถใช้ฟอร์มนี้เพื่อเพิ่มรูปภาพลูกสุนัขในบล็อกของตนด้วยการคลิกปุ่มเท่านั้น
และนี่เป็นเพียงส่วนเล็กๆ เท่านั้น จากจุดนี้ คุณสามารถออกแบบอะไรก็ได้ที่คุณต้องการ ใช้ความสร้างสรรค์ของคุณเอง สนุกกับการทดลองใช้ และมาดูผลงานที่ได้กัน
ป.ล. ถ้าคุณต้องการปุ่มสวยๆ ที่จะใช้กับฟอร์มของคุณ ลองดูที่ข้อมูลต่อไปนี้:

วิธีใส่ Code ลงใน บล็อค

การสร้างกล่องข้อความที่จะแสดง Code ต่างๆ ให้ทำการเพิ่มโค้ดในตารางด้านล่าง ไว้ในส่วน [head]





เวลาจะใส่ Code ก็เข้าไปเขียนในส่วน "แก้ไข Html"









กำตัวหนังสือ ตัวแรกของประโยค





Background image -PHP

ไปเจอ code CSS มาครับ น่าสนใจมาก มีการใช้ไฟล์ php เป็น background



v.randomleft{
position:absolute;
left:0px;
top:0px;
overflow:visible;
height:100px;
width:100px;
background-image:url(http://webands.tehsheriff.org/bands/randomleft/rotate.php);
background-repeat:no-repeat;
background-position:0px 0px;
background-color:transparent;
margin:0;
padding:0;
color:#000;
font-family:helvetica,verdana,arial,tahoma,sans-serif;
z-index:10000;
border:0px none;
float:none;}

เปลี่ยนรูป header ของบล็อค

ล็อคอินเข้าสู่หน้าควบคุมบล็อค ..ไปที่ รูปแบบ (Template) -->องค์ประกอบของหน้า(Add a Page Element) แล้วเลือก "Html/javaScript" จากนั้นใส่ สคลิปด้านล่างลงไป


รูปจาก http://tips-for-new-bloggers.blogspot.com

Notes

  1. ใส่ URL ของรูปแบบเต็ม อย่าลืม "http://"

  2. ตัวอย่างด้านบนเรามีรูปภาพให้ 10 รูป ถ้าหากว่าต้องการเพียงแค่ 5 รูป จะต้อง banner[5] ถึง banner[9] และเปลี่ยนตัวเลขสีแดงเป็น 5 ด้วย

  • ส่วนอันล่างนี้เป็นการเปลี่ยนแบล็คกราว

รวมๆ css

ทำให้หน้าเวปรับภาษาไทยได้ ใส่ tag ด้านล่างไว้ในส่วน [head]

[meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ]


.table
{
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
filter:alpha(opacity=80);
}