ชีวิต Twitter ของคุณเป็นแบบนี้หรือไม่
posted on 18 Oct 2009 09:01 by itshee in Twitter
Tags: life cycle, twitter, ทวิตเตอร์, วงจรชีวิต67 Comments
จัดตำแหน่ง fixed ด้วย CSS
posted on 25 Jul 2009 22:03 by itshee in Twittercss ในปัจจุบันนั้นเรียกได้ว่าเป็นมาตรฐานในการสร้างเว็บไซต์เลยทีเดียว ซึ่งจะเห็นได้ว่าเว็บไซต์รุ่นใหม่เกือบทั้งหมดใช้ css ในการจัดรูปแบบ
ในการจัดตำแหน่ง fixed นั้น ปกติแล้วจะไม่ค่อยใช้กันเท่าไรนัก เนื่องจากตามธรรมชาติของเว็บไซต์ ที่มักจะเป็นหน้ายาวๆ ซึ่งการวางตำแหน่งสิ่งต่างๆ มักจะปล่อยให้วางไหลไปตามความยาวของหน้า แต่บางครั้งเราอาจต้องการให้ ปุ่ม แบนเนอร์ หรือป้าย ที่ต้องการอยู่ตำแหน่งเดิมตลอด ไม่ว่าคนใช้งานจะเลื่อนหน้าไปทางไหน ซึ่งสามารถทำได้ผ่าน position: fixed และระบุระยะที่ต้องการ เช่น
- position:fixed; top: 10px; อันนี้จะวาง fixed ไว้ห่างจากขอบบน 10 พิกเซล
- position:fixed; bottom: 20px; left: 30px; อันนี้จะวาง fixed ไว้ห่างจากขอบล่าง 20 พิกเซล แล้วถัดมาจากขอบซ้าย 30 พิกเซล
ค่าพวกนี้ปกติแล้วจะใส่ในไฟล์ css และเรียกใช้ผ่าน class หรือ id แต่ตัวอย่างนี้จะใส่ลงไปโดยตรง จากบล็อกวันก่อนเขียนเรื่อง ใส่ปุ่ม retweet ไว้ในบล็อก (บวกกับไอเดียจาก บล็อกคุณ Tonhor เรื่อง retweet) โดยว่าปุ่มนี้ควรจะอยู่ตำแหน่งล่างของหน้า เพื่อให้คนอ่าน อ่านจนจบแล้วกดปุ่ม retweet ได้ทันที แทนที่ว่าอ่านจบแล้วต้องย้อนกลับมาหาปุ่ม
จากหน้าเดิม ใส่โค้ดแค่ว่า
<script type="text/javascript" src="http://exteenscript.googlecode.com/files/retweet.js">
</script>
<a class="retweet vert self" href=""></a>
คราวนี้ใส่ css เพิ่มเพื่อจัดตำแหน่ง ให้วางซ้ายล่างห่างขอบล่าง 10 พิกเซล ห่างขอบซ้าย 10 พิกเซล
<div style="position:fixed;bottom:10px;left:10px;">
<script type="text/javascript" src="http://exteenscript.googlecode.com/files/retweet.js">
</script>
<a class="retweet vert self" href=""></a>
</div>
ซึ่งคราวนี้ ปุ่ม retweet ก็จะแสดงออกมามุมซ้ายล่างตลอด นอกจากนี้หากใครอยากดัดแปลง ใส่กรอบ ใส่พื้นหลัง ก็สามารถปรับได้ตามสะดวกผ่าน css
ใส่ปุ่ม retweet ไว้ในบล็อก
posted on 25 Jul 2009 08:36 by itshee in Twitterหลายคนแถวนี้คงเริ่มใช้และคุ้นเคยกับทวิตเตอร์ (Twitter) กันบ้างแล้ว และคงรู้จักหรือเริ่มคุ้นกับศัพท์คำว่า retweet กันแล้ว ซึ่งก็ประมาณว่า fwd mail เวอร์ชันทวิตเตอร์นั่นเอง หากใครยังไม่คุ้นลองแวะอ่านที่ เทคนิคในการ retweet คราวนี้ก็จะมาแนะนำในการใส่ปุ่ม retweet ลงในบล็อก exteen ด้วยวิธีง่ายๆ (สังเกตปุ่มสีเขียวด้านซ้าย) ภายในไม่กี่ขั้นตอน โดยโค้ดนี้ถูกเขียนขึ้นมาจากคนดัง จอห์น เรสิก (John Resig) โปรแกรมเมอร์จาวาสคริปต์ระดับโลก (http://ejohn.org/blog/retweet/)
วิธีการก็ง่ายๆ โดย
- เปิดหน้า Manage ของ Exteen แล้วเลือก Theme -> Widgets แล้วก็ไปหา custom code ที่ต้องการใส่
- นำโค้ดด้านล่างใส่ลงไป
<script type="text/javascript" src="http://exteenscript.googlecode.com/files/retweet.js"></script> <a class="retweet vert self" href=""></a> - เซฟเสร็จ แค่นี้ก็ขึ้นมาแล้วครับ มันจะมีปุ่ม retweet พร้อมนับจำนวนให้ด้วย สะดวกดีแท้
- (ไม่ต้องก็ได้) หากต้องการจัดตำแหน่งเฉพาะ อ่านเพิ่มได้ที่ จัดตำแหน่ง fixed ด้วย css หรือ ขยายความใส่ปุ่ม retweet (ของคุณ Tonhor)
ลองทำกันได้ครับ แล้วจะเห็นว่าการรีทวีต จะเพิ่มยอดคนเข้าบล็อกเราได้อย่างไม่คาดคิด อ่านจบแล้ว อย่าลืม retweet ให้ด้วยนะครับ
