+++ สร้างสีสันให้กับ Blog ของคุณ +++

สวัสดีค่ะ สมาชิก Bloggang ทุกท่าน จนถึงตอนนี้ Bloggang ก็เปิดบริการมาครบ 1 ปีแล้ว หวังว่าสมาชิกทุกท่านคงจะเพลิดเพลินและได้รับประโยชน์จากบริการของเราไม่มากก็น้อยนะคะ และเนื่องจากเห็นว่าสมาชิก Bloggang ของเรากำลังสนุกสนานกับการใช้ code ต่างๆ ในการตกแต่ง blog ดังนั้นทางเราจึงได้รวบรวม code ต่างๆ ที่หลายๆท่านนิยมใช้ มาไว้ที่ blog นี้ รวมทั้งรวบรวม blog ของเพื่อนสมาชิกที่ได้แนะนำการตกแต่ง blog มาไว้ด้วยเช่นกัน ทั้งนี้เพื่อที่สมาชิกได้เลือก code ต่างๆ มาใช้ตกแต่ง blog ได้สะดวกและหลายหลายมากขึ้นค่ะ

ส่วนการใส่รูปประกอบใน blog แบบไม่ได้พิมพ์ code html เอง สามารถทำได้โดย เลือก ซึ่งอยู่สุดท้ายของ tool จัดการข้อความในหน้าเขียน blog นะคะ

2. code ต่างๆ ที่เป็น java script จะต้องใส่ไว้ที่ส่วน script area เท่านั้น สำหรับ stylesheet สามารถใส่ได้ที่ script area และช่องเขียน blog

3. หากเกิดปัญหาจากการใส่ code html หรือ script ต่างๆ เช่น ใส่แล้วทำให้การแสดงผลของ blog ผิดเพี้ยนไป หรือไม่แสดงผล แสดงว่า code ที่ใส่ผิดพลาด ให้นำ code นั้นออก และตรวจสอบ code ให้ถูกต้อง ก่อนทดลองใส่เพื่อทดสอบการแสดงผลแต่ละคำสั่งใหม่อีกครั้ง

Code Hot Hit !

1.เปลี่ยน background (จะต้องเลือก theme เป็น Theme อิสระ)

<style>body{background-image:url("//...........url ของรูปที่คุณต้องการเอามาใช้....");}</style>

2. code ที่ทำให้ background ติดอยู่กับที่ไม่เคลื่อนไปไหน

<style>body{background-attachment: fixed;}</style>


3. เปลี่ยนโลโก้ bloggang (จะต้องเลือก theme เป็น Theme อิสระ)

<script>document.images[0].src = "//...........url ของโลโก้ bloggang ที่ต้องการจะ ใส่ ... "</script>

4. ใส่เพลงใน blog
4.1 แบบที่แสดง control และต้องกด play เพื่อฟังเพลง

<EMBED ALIGN="CENTER" SRC=".......url ของเพลงที่คุณต้องการ...." HEIGHT="60" WIDTH="280" AUTOSTART="FALSE" VOLUME="50%" MASTERSOUND></EMBED>

4.2 แบบที่ซ่อน control โดยเมื่อเปิดหน้าเว็บจะได้ยินเสียงเพลงเลย

<EMBED SRC=".......url ของเพลงที่คุณต้องการ...." HIDDEN="true" AUTOSTART="true"LOOP=" ใส่จำนวนรอบที่ต้องการให้เปิด" MASTERSOUND></EMBED>

ทั้งนี้วิธีการใส่เพลงเพิ่มเติม สามารถดูได้ที่ blog ของ คุณรำเพย ค่ะ

5. แก้ bullet หน้าหัวข้อให้เป็นรูปอื่น

<style>ul{list-style-image: url('//...........url ของรูปที่คุณต้องการเอามาใช้....');}</style>

6. ทำให้มีกรอบและตัวเลขตรงส่วน comment

<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<fieldset style="border: #1A669F solid 1px; padding:4"> <legend align=center style="border: #1A669F solid 1px; padding:2; background: #FFCC66"> <font color=#1A669F size=-1>คห.ที่ ' + i + ' ที่แวะมาตอบ blog</font></legend>'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>

* ส่วนสีแดงคือส่วนที่สามารถเปลี่ยนแปลงได้
* code จาก คุณกึ่งยิงกึ่งผ่าน และ คุณรำเพย


7. ใส่รูปให้กล่อง comment

<STYLE type="text/css">textarea{width:450;height:240;background:url("http:ของรูป");color="blue"; font-family : tahoma; font-size:20pt;} </STYLE>

8. ตกแต่งตัวหนังสือและเปลี่ยนสี font

<style>body, ul, li, p{font: normal "MS Sans Serif",Tahoma;font-size:10pt;color:black;}</style>

* ส่วนสีแดงคือส่วนที่สามารถเปลี่ยนแปลงได้
* สำหรับตารางสีดูได้ที่บล๊อกของคุณ ป้ามด ค่ะ

ดู Blog ต่างๆ จาก กลุ่มย่อยตกแต่ง blog ซึ่งรวมรวม blog เกี่ยวกับการตกแต่ง blog ของเพื่อนสมาชิก

 

Create Date : 31 มกราคม 2548		0 comments
Last Update : 8 มิถุนายน 2552 11:35:16 น.
Counter : 64126 Pageviews.
Share Tweet