๏ palermos cafe ๏

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

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

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

ก่อนอื่นต้องเข้าใจหลักการเบื้องต้นนิดนึงครับว่าเราสามารถที่จะสร้างเจ้าตัวลิงค์ที่ว่าเนี่ยบน #neck และ #sidebar(ตัวหลังให้ลองขยายความกว้างให้เท่ากับ ความกว้างบล็อกครับ ลองดูสิ)

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

หน้าตาบล็อกแรกเกิด.. ที่ยังไม่ได้แต่งอะไรเลย

เพื่อความเข้าใจง่ายๆ และเป็นลำดับขั้นตอน จะใส่ข้อความทั่วไปลงไปก่อน 

ลาก Custom Code ลงไปที่ Top Menu ครับ แล้วก็จัดการใส่ div

แนะนำว่าให้ครอบข้อความ หรืออะไรก็ตามแต่ด้วย div แล้วก็ปิดท้ายคำสั่งตามรูปข้างต้นครับ

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

สำหรับบล็อกแรกเกิด ขนาดของ Top Menu จะกำหนดมาที่ 730px และจากรูปข้างต้น ผมจะใส่กล่องข้อความ รูปภาพ และ ตัวเครื่องเล่น ijigg ที่ย่อขนาดลงมานิดหน่อย (ท้ายเอนทรี่จะสอนการย่อขนาด และ ปิดการเล่นเองอัตโนมัติให้ครับ)

พอจินตนาการได้แล้ว ทีนี้หัวใจสำคัญมันก็จะอยู่ตรงที่การเขียน css ขึ้นใช้เอง งานนี้ไม่ยากครับ เขียนไม่กี่บรรทัด (ถ้าเราไม่ใส่ลูกเล่นเยอะๆเองนะ) โดยจะเริ่มจากการกำหนดให้ส่วนไหนกว้างเท่าไหร่ดี จึงจะสัมพันธ์ และสอดคล้องกัน ไม่เบียดกันตกขอบ สูตรในคิดคำนวณขนาดความกว้างรวมคร่าวๆ คือ

ความกว้างรวม =

ความกว้างbox1 +  ความกว้างbox2 +  ความกว้างbox3 + ค่าmarginซ้ายขวา +ค่าpaddingซ้ายขวา

ถึงตอนนี้อาจจะงง เดี๋ยวลองมาดูตัวอย่าง css code ที่ผมเขียนนะ เอาไปใช้ได้เลยครับ สำหรับบล็อกที่เซท neck .module กว้าง 730px

.sample{
    width:730px
}

.sample .box1{
    float:left;
    width:200px;
    margin:0 10px 0px 0px;
    padding-left:10px; /*เพื่อดันตัวหนังสือให้เสมอกับ page */
}

.sample .box2{
    float:left;
    width:200px;
    margin:0 10px 0px 10px;
}
.sample .box3{
    float:left;
    width:280px;
    margin:0 0px 0px 10px;
}

อธิบายขยายความ

.sample คือกล่องใหญ่ที่ครอบกล่องสามใบ (box1, box2, box3) เซทกว้าง 730px เท่ากับ #pagemenu

.sample .box1 เน้นตรงจุดๆนั่นนะครับ มีความสำคัญ เพราะเราจะเรียกใช้ box1 ในรูปของ classซึ่งมันแตกต่างไปจากการเขียนแบบนี้ .sample box1 อันนี้ไม่มีความหมาย...

และที่สำคัญอย่าลืมใส่ float เพราะถ้าเราไม่ใส่ กล่องสามใบมันจะขี่คอกันแทนที่จะเรียงกันนะสิ และจากสูตรข้างบนผมจะเหลือพื้นที่ว่างในนั้นเท่ากับ 0 คือไม่เหลือพื้นที่ไว้เตะตระกร้อ

จากนั้นเราก็เข้าไปแก้ Custom Code กัน โดยผมจะเขียนhtmlแบบนี้

<div class="sample">
<div class="box1">สิ่งเดียวที่เหลือ คือ ชีวิตว่างเปล่า<br/>ที่เดิมที่เคยมีเราสองคนหายไป<br/>โปรดเถอะ คนดี คนๆนี้รู้สึกช้าไป<br/>บอกเธอให้ฟังเอาไว้ แม้จะสายเกินไป <br/>แต่ยังรักเธอ...</div>
<div class="box2"><img border="1" src="http://ammikyo.exteen.com/images/cring.jpg"/></div>
<div class="box3"><object width='280' height='70'>
<param name='movie' value='http://www.ijigg.com/jiggPlayer.swf?songID=V2BB447DPAD&Autoplay=0'>
<param name='scale' value='noscale' /><param name='wmode' value='transparent'>
<embed src='http://www.ijigg.com/jiggPlayer.swf?Autoplay=0&songID=V2BB447DPAD' width='280' height='70'  wmode='transparent'>
</embed></object></div>
</div>

เห็นโค้ดมาเป็นก้อนๆ อาจจะงง ขออธิบายหลักการเขียน html ง่ายๆดังนี้นะครับ

1. เขียนจากข้างนอกไปหาข้างใน เริ่มแบบนี้ โดยเรียกใช้ class .sample ก่อน

<div class="sample">

</div>

2. เขียนจากบนลงล่าง โดยไล่เขียนกล่องทั้ง3ใบให้ครบ

<div class="sample">

<div class="box1">...........</div>

<div class="box2">...........</div>

<div class="box3">...........</div>

</div>

3. แล้วจึงแยกทำ html ในแต่ละ class

และหน้าตาของบล็อกแต่งเสร็จแล้วจะประมาณนี้ครับ

แยกส่องกล่องแต่ละใบ

สำหรับเครื่องเล่น ijigg การย่อขนาดตัวเล่นเสียง ijigg ให้ลบพารามิเตอร์ scale='noscale' ทิ้งไปเลย และการปิดเล่นอัตโนมัติให้เปลี่ยนค่า Autoplay='1' เป็น 0 ซะในส่วนนี้มีสองจุด ลองมองหากันเอาเองนะครับ

ข้อดีของการแต่งเฮดบล็อกในรูปแบบนี้ก็คือ มันจะถูกอ่านในทุกๆหน้าบล็อกของเรา จึงเหมาะสำหรับใช้เป็นข้อความทักทาย, เอาไว้โชว์ของ, ทำเป็น Index(มันขึ้นแน่ๆทุกหน้า) โชว์ลิงค์ไปยังหน้าบล็อกที่อยากให้ผู้เข้าชมบล็อกของเราเข้าไปอ่าน เนื่องจากมันจะสะดุดตากว่าส่วนไซด์บาร์ ส่วนการประยุกต์นอกเหนือไปจากนี้ ก็แล้วแต่ท่านๆกันแล้วนะครับ พื้นฐานมันก็มีเท่านี้เอง

ถ้ามีปัญหาทำแล้วเจ๊งบล็อกเน่า สอบถามเข้ามาได้ครับ