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

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




ข้อแนะนำสำหรับการตกแต่ง blog

1. การใช้ code ต่างๆ ที่เกี่ยวข้องกับรูปภาพ เช่น เปลี่ยนโลโก้ เปลี่ยน background จะต้องใช้ url ของรูปภาพนั้นๆ หากท่านต้องการใส่รูปจากเครื่องของท่านเอง จะต้อง upload รูปของท่านไว้ที่เว็บที่ให้บริการรับฝากรูปก่อน ตัวอย่างเช่นเว็บ http://photobucket.com/ และ http://www.freeimagehosting.net

ส่วนการใส่รูปประกอบใน 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("http://...........url ของรูปที่คุณต้องการเอามาใช้....");}</style>

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

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


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

<script>document.images[0].src = "http://...........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('http://...........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 เบื้องต้น โดย คุณรำเพย

  • รวม code ที่ใช้ใน blog (สำหรับมือใหม่) โดย lozocat

  • รวม code ง่ายๆ สำหรับ blog โดย คุณป้ามด

  • Tips and Tricks ในการแต่ง blog โดยคุณรำเพย




    Best about Weblog (BlogGang Popular Award # 4): blog เกี่ยวกับแวดวง weblog, วิธีตกแต่ง blog, สอนการทำ blog ที่ชาว bloggang ชื่นชอบ

    ge-or-ge, แค่ฟ้ามีดาว ^^, ป้ามด, N_BEE810, เนยสีฟ้า, beautyswan, ยอดสน, ดอกหญ้าเมืองเลย, thattron, จอมแก่นแสนซน, รักษ์บ้านเกิด, KungGuenter, lozocat, Nilz, โอน่าจอมซ่าส์, Paradijs, พลอยสีรุ้ง, แพรวขวัญ, รำเพย, PS_PRINCESS, นวลกนก, learn4travel




    ทางทีมงานขอขอบคุณเจ้าของ code และเจ้าของ blog ทุกท่านมา ณ ที่นี้ค่ะ ขอให้สนุกกับการตกแต่ง blog นะคะ : )

    ข้อแนะนำเกี่ยวกับการหาข้อมูลตกแต่ง Blog

  • ลองค้นหา code จาก google หรือถ้าจะค้นจากที่เพื่อนๆ เคยเขียนไว้ใน blog ค้นได้จากหน้าแรกของ BlogGang (มุมขวาบน) ซึ่งเป็น search ที่ google เข้ามา search เฉพาะใน bloggang นะคะ
  • ดู Blog ต่างๆ จาก กลุ่มย่อยตกแต่ง blog ซึ่งรวมรวม blog เกี่ยวกับการตกแต่ง blog ของเพื่อนสมาชิก


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

  • BlogGang.com
    Location :
    กรุงเทพ Thailand

    [ดู Profile ทั้งหมด]

    ให้ทิปเจ้าของ Blog [?]
    ฝากข้อความหลังไมค์
    Rss Feed
    Smember
    ผู้ติดตามบล็อก : 893 คน [?]




    Webmaster of BlogGang.com
    Custom Search
    Group Blog
     
    <<
    มกราคม 2548
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031 
     
    31 มกราคม 2548
     
    All Blogs
     
    Friends' blogs
    [Add BlogGang.com's blog to your web]
    Links
     

     Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.