ของเล่นใหม่ JavaScript Badge
ลองเล่นของเล่นใหม่ใน GotoKnow คือ JavaScript Badge ซึ่งมีรายละเอียดตามบันทึกนี้ครับ
เอามาแปะในทุกบล๊อกของผมแล้ว ในขณะนี้ แสดงบันทึกล่าสุดที่ผมเขียนไว้ใน sidebar ด้วยวิธีการดังนี้
- ผมมีแพลนเน็ตอันหนึ่ง (ความจริงก็มีอยู่อันเดียว) ที่รวมบันทึกของตัวเองจากทุกบล๊อกที่เขียน ซึ่งได้เคยแนะนำให้สมาชิกทำแล้ว
- เปิดแพลนเน็ตนั้น เลื่อนไปดูท้ายหน้า จะเห็นบรรทัด JavaScript Badge: และมีตัว script ที่เราต้องการ
- เลือก without stylesheet (หรือเลือก with stylesheet ก็ได้ ตามที่ชอบ)
- copy script ตั้งแต่ <script> จนถึง </script> เก็บไว้ใน clipboard ของ browser
- เอา script นี้ไปใส่ในเกี่ยวกับบล๊อกนี้ ของทุกบล๊อก; แก้ไขโดยการ paste script ที่ copy ไว้ เข้าไปที่ท้ายของเกี่ยวกับบล๊อกนี้ โดยการแก้ไขบล๊อก -- หวังว่าคงคุ้นเคยอยู่แล้ว
- บล๊อกที่แก้ไขแล้ว ก็จะแสดงบันทึกล่าสุด 10 บันทึกจากทุกๆ บล๊อก
- แต่เผอิญบันทึกของผมชื่อยาว แล้วการที่ script แสดงชื่อบล๊อกและชื่อบันทึกตามหลัง bullet ก็กินที่มากไปหน่อย เลยแก้ไขเอา bullet ออกเสียด้วยวิธีการเขียน CSS
-
เลือกตกแต่งหน้าประวัติของคุณ เติม code เหล่านี้ลงไป
div.badge ul {
list-style: none;
margin: 0px;
padding: 0px;
}
div.badge ul li {
margin: 0px;
padding: 4px;
} - เป็นอันเรียบร้อย ทั้งบล๊อกและบันทึกที่แก้ไขตามนี้ จะแสดงบันทึกล่าสุด 10 บันทึกจากทุกบล๊อกที่เจ้าของเขียน
ความเห็น (9)
ขอบคุณที่ใช้บริการครับ
ผมขยายขนาดกรอบ ของหน้าออกไปจาก default 910px เป็น 98% ของความกว้างของหน้าต่าง ทำให้ sidebar2 และ content2 ยืดออกเกือบเต็มพื้นที่ครับ
เนื่องจากผมใช้ % ดังนั้น ก็น่าจะยืดหดได้โดยที่ sidebar2 กับ content2 ไม่ซ้อนกัน (แล้วหล่น) ครับ
รบกวนถามคุณ conductor อีกข้อ พอดีเปลี่ยนเป็น IE7 แล้วค่ะ แต่บังเอิญไปเห็นบันทึกของคุณเอกอันนึงที่รูปและตัวหนังสือบางส่วนในบันทึกมันทะลุออกไปฝั่ง sidebar มันเป็นเพราะอะไรคะ เห็นแล้วแปลกๆ ลิงค์ที่นี่ค่ะ http://gotoknow.org/blog/mhsresearch/111651
เป็นเพราะรูปใช้ fixed width ครับ
rendering engine ของ browser เป็นพวกว่าง่าย ถ้าเราระบุว่ามี "ก้อน" ที่มี dimension ที่ตายตัว มันก็จะ allocate พื้นที่ไว้ให้เลยครับ
- รูปที่ปรากฏเป็นรูปของบล๊อกเกอร์จาก /profile ซึ่งมีขนาดกว้าง 120px และสูง 160px
- ความกว้าง 120px -- 5 รูปก็ 600px
- แต่ content2 ตามที่ระบุใน CSS มีความกว้าง 640px ครับ
- แล้วก็มี margin ของ content2 บวกกับ margin ของ <td> ในตารางอีก [ 5 td สำหรับ 5 รูป ซึ่งแต่ละ cell ก็มี margin ซ้าย-ขวา ] ก็เลยไม่พอครับ
- เมื่อไม่พอ rendering engine ของ browser ก็ตัดสินใจทำอย่างที่เห็นครับ คือเบียดเบียนกัน
- IE7 ปัญหาน้อยกว่า IE6 และอิงมาตรฐานมากกว่าครับ (แต่ผมไม่ใช้ ;-)
ส่วน browser ใช้อันอื่นด้วย ทั้ง firefox safari แต่สำหรับ gotoknow ต้องใช้ IE เพราะ browser ตัวอื่นมันไม่แสดง repeat ในส่วน background ก็เลยจำเป็นต้องใช้ IE ทั้งๆ ที่ไม่ค่อยชอบ แต่ก็เลี่ยงเล็กๆ ด้วยการใช้เป็น Avant ซึ่งเหมือนร่างทรงใหม่ของ IE แต่มันปรับแต่งได้และอำนวยความสะดวกกระจุ๊กกระจิ๊กให้สนุกสนานเพลิดเพลินค่ะ (แหะๆ คือเป็นพวกชอบดูเว็บหน้าตาสวยๆ เลยเรื่องมากนิดนึง)
ผมแอบดู CSS ของ Little Corner แล้วคิดว่าเป็นที่ background-position มากกว่า แต่ไม่แน่ใจนะครับ -- IE สนับสนุน background-position แต่ Firefox และ Opera ไม่สนับสนุนครับ
ขอบคุณมากครับ
เอา bullet ออกก็ดีเหมือนกันครับ ชื่อบล็อกที่ learners ของแต่ละคน ยาวๆกันทั้งนั้น ^^