Group Blog
 
 
พฤศจิกายน 2548
 12345
6789101112
13141516171819
20212223242526
27282930 
 
30 พฤศจิกายน 2548
 
All Blogs
 
-`๏'- Blog สไตล์?! (ภาคขยาย)


เนื่องจากมีเพื่อนสมาชิกบางท่านได้นำโค้ดการทำสไตล์บล๊อกไปใช้ แล้วประสบปัญหาไม่สามารถประกอบรูปแบบได้ตามตัวอย่าง ก็เลยคิดว่าที่ผ่านมาอาจยังขาดตกบกพร่องในการนำเสนอไป เป็นว่าเรามาเริ่มกันใหม่อีกสักรอบ สำหรับท่านที่เพิ่งเข้ามาในหน้านี้อาจจะงุนงงว่า คุยอะไรกันอยู่?! ถ้าสนใจในเนื้อหาที่คุยกันอยากทราบรายละเอียดตั้งแต่ต้น ก็ขอเชิญไปที่ หน้านี้
เรามาเริ่มต้นกันที่เลือกรูปขึ้นมาหนึ่งรูป ซึ่งมีขนาด width=450px; height=338px ดังตัวอย่างข้างล่างนี้


จากรูป ! เจ้าของบล๊อกก็เริ่มมองหาพื้นที่ในใจว่าจะลงส่วนเนื้อหาไปที่ส่วนใดของรูปดี แล้วเจ้าของบล๊อกก็ตัดสินใจเลือกพื้นที่ดังภาพ (ในการนำเสนอครั้งนี้ เจ้าของบล๊อกจะไม่อ้างอิงการใช้โปรแกรม Photoshop เข้ามาช่วยในการจัดการ)


จากตรงนี้ เจ้าของบล๊อกมี 2 ทางเลือก หนึ่งเลือกที่จะแบ่ง 4 ช่อง หรือสองแบ่ง 9 ช่อง ดังรูป

แบ่ง 4 แบบนี้ในใจ (ง่ายดีจัง)

แบ่ง 9 แบบนี้ในใจ (สวยดีน๊า)


แล้วในที่สุด เจ้าของบล๊อกก็ตัดสินใจเลือกแบ่ง 4 ช่องดีกว่า เย๊ยยยย!!! มะช่ายจิ..เจ้าของบล๊อกตกลงเลือกแบ่ง 9 ช่องจ้า งุงิ งุงิ (บ่น..นิโหน่ยว!!)
เจ้าของบล๊อกก็เอาโค้ดที่ได้มาจากครั้งที่แล้วกางออก (โดยยังไม่ได้เปลี่ยนแปลงแก้ไขอะไรเลยนะ มาอย่างไรเห็นอย่างนั้นเลย)

รายละเอียดของโค้ด
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="460" background="http://img508.imageshack.us/img508/3143/
a382889112copy0ro.jpg
">
<tr>
<td height="21" width="22">&nbsp;</td>
<td height="21" width="180">&nbsp;</td>
<td height="21" width="252">&nbsp;</td>
</tr>
<tr>
<td height="250" width="22">&nbsp;</td>
<td valign="top" height="250" width="180">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="250" width="252"><a href="http://meikharhinoceros.bloggang.com/"><img src='http://img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="78" width="22">&nbsp;</td>
<td height="78" width="180">&nbsp;</td>
<td height="78" width="252">&nbsp;</td>
</tr>
</table>
</div>

ดำเนินการปรับเปลี่ยนรายละเอียด ที่เห็นอย่างแรกเลยคือขนาดของรูปในโค้ด width="460" แต่ภาพที่เจ้าของบล๊อกนำมาใช้แค่ width="450" อีกจุดคือ URL ของภาพก็ต้องเปลี่ยนแปลง ส่วนอื่นๆ ก็ยังไม่รู้จะเปลี่ยนไรดี ก็เลยตัดสินใจใช้ค่าเดิมไปก่อนแล้วกัน ผลจากการเปลี่ยนแปลงค่าสองตัวข้างต้นจึงปรากฏดังภาพข้างล่างนี้

   
 
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)
   

ถ้าสังเกตุจากตรงนี้จะเห็นว่า เกิดภาพซ้อนขึ้นที่ส่วนล่างดังรูป(บางคนถ้าภาพมีขนาดใหญ่ อาจกลายเป็นว่าภาพขาดหายไปได้)แต่ตรงนี้ เจ้าของบล๊อกไม่สนใจอ่ะ ปล่อยไปก่อน ช่างหัวมาน ไม่รักดี ก็ช่างมาน เนอะๆๆ แหะๆ มะช่ายอย่างนั้น!? เราข้ามตรงนี้ไปก่อนไปดูส่วนประกอบอื่นๆ ก่อน
มี Trick อยู่นิดนึง ในหน้าเพจบล๊อกขณะที่เราแสดงผลตัวอย่างอยู่ ให้คลิกเมาส์ลงบนพื้นที่ว่าง 1 ครั้ง แล้วกด Ctrl+A จะปรากฏดังภาพข้างล่างนี้


สังเกตุที่รอยมาสก์ตำแหน่ง(ลูกศรสีแดง) นั่นคือระยะห่างระหว่างช่องภายในของตาราง ซึ่งเกิดจากตัวเลขเดิมที่เรายังไม่ได้ปรับแก้ จากตรงนี้เราก็ทำการปรับระยะให้เข้ากับระยะจริงๆ ที่เรามาสก์ไว้ในใจก่อนหน้านั้น ซึ่งตรงนี้จะแม่นยำแค่ไหน ใช้เวลามากหรือน้อยขึ้นอยู่กับประสบการณ์และความเป็นคนช่างสังเกตุของผู้ทำเป็นสำคัญ เจ้าของบล๊อกเริ่มเปลี่ยนแปลงตัวเลขสีแดงในโค้ดก่อน โดยเริ่มทำการเปลี่ยนตัวเลขที่อยู่ในแนวตั้ง(width)ก่อนเป็นสำคัญ (จากรอยมาสก์ที่เห็นเจ้าของบล๊อกสามารถอ้างอิงกับแนวตั้งได้ง่ายที่สุด) โดยตัวเลขที่ใช้ในแนวตั้งมีดังนี้ คือ 10+240+200=450 (เป็นค่าตัวเลขที่เราสมมติไปก่อน)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งที่ 2
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="http://img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="21" width="10">&nbsp;</td>
<td height="21" width="240">&nbsp;</td>
<td height="21" width="200">&nbsp;</td>
</tr>
<tr>
<td height="250" width="10">&nbsp;</td>
<td valign="top" height="250" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="250" width="200"><a href="http://meikharhinoceros.bloggang.com/"><img src='http://img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="78" width="10">&nbsp;</td>
<td height="78" width="240">&nbsp;</td>
<td height="78" width="200">&nbsp;</td>
</tr>
</table>
</div>

ผลที่ได้จากการเปลี่ยนระยะแนวตั้ง (ตัว Scrollbar เจ้าของบล๊อกปล่อยไว้ก่อน ยังไม่ใช่สาระสำคัญ) จะปรากฏดังภาพข้างล่าง ต้องทำไฮไลท์ (Ctrl+A) กับพื้นที่ด้วยจึงจะสามารถมองเห็นนะจ๊ะ ถ้าดูจากตรงนี้ถือว่าตำแหน่งแนวตั้งน่าจะใกล้เคียงกับที่วาดภาพไว้ในใจได้แล้วนะจ๊ะ?


คราวนี้มาที่การปรับค่าทางแนวนอน (height) ดูบ้าง เราจะใช้อะไรเป็นหลักสังเกตุล่ะ ในเมื่อดูจากไฮไลท์แล้วไม่เห็นรอยทางแนวนอนเลย ทำไงดี?! ติ๊กต๊อกๆๆๆ ...ใคร? ตอบถูกคนนั้นสอบผ่าน อิอิ
ให้สังเกตุที่บรรทัดของข้อความกับหัวของ Scrollbar ไว้เป็นสำคัญ โดยอาจตั้งตัวเลขสมมติขึ้นมาชุดบนสุดก่อน เจ้าของบล๊อกกำหนดไว้ที่ height=230 ส่วนขอบล่างกำหนดไว้ที่ height=10 ตรงท่อนกลางก็จะได้ 338-230-10=98 หรือจัดเรียงลำดับใหม่ก็จะได้ 230+98+10=338 (เป็นค่าตัวเลขที่เราสมมติไปก่อน)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งที่ 3
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="http://img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="230" width="10">&nbsp;</td>
<td height="230" width="240">&nbsp;</td>
<td height="230" width="200">&nbsp;</td>
</tr>
<tr>
<td height="98" width="10">&nbsp;</td>
<td valign="top" height="98" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="98" width="200"><a href="http://meikharhinoceros.bloggang.com/"><img src='http://img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="10" width="10">&nbsp;</td>
<td height="10" width="240">&nbsp;</td>
<td height="10" width="200">&nbsp;</td>
</tr>
</table>
</div>

ได้ระยะแนวนอนช่วงที่จะเป็นขอบบนของข้อความแล้วจ้ะ แต่ข้างล่างมันดันยืดออกไปมากเลย แล้วถึงตรงนี้ใครพอจะเดาออกว่าทำไม? อะไร? คือสาเหตุที่ทำให้มันยืดออก ถ..ถะ....ถูกต้องนะคร้าบบบบบ!! Scrollbar ไงกั๊ฟ มันยาว(สูง)เกิน มันก็เลยทำให้ยืดออกไป ถึงตรงนี้หลายคนคงรู้แล้วจะแก้ปัญหาได้อย่างไร


เพื่อไม่ให้เยิ่นเย้อเกินไป เจ้าของบล๊อกจะไม่แสดงขั้นตอนการปรับตัวเลขโค้ดทีละน้อยๆ แบบที่ผ่านมาแล้วนะ ให้ท่านสังเกตุความเปลี่ยนแปลงของตัวเลขต่างๆ เปรียบเทียบกันเอาเองนะจ๊ะ (เจ้าของบล๊อกมีการย้ายตำแหน่งของลิ้งค์ในภาพด้วย)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งสุดท้าย
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="http://img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="230" width="10">&nbsp;</td>
<td valign="center" align="middle" height="230" width="240"><a href="http://meikharhinoceros.bloggang.com/"><img src='http://img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
<td height="230" width="200">&nbsp;</td>
</tr>
<tr>
<td height="90" width="10">&nbsp;</td>
<td valign="top" height="90" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 250; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 90">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td height="90" width="200">&nbsp;</td>
</tr>
<tr>
<td height="18" width="10">&nbsp;</td>
<td height="18" width="240">&nbsp;</td>
<td height="18" width="200">&nbsp;</td>
</tr>
</table>
</div>

  
 

ก๊อปโค้ดทั้งหมดจากที่นี่
<div align="center"><table border="0" cellpadding="0" cellspacing="0" width="450" background="http://img507.imageshack.us/img507/8443/boacute0174of.jpg"><tr><td height="230" width="10"> </td><td valign="center" align="middle" height="230" width="240"><a href="http://meikharhinoceros.bloggang.com/"><img src='http://img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td><td height="230" width="200"> </td></tr><tr><td height="90" width="10"> </td><td valign="top" height="90" width="240"><DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 250; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 90">ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td><td height="90" width="200"> </td></tr><tr><td height="18" width="10"> </td><td height="18" width="240"> </td><td height="18" width="200"> </td></tr></table></div>

   

ก็เป็นอันว่า เสร็จขั้นตอนการประกอบรูปแบบสไตล์บล๊อกที่ได้นำเสนอไปก่อนหน้านี้ ในแบบที่ค่อนข้างละเอียดมากทีเดียว หวังว่าคงช่วยให้ท่านได้มีความสุขในการสร้างสรรบล๊อกในแบบฉบับที่เป็นตัวของตัวเองได้บ้างไม่มากก็น้อย
อยากฝากไว้ว่าการทำบล๊อก โค้ดต่างๆ ไม่ใช่สิ่งที่ยุ่งยากอย่างที่หลายท่านเข้าใจ ถ้าเข้าใจถึงความสัมพันธ์ที่เกี่ยวเนื่องกัน ซึ่งความเข้าใจนี้ไม่จำเป็นต้องใช้สติปัญญาเลอเลิศอันใด เพียงแค่เป็นคนช่างสังเกตุสักนิด ก็จะสามารถเข้าใจถึงความสัมพันธ์นี้ได้

  
 

อารมณ์....

เป็นสิ่งปลีกย่อยมากมายในความรู้สึกนึกคิดของคน
ทำให้เรารู้สึกต่างต่างนานากับเรื่องที่เกิดขึ้น
ฉันคิดเสมอว่าการควบคุมอารมณ์
เป็นสิ่งสำคัญในการดำเนินชีวิตร่วมกัน
คนเราจะอยู่ร่วมกันได้ดีเพียงไร
ก็ขึ้นอยู่กับว่า...
สามารถวางอารมณ์ได้เหมาะสมเพียงไร


เป็นสิ่งปลีกย่อยมากมายในความรู้สึกนึกคิดของคน
ทำให้เรารู้สึกต่างต่างนานากับเรื่องที่เกิดขึ้น
ฉันคิดเสมอว่าการควบคุมอารมณ์
เป็นสิ่งสำคัญในการดำเนินชีวิตร่วมกัน
คนเราจะอยู่ร่วมกันได้ดีเพียงไร
ก็ขึ้นอยู่กับว่า...
สามารถวางอารมณ์ได้เหมาะสมเพียงไร


   


Song : Broken Hearted Women (ch.)  
Artist : Jessica Jay  









Create Date : 30 พฤศจิกายน 2548
Last Update : 7 มกราคม 2549 21:03:18 น. 17 comments
Counter : 782 Pageviews.

 
อิอิ มาคนแรก อิอิ พี่ยังไม่ได้หัดทำเรยน้องไหม


โดย: อินทรีทองคำ วันที่: 30 พฤศจิกายน 2548 เวลา:19:57:47 น.  

 
ว๊าย มาสายคะครูไหมขา
อย่าทำโทษกันนะ

ฟังเพลงเพลินไปเลย ขอเวลาไปฝึกก่อนนะจ๊ะ หยุดยาวนี้ไม่อยู่บ้านซะด้วย ทำได้แล้วจะแวะมาส่งการบ้านนะจ๊ะ


โดย: นู๋ส้มจุก วันที่: 30 พฤศจิกายน 2548 เวลา:21:37:22 น.  

 
เก่งจังเลยค่ะ
ไว้ไปหัดทำมั้ง ขอบคุณนะค่ะ


โดย: ปอ (Michiyo ) วันที่: 1 ธันวาคม 2548 เวลา:0:06:07 น.  

 
.


คุณไหมใจดี มีน้ำใจจังเลยค่ะ


โดย: p_tham วันที่: 1 ธันวาคม 2548 เวลา:2:08:12 น.  

 
ไม่ได้หัดทำเลยน้องไหม ช่วงนี้พี่ยุ่งมากเลยค่ะ คิดถึงน่ะค่ะ อยากบอกว่าน้องไหมน่ารักมากเลยจ้า


โดย: Tumble วันที่: 1 ธันวาคม 2548 เวลา:2:57:31 น.  

 
เมื่อคืนนี้พี่แพทเข้าบ้านน้องไหมไม่ได้อีกแล้ว
จามาบอกน้องไหมว่าพี่แพทอัพบล๊อคแล้วน๊า ... แต่ยังไม่ใช่อันนั้นนะจ๊ะ


โดย: Petit Patty วันที่: 1 ธันวาคม 2548 เวลา:9:06:00 น.  

 
สวยจังเลยค่ะ


โดย: แมวน้อยของเสี้ยวเทียน วันที่: 1 ธันวาคม 2548 เวลา:11:46:09 น.  

 
ชอบเพลง broken hearted woman จังเลยค่ะ ไม่ได้ฟังมานานแล้ว .....



โดย: bamboolerther วันที่: 1 ธันวาคม 2548 เวลา:13:01:58 น.  

 
มาแว๊วววววว
หวัดดีจ๊ะคุณนู๋ไหม .... ขอบคุณสำหรับน้ำใจอันงดงาม และความช่วยเหลืออันล่ำค้า .....ส่งผลให้คุณนู๋ไหม น่ารักขึ้นทุกวั๊น ..ทุกวันนะจ๊ะ ..


โดย: SinGle In Car วันที่: 1 ธันวาคม 2548 เวลา:13:11:11 น.  

 
คุณไหมจ๋าทำยากนะ สอนมั้งได้เปล่าคะ


โดย: บันทึกสีขาว วันที่: 2 ธันวาคม 2548 เวลา:9:12:02 น.  

 

ทำไม -`๏'- เมนู(มาน)กระโดด ไม่มีช่องเม้นท์อ่ะจ๊ะน้องไหม


