Group Blog
 
 
มกราคม 2554
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
 
5 มกราคม 2554
 
All Blogs
 
การตกแต่งบล็อกสำหรับมือใหม่ #2 คำสั่งพื้นฐาน

จากคำแนะนำในตอนที่ 1 เราจะมาทดลองตกแต่งบล็อกกันในตอนนี้

1.เพิ่มแบ็คกราวนด์ให้กับบล็อก

สมมุติมีภาพแบ็คกราวนด์อยู่ที่ URL : //www.freeimages.com/member1234/bg.jpg
วิธีทำ พิมพ์ชุดคำสั่งนี้ลงไปในช่อง Script area


<style>body{background-image:url("//www.freeimages.com/member1234/bg.jpg ");}</style>


ถ้าต้องการให้ภาพแบ็คกราวนด์อยู่กับที่ (ไม่เลื่อนขึ้นลง) พิมพ์คำสั่งนี้อีก 1 บรรทัด


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


2.เปลี่ยนภาพ Bloggang ที่หัวบล็อคด้านบน

ด้วยภาพที่มี URL : //www.freeimages.com/member1234/head.jpg ภาพนี้มีขนาดความกว้าง (width) = 120 และความสูง (height) = 48



วิธีทำ พิมพ์ชุดคำสั่งนี้ลงไปในช่อง Script area


<script>document.images[0].src = "//www.freeimages.com/member1234/head.jpg"; document.images[0].width =120; document.images[0].height =48 </script>


3.ใส่ภาพแบ็คกราวนด์ที่กล่อง comment

ด้วยภาพที่มี URL : //www.freeimages.com/member1234/comment.jpg ภาพนี้มีขนาดความกว้าง (width) = 450 และความสูง (height) = 240 และกำหนดสีตัวอักษรที่จะพิมพ์ลงไปเป็นสีเหลือง (color=”yellow”) ด้วย font ชื่อ Tahoma (font-family: Tahoma) ขนาดตัวอักษร=16 (font-size:16pt)

วิธีทำ พิมพ์ชุดคำสั่งนี้ลงไปในช่อง Script area


<style type="text/css">textarea{width:450;height:240;background:url("//www.freeimages.com/member1234/comment.jpg ");color="yellow"; font-family : tahoma; font-size:16pt;} </style>





4.ลบกรอบสีขาวที่ล้อมรอบแต่ละหัวข้อออกไป

ตามปกติหัวข้อต่าง ๆ บนบล็อก เช่น Group Blog, All Blogs, Friend’s Blogs จะมีกรอบสีขาวล้อมรอบอยู่ ถ้าต้องการลบกรอบสีขาวนี้ออกไป ให้พิมพ์คำสั่งต่อไปนี้ลงใน Script area


<style>table {background-color: transparent;border-style: none;border-spacing: none;}td
{border: none;border-color: none;background: none;}</style>


5.การเปลี่ยนรูปภาพที่อยู่หลังชื่อสมาชิก bloggang

สมาชิกที่เข้ามาเขียน Comment ในบล็อกของเรา จะมีรูปภาพไอคอนเป็นรูปคอมพิวเตอร์เล็ก ๆ ต่อท้ายชื่อ ถ้าต้องการเปลี่ยนเป็นภาพอื่น ที่มี URL : //www.freeimages.com/member1234/icon.gif
ให้พิมพ์คำสั่งต่อไปนี้ลงใน Script area (ตัวอย่างนี้จะได้ไอคอนรูปเพชร)


<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/smile.gif") {document.images[i].src=" //www.freeimages.com/member1234/icon.gif "}</script>




และถ้าต้องการเปลี่ยนแปลงข้อความในกรอบ Comment (ตามภาพคือคำว่า “เพื่อนคนที่ 1 ที่แวะมาทักทาย”)ให้พิมพ์คำสั่งนี้ในช่อง Script area (เปลี่ยนข้อความภาษาไทยได้ตามต้องการ)


