R i j j y -[a x k i z e l]

อยากแต่งบล็อคแบบ overflow ทำยังไง? entry นี้มีคำตอบครับ

ผมจะมาขอแฉวิธีการแต่งบล็อคแบบ Rijjy! ให้ทุกท่านได้รู้กัน หมดเปลือก สิ้นทุกสิ่งทุกอย่าง วะฮะฮะฮ่า

หัวข้อ : แต่งบล็อคไม่ยากอย่างที่คิด 

ผมเซฟภาพความละเอียดต่ำมากเพื่อไม่ให้โหลดโหด จะแต่งบล็อคแบบนี้ทำยังไงดี?

1. คิดว่า resolution ที่คุณต้องการแสดงผลให้คนอื่นเห็นขนาดเท่าไหร่ ของผมใช้ notebook เป็น widescreen และคิดว่าเดี๋ยวนี้คนไม่ใช้คอม resolution 800x600 กันเท่าไหร่แล้ว มักจะ 1024 up บางคนก็ใช้จอ 19" นี่ก็ใหญ่เบิ่ม เห็นบล็อคผมหมดเปลือกแน่ๆ เอิ๊กๆ (ล่างลงไปอีกจะเห็นข้อความที่ผมเขียนเอาไว้ แต่จอไม่สูงพอก็จะไม่เห็นครับ)

2. หาภาพพื้นหลังที่คิดว่ามันจะครอบคลุมหน้าจอได้หมด ไม่เหลือพื้นที่สีขาวข้างๆ เอาไว้ให้เกะกะตา เมื่อดูในจอที่ความกว้างมาก ของผมเลือก wallpaper 1280*800 (สำหรับ 1280*1024 จะเห็นสีขาวด้านล่างนิดหน่อยช่างมัน)

3. ใช้โปรแกรมตกแต่งภาพช่วยเหลือ ผมใช้ Photoshop วางรูปแบบจอก่อนว่าจะไว้ตรงส่วนไหน อย่างไรดังตัวอย่าง

จากภาพ ผมลองใช้สีขาว opacity ต่ำๆ วางเอาไว้ว่าให้ข้อความใน entry แสดงที่ส่วนไหนดี นอกนั้นก็รายละเอียดปลีกย่อยอื่นๆ เช่นตัวอักษรสีอะไรดีเมื่อเขียนใน entry เป็นต้น

4. เมื่อได้แบบที่ต้องการแล้วเซฟภาพให้ความละเอียดที่สูง หากภาพนั้นมีความละเอียดสูง เพื่อจะได้ไม่แตกเป็น pixel

-------------------------------------------------------------------------

ถัดมา

ผมแยกแบ่งส่วนต่างๆ เอาไว้ 5 ส่วนดังนี้

1. ข้อความที่เขียนใน settings ส่วน Blog Description จะให้แสดงว่าอะไรก็ว่าไป

2. เนื้อหาใน entry ที่จะให้แสดง หาก entry ยาวจะมี scrollbar ให้เลื่อนอ่าน (overflow)

3. เมนูด้านข้าง ผมใช้ custom code เขียนตำแหน่งแต่ละอัน

4. ใส่ที่จะให้แสดง lastest comments เป็นส่วน bottom menu ใน widgets (ตอนแรกเป็น Powered by exteen blog ควรจะมีครับ แต่ผมจำใจต้องเอาออก ขออภัยท่านแชมป์ด้วย ว่าจะเอาไปใส่ที่ bg แทน แต่ยังไม่ได้แก้เลย)

5. พื้นหลังที่เป็นรูปใบหญ้า มีกรอบใสๆ สีขาว โลโก้ของผมแปะอยู่ แล้วก็ตัวอักษรตรง "อารมณ์วันนี้"

===========================================

วิธีการแต่งบล็อค

1. อัพภาพพื้นหลังเข้าโฮสนำ url ที่ได้มาใช้ [ ตัวอย่างพื้นหลังของผม ] 

2. เข้าส่วน widgets ปรับ widgets ตามใจชอบ (ของผมเอาส่วน sidebar ออก จริงๆ ไม่ต้องเอาออกก็ได้นะครับ ไปแก้ที่ css ได้เลย) [ ตัวอย่าง widgets ของผม ]

3. เข้า css แก้ไขธีมตรงส่วนต่างๆ ดังนี้

•  body
  ===> background:#ffffff url(http://www.ommamm.com/rije/grasstheme.jpg) no-repeat;
  ===> background-attachment:fixed; 
  ===> overflow:hidden; //หากเพจยาวจะไม่แสดง scrollbar
  
  นำโค้ด 3 บรรทัดนี้ไปใช้ ตรง url ภาพพื้นหลังก็เปลี่ยนเป็นของคุณเอานะครับ
  
  
• #page
  -----< เอาส่วน margin:auto; ออก
  ===> margin-left:80px; // ขยับจากซ้ายมา 80 px จะอยู่ในกรอบขาวพอดี
  ===> float:left; // เพิ่มส่วนนี้เข้าไปแทน
  
  ในส่วนนี้จะกำหนดเพจทั้งหน้าบล็อคของคุณ หากมองใน widgets จะคือ : top menu , sidebar#1 , content , sidebar#2 , bottom menu
  
  
• #header h2
  ===> padding-left:530px; //ห่างจากฝั่งซ้ายจอ 530 px. (ปรับตัวเลขเอา)
  
  ส่วนนี้คือส่วน Blog Description ปรับตำแหน่งจากทางซ้ายออกไปเท่าไหร่ก็ว่าไป
  
  
• #coverimage
  ===> display:none;
  
  ไม่แสดงผลภาพ header เพราะไม่จำเป็นต้องมี หากจะให้มีภาพ header ด้วยก็ไม่ต้องใส่โค้ดนี้ลงไปครับ
  
  
• #neck
  ===> height:0px;
  
  ปรับส่วน neck หรือ top menu ให้สูงเพียง 0 px แต่ไม่ได้ปิดส่วนนี้ เพราะเราจะเอาไปใส่ custom code ทำเมนูในหมายเลข 3 กัน
  
  
• #neck .module h2
  ===> display:none;
  
  ส่วนนี้ผมไม่ต้องการให้มันแสดงผล แต่จำไม่ได้ว่าใส่ไปเพราะอะไร อาจจะทิ้งเอาไว้อย่างเดิมโดยไม่แตะส่วนนี้ก็ได้ครับ
  
  
• #belly
  ===> overflow:auto;
  ===> width:765px;
  ===> height:485px;
  
  ส่วนนี้คือ sidebar#1, content, sidebar#2 รวมกัน การใส่ overflow เอาไว้ และใส่ความสูงกำหนดเอาไว้ด้วย โดยความหมายมันคือ หาก entry มีความยาวเนื้อหาเกิน 485 px overflow จะทำการใส่ scrollbar ส่วน entry นี้เท่านั้นให้เลื่อนลงไปอ่านได้ หากเราไม่กำหนดความสูงเอาไว้ entry ก็จะยาวลงไปธรรมดาไม่มีอะไรเกิดขึ้นครับ
  
  
• #content
  ===> width:725px;
  
  ส่วน content (ใน widgets) ที่แสดง entry ของเรา กำหนดความกว้างเอาไว้ 725 px คุณจะกำหนดเท่าไหร่ก็ได้ ตามธีมของคุณเอง
  
  
• .entry
  ===> float:left;
  ===> margin:5px 0px 10px 0px;
  
  ส่วนนี้จะไปควบคุม entry ของคุณ ว่าเนื้อหาใน entry จะให้กำหนดอย่างใด ตามโค้ดผมให้ชิดซ้าย และให้มีพื้นที่เข้ามาจากขอบดังนี้ top:5px, right:0px, bottom:10px, left:0px (ตรง margin นั่นเอง)
  
  
• .entry .post
  ===> color:#000;
  ===> font-size:14px;
  
  เนื้อหาใน entry เรากำหนดได้ในส่วนนี้ ผมให้เนื้อหาใน entry เป็นสีดำ #000 และให้ขนาดตัวอักษร 14 px ซึ่งจะใหญ่พอดี ถ้าไม่ได้แก้ไขตรงส่วนนี้และปรับตอนเขียน entry ตัวอักษรจะเล็กกว่านี้ครับ
  
  
• .entry .info
  ===> background:url(http://rije.exteen.com/images/bg_over.png);
  
  ผมใส่ภาพพื้นหลังเป็นสีขาว opacity 30% เอาไว้ ส่วนนี้คือ tags: xxx  x comments ด้านล่าง entry นั่นเองครับ คุณจะข้ามส่วนนี้ไป หรือจะใส่สีพื้นหลังก็ได้ โดยเอา url() ออกแล้วใส่โค้ดสีไปแทนครับ
  
  
• #sidebar, #sidebar2
  ===> display:none;
  
  ผมไม่ให้ sidebar ทั้งสองอันแสดงผล หากให้แสดงผลก็เอาโค้ดนี้ออกครับ ใส่แค่นี้ก็ข้ามตรงส่วนของ sidebar ไปเลยนะครับ
  
  
• /* Configure each module */
  ผมไม่ได้แก้ ส่วนนี้จะไปอยู่ในส่วน sidebar ครับ เป็นส่วน profile ในเมื่อผมไม่แสดงผล sidebar แล้วส่วนนี้ก็ข้ามไปได้โดยไม่ต้องแก้ครับ
  
  
• #commentform
  กำหนดความกว้างของกล่องคอมเม้นท์ให้กว้างเท่าส่วนของ entry ผมใส่พื้นหลังสีขาว opacity 30% เช่นเดิม ผมไม่ได้แก้ไขอะไรกับกล่องคอมเม้นท์มากเลย เพราะงั้นข้ามไปเลยนะครับ
  
  
• .comment
  ===> margin:10px 0px 0px 0px;
  ===> border-bottom:1px solid #4ca7e3;
  
  ผมให้ส่วน comment ของแต่ละคนห่างจากข้างบน 10px จะได้แยกดูเป็นส่วนๆ ไป ผมใส่พื้นหลังสีขาว opacity 30% เช่นกัน และใส่เส้นขอบส่วนล่างแบบ solid จะเป็นเส้นตรง dotted เป็นจุด dashed เป็นเส้นปะครับ อย่าลืมใส่ความกว้างเท่ากับกล่องคอมเม้นท์นะครับ
  
  
• .comment .post
  ===> padding:10px;
  ===> color:#000;
  ===> float:left;
  ===> width:500px;
  
  ส่วนเนื้อหาเม้นท์นั้นผมให้มีขอบกว้างโดยรอบ 10px (padding มองไม่เห็น) และสีตัวอักษรสีดำ (color) กำหนดความกว้างให้น้อยกว่า comment เพื่อให้เหลือพื้นที่ให้รายละเอียดผู้โพสด้วย ตรง float กำหนดให้คิมเม้นท์อยู่ทางฝั่งซ้าย
  
  
• .comment .info
  ===> margin:10px 10px 0px 0px;
  ===> float:right;
  ===> width:180px;
  
  กำหนดให้รายละเอียดผู้โพสอยู่ทางฝั่งขวา (float) โดยความกว้าง 180 px (รวมกับส่วนเนื้อหาเม้นท์จะได้ 680 px ส่วนที่เหลือคือช่องว่างระหว่างกัน)
  
  
• /* Leg Menu */
  ส่วนนี้ข้ามไปได้ เพราะไม่ได้ใช้ อาจจะปรับแก้ padding ตรง #leg .module เล็กน้อยตามสะดวก ตรงนี้คือส่วน Lastest comments นั่นเองครับ (bottom menu)
  
  
• #footer
  ===> display:none;
  
  ส่วนนี้คือ Power by exteen ผมเอาออกเพราะมันเกินมา ผมใส่ lastest comments ไม่ได้น่ะเลยต้องเอาออก ^^;;
  
  
• .r1{position: absolute;top:80px;left:850px;}
  .r2{position: absolute;top:161px;left:850px;}
  .r3{position: absolute;top:242px;left:850px;}
  .r4{position: absolute;top:323px;left:850px;}
  .r5{position: absolute;top:404px;left:850px;}
  .r6{position: absolute;top:485px;left:850px;}
  
  ส่วนนี้คือโค้ดที่ผมเพิ่มเข้าไป เอาไว้ใช้กับ menu ตรงฝั่งขวามือที่เป็นภาพครับ โดยกำหนดตำแหน่งให้ห่างจากด้านบน ห่างจากทางซ้าย มาเท่าไหร่
  
  
• opacity:0.3;
  
  กรณีอยากให้พื้นหลังโปร่งใส เปลี่ยนตัวเลขเอา ค่า 1 คือไม่โปร่งใส ค่า 0 คือโปร่งใสจนหายไปเลยครับ อยากได้โปร่งใสเท่าไหร่ก็ใส่ค่าเอาครับ
  1 = 100%
  0.5 = 50%
  0 = 0%
  ขอเสียของการใช้คำสั่งนี้คือ นอกจากพื้นหลังจะโปร่งใสแล้ว หากมีตัวอักษรอยู่ตรงส่วนที่เราใส่คำสั่งนี้ มันจะไปทำให้โปร่งใสด้วย รวมถึงรูปด้วยครับ
  

===========================================

วิธีการทำลิงค์กำหนดตำแหน่งในบล็อค (หมายเลข 3)

1. ต้องมีภาพลิงค์ที่เตรียมเอาไว้เสียก่อน ผมทำภาพให้เป็น png และปรับภาพ opacity มองทะลุผ่านได้เอาไว้ จึงต้องเป็น png เท่านั้นครับ

2. หลังจากอัพโหลดภาพลิงค์ขึ้นโฮสแล้ว ต่อไปให้เข้าไปในส่วน widgets เลือก custom code ที่ว่างอยู่ลากไปใส่ในส่วน top menu ครับ

3. จาก css ที่เราใส่ .r1 .r2 ไรเนี่ยเอาไว้ ก็จะนำมาใช้ดังนี้ หลังจากเปิด custom code ที่ต้องการขึ้นมาแก้ไข ให้ใส่โค้ดดังนี้

• <div class="r1">โค้ดลิงค์ภาพ</div>
  
  => เรียกสคริป r1 มาใช้ จาก css .r1 เรากำหนดให้ห่างจากด้านบนลงมา 80px ห่างจากทางฝั่งซ้ายเข้ามาอีก 850px ภาพที่เราใส่ไว้ใน div code ก็จะไปอยู่ทางฝั่งขวามือของบล็อคเราแล้ว
  

4. หลังจากกด ok และเซฟ widget ที่แก้ไขไปแล้ว ให้เข้าไปดูที่บล็อค อาจจะกด f5 สักเล็กน้อย จะเห็นภาพที่ใส่ไว้ใน div code ไปอยู่บนบล็อคตรงตำแหน่งที่ต้องการแล้วล่ะครับ  

===========================================

กรณีงงกับโค้ด สามารถโหลดธีมแนวนี้ได้ที่นี่ >> [ Overflow Luv Luv Theme ]

=========================================== 

เท่านี้เอง ธีมแจ่มๆ สวยๆ คุณเองก็ทำได้ แนะนำหาพื้นหลังเป็นภาพ wallpaper สวยๆ จะเพิ่มความเก๋ไก๋ให้บล็อคได้อย่างมากถึงมากที่สุดเลยครับ ^^

ปุลิง. กรณีชิดซ้าย ให้เลื่อนไปอ่านส่วน page นะครับ ผมเพิ่มให้แล้ว (ใช้ margin เอานะ) 

จบแล้วจ้ะ! 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Related Links

• [How To] : ลงสีทะเลและท้องฟ้า
• BiKiNi Fever II 2009