หรือว่าน้องไหมกะลังอัพอยู่น๊อ


โดย: Petit Patty วันที่: 2 ธันวาคม 2548 เวลา:9:52:16 น.  

 
เข้าบ้านน้องไหมไม่ได้อีกแย้ว .....
กล่องเม้นท์น่ารักจังเลยจ้ะน้องไหม


โดย: Petit Patty วันที่: 2 ธันวาคม 2548 เวลา:22:32:42 น.  

 
มาเก็บตกครับ


โดย: noom_no1 วันที่: 3 ธันวาคม 2548 เวลา:2:17:11 น.  

 
แวะมาอ่านค่า

ทำไมสมองมันไม่ค่อยจะวิ่งเลย

อยากปรับปรุง..แต่ทำไม่ค่อยเก่งค่า


โดย: Batgirl 2001 วันที่: 3 ธันวาคม 2548 เวลา:20:34:59 น.  

 
เพลงเพราะจัง


โดย: คณิตยา (คณิตยา ) วันที่: 4 ธันวาคม 2548 เวลา:20:28:36 น.  

 
ชอบบบบบบบบบบบบบ...เจ้าของบล็อก อิๆๆ


โดย: คณิตยา (คณิตยา ) วันที่: 13 ธันวาคม 2548 เวลา:22:15:59 น.  

 