<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=right style="border: #1A669F solid 1px; padding:2; background: #E4E4E4"> <font color=#1A669F size=-1>เพื่อนคนที่ ' + i + ' ที่แวะมาทักทาย </font></legend>'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>


6.การใส่นาฬิกาหรือปฏิทิน

ที่มี URL: //www.freeclocks.com/clock327.html ให้พิมพ์คำสั่งนี้ในช่อง Script area


<script src=" //www.freeclocks.com/clock327.html "></script>





7.การเปลี่ยนสัญลักษณ์หน้ารายการต่าง ๆ (เรียกว่า bullet)

เช่นสัญลักษณ์ที่อยู่หน้าชื่อเพื่อนในหัวข้อ Friends’ Blogs เดิมมีลักษณะเช่นนี้



และภาพที่จะใช้แทน bullet เดิมอยู่ที่ URL: //www.freeimages.com/member1234/newbullet.gif
ให้พิมพ์คำสั่งต่อไปนี้ลงใน Script area


<style>ul{list-style: ;list-style-image: url(//www.freeimages.com/member1234/newbullet.gif);} </style>


คงจะเก่งขึ้นมากแล้วนะครับ ต่อไปถ้าอยากได้อะไรอีกก็ค้นหาจากบล็อกของเพื่อนใจดีคนอื่น ๆ ได้เลย เช่น ของคุณ cat เป็นต้น.





Create Date : 05 มกราคม 2554
Last Update : 14 มกราคม 2554 10:10:01 น. 17 comments
Counter : 1553 Pageviews.

 
สวัสดีปีใหม่ค่ะ

ขอบคุณที่นำความรู้มาเรียบเรียงค่ะ


โดย: @NBC วันที่: 5 มกราคม 2554 เวลา:21:56:08 น.  

 
ขอบคุณคะ


โดย: ์Noy.. (สร้อยสีม่วง ) วันที่: 6 มกราคม 2554 เวลา:11:15:21 น.  

 
ขอบคุณมากๆ เลยค่ะ


โดย: Close To Heaven วันที่: 9 มกราคม 2554 เวลา:8:38:12 น.  

 
ขออนุญาต add น่ะค่ะ เมื่อไหร่มีเวลามากๆจะค่อยๆลองทำดู


โดย: jewelmoda วันที่: 11 มกราคม 2554 เวลา:20:22:30 น.  

 
ขอบคุณมากค่า ช่วยได้เยอะเรย (-/|\\-)


โดย: Nelke วันที่: 18 มกราคม 2554 เวลา:10:40:44 น.  

 
ได้ความรู้เยอะขึ้นมากเลยขอบคุณค่ะ แต่มีเรื่องขอความช่วยเหลือคือจะทำยังงัยให้ bg เป็นรูปเดียวทั้งหน้า ขอบคุณคะ


โดย: ไอชิรา วันที่: 26 มกราคม 2554 เวลา:1:12:28 น.  

 
คุณไอชิรา

ถ้าภาพที่นำมาทำเป็น bg มีขนาดเล็ก โปรแกรมดูเว็บจะแสดงภาพนั้นไปจนเต็มทั้งหน้าจอ เรียกว่า tile (เหมือนปูแผ่นกระเบื้อง) ทำให้มองเห็นภาพนั้นหลาย ๆ ครั้ง ดังนั้นถ้าต้องการจะได้ภาพเดียวทั้งหน้าจอ ก็ต้องทำให้ภาพ bg นั้นมีขนาดใหญ่เท่ากับหน้าจอเสียก่อน

เราก็ต้องทราบอีกว่าหน้าจอส่วนใหญ่ถูกเซ็ตไว้ด้วยความละเอียดเท่าไร ในปัจจุบันจอเครื่องตั้งโต๊ะจะมีขนาด 1024x768 (กว้างxสูง) แต่บางคนก็เซ็ตความละเอียดของจอให้ละเอียดมากขึ้นเป็น 1280x768 ถ้าเป็นคอมพิวเตอร์โน้ตบุ๊ครุ่นใหม่ ๆ มักจะเป็น wild screen (จอกว้าง) ก็มักจะเซ็ตความละเอียดของจอภาพเป็น 1366x768 ด้วยความแตกต่างของจอภาพที่มากเช่นนี้ เราจึงควรเลือกขนาดกลาง ๆ ประมาณ 1024x768 เพื่อที่ไฟล์ภาพจะได้มีขนาดไม่ใหญ่มากนัก (ไฟล์ใหญ่ทำให้แสดงผลช้า)

การขยายภาพ bg ให้มีขนาดใหญ่ขึ้นต้องใช้โปรแกรมช่วยจัดการภาพ เช่น PhotoScape หรือ ACDSee แล้วจึงนำภาพที่ขยายแล้วนั้นมาใช้ทำเป็น bg ครับ

อีกวิธีการหนึ่งคือเลือกภาพที่จะนำมาใช้ทำเป็น bg ให้มีขนาดใหญ่ตามที่ต้องการเลย ก็จะแก้ปัญหาได้ทันที


โดย: ทองกาญจนา วันที่: 30 มกราคม 2554 เวลา:11:29:53 น.  

 
ขอบคุณมากมายเลยค่ะ

เป็นการอธิบายที่กระชับ ชัดเจน แจ่มแจ้ง

และนำไปใช้ได้จริงๆ ไล งม คนเดียวอยู่นานมากเลยค่ะ




โดย: NooLai วันที่: 24 กุมภาพันธ์ 2554 เวลา:22:25:46 น.  

 
ขอบคุณมากเลยค่ะ พอลองเอาไปทำดู ก้อทำได้ด้วยค่ะ

ดีใจมากเลยค่ะ ขอบคุณอีกครั้งนะคะ


โดย: หลานชาวนา (Chaynedoodee ) วันที่: 3 มีนาคม 2554 เวลา:10:30:22 น.  

 
ไปลองทำดูแล้ว ทำได้ด้วย ดีใจจัง
มีประโยชน์มาก ขอบคุณมากๆค่ะ


โดย: I_sabaidee วันที่: 5 มีนาคม 2554 เวลา:15:22:37 น.  

 
ขอบคุณมากเลยค่ะ มีประโยชน์มากมาย


โดย: MamaBun วันที่: 26 มีนาคม 2554 เวลา:7:00:13 น.  

 
ขอบคุณมากนะคะ อ่านแล้วเข้าใจและทำได้เลย ขอบคุณสำหรับการแบ่งปันเป็นประโยชน์มาก


โดย: mug casino วันที่: 30 มีนาคม 2554 เวลา:5:13:55 น.  

 
ขอบคุณมากเลยค่ะ


โดย: @จุดอ่อนของฉันอยู่ตรงที่หัวใจ@ วันที่: 20 พฤษภาคม 2554 เวลา:16:02:40 น.  

 
ขอบคุณมากนะคะ เย้ ใส่ นาฬิกาได้แล้ว นั่งงมเองตั้งนาน ตาเหล่หมดแล้วค่ะ ขออนุญาตแวะเวียนเข้ามาหาความรู้บ่อยๆนะคะ :)


โดย: moomspell (Moonspell ) วันที่: 12 สิงหาคม 2554 เวลา:16:22:26 น.  

 
ขอบคุณข้อมูลที่แบ่งกัน อ่านแล้วทำได้ไม่ยาก ขออนุญาต add นะคะ จะได้เข้ามาหาข้อมูล


โดย: pantawan วันที่: 13 สิงหาคม 2554 เวลา:13:11:14 น.  

 
ขอบคุณที่แบ่งปันค่ะ


โดย: no1ne2 (no1ne2 ) วันที่: 15 กุมภาพันธ์ 2555 เวลา:10:47:45 น.  

 
ขอบคุณมากคะ สำหรับโค๊ดแต่งบล๊อก ...


โดย: ตรี (kate_tee ) วันที่: 1 กรกฎาคม 2556 เวลา:14:42:48 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ทองกาญจนา
Location :
เชียงใหม่ Thailand

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

ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 41 คน [?]




Friends' blogs
[Add ทองกาญจนา's blog to your web]
Links
 

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