โดย: jojo IP: 125.24.94.224 วันที่: 4 มีนาคม 2549 เวลา:22:30:47 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
รหัสส่งข้อความ
กรุณายืนยันรหัสส่งข้อความ

-`๏'- MeIKha
Location :


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

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]





ถ้ามีน้ำตา ให้อดทนและเสียใจกับสิ่งที่เกิดขึ้น
และก็ก้าวต่อไป มีเพียงคนเดียวที่จะอยู่กับเรา
ไปตลอดชีวิต ก็คือ ..'ตัวเราเอง'







 

 

  ไม่นาน ...
  นาทีนี้ก็จะผ่านไป

  ถึงวันพรุ่งนี้ …
  วันนี้ก็จะกลายเป็นวันวาน

  ปัจจุบันเคลื่อนตัว
  ไปเป็นอดีตอย่างรวดเร็วเสมอ
  ความโศกเศร้าก็เช่นกัน …

  มันเป็นเรื่องที่ผ่านมาชั่วครั้งชั่วคราว
  ไม่ได้พักพิงอยู่กับเราถาวร

  เมื่อพรุ่งนี้มาถึง
  ทุกชีวิตต้องลืมตาตื่น

  และดำเนินต่อไป ……ไม่ว่า
  จะเป็นคนที่กำลังเจ็บป่วย โศกเศร้า

  ไม่ว่าใครก็ตาม
  ไม่สามารถที่จะเรียกคืนอดีตได้

  และนี่ ...จึงเป็นเหตุผล
  ที่เราควรจะต้องทำปัจจุบันให้ดีที่สุด

  เพื่อที่จะได้ไม่ต้องคร่ำครวญถวิลหาอดีต
  ไม่ว่าเพื่อจะมาเปลี่ยนแปลง แก้ไข

  หรือเพราะว่า ...มีเพียงอดีตเท่านั้น
  ที่ยังพอจะพบคุณค่า

  ความหมายที่น่าภาคภูมิใจ …





Friends' blogs
[Add -`๏'- MeIKha's blog to your web]
Links
 

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