• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

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

ก็ดูเก๋ไปอีกแบบนึง วิธีในการทำก็ไม่ยากอะไรเลยครับ ถ้าหากคุณมีความสามารถที่จะแปะ 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(มันขึ้นแน่ๆทุกหน้า) โชว์ลิงค์ไปยังหน้าบล็อกที่อยากให้ผู้เข้าชมบล็อกของเราเข้าไปอ่าน เนื่องจากมันจะสะดุดตากว่าส่วนไซด์บาร์ ส่วนการประยุกต์นอกเหนือไปจากนี้ ก็แล้วแต่ท่านๆกันแล้วนะครับ พื้นฐานมันก็มีเท่านี้เอง

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

Comment

Comment:

Tweet

#61 By (180.183.192.19|180.183.192.19) on 2014-04-10 13:09

หาเจอแล้ว ขอบคุณมากครับ Hot!
สงสัยมานานแล้วว่าเค้าทำกันยังไง confused smile

#60 By Komuri on 2011-12-25 16:33

ท่าจะยากนะค้ะ แต่ก็จะพยายามค่ะconfused smile

#59 By Princess Annie on 2011-10-06 13:31

ขอบคุณสำหรับความรู้ดีๆนะคะ

ว่างๆจะลองทำดูค่ะ ขออนุญาติแอดบล็อคนะคะbig smile

#58 By PiNK on 2011-10-05 11:09

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

#56 By tongthonyim on 2011-08-02 23:48

ขอบคุณมากนะคะ อยากทำบล็อกเป็นมาเลยอ่ะ แต่งงมากกกกกกกกก ฮ่าๆๆๆ ทำไม่เปนเลย กะว่าจะลบแล้งเปิดใหม่อ่ะค่ะ แต่ไม่อยากละความพยายาม จะลองสู้อีกตั้งนะคะ ^__^

#55 By FTtreasure on 2011-06-24 10:20

ขอบคุณมากๆค่ะcry

#54 By IMMorTal on 2011-05-03 00:06

*0* แอดไปนะฮะ ^^ Hot! Hot! Hot!

#53 By POON (' ') on 2011-03-09 15:08

ยากจัง แต่จะพยายามทำความเข้าใจค่ะ

ขอบคุณมาก Hot!

ปล.แมวน่ารักมากเลยbig smile

#52 By kunnaiishim on 2010-12-15 08:15

ขอบคุนค่ะ
Hot! arigatou
โอ้ว ใช่เลยกำลังหาวิธีแต่ง blog ใหม่ๆอยู่ ขอบคุณมากคร้าบ

#49 By Cosbit on 2010-10-19 21:06

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

เราอยากมีบล็อกเป็นของตัวเองมากๆเลยนะคะbig smile
แต่ว่าแต่งบล็อกไม่เป็น ตอนนี้จึงได้ศึกษาดูแต่ลบล็อก
ที่เราคิดว่าน่าสนใจ แล้วชอบเองด้วย
เอนทรีนี้นับว่า เป็นประโยชน์กับเรามากเลยค่ะ


เป็นว่ามีบล็อกเมื่อไหร่ จะspecial thank you แน่นอนค่ะ
big smile big smile

#48 By pamskinchang (222.123.191.93) on 2010-08-30 12:33

ขอบคุณสำหรับวิธีทำค่ะHot!

#47 By G-ROZBER on 2010-07-20 21:01

Hot! Hot!

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

#46 By ★Alice'One:)) on 2010-07-11 17:29

Hot! งือๆๆ นู๋งงง่ะ
ขอบคุณมากค่ะbig smile

#44 By buta เอิ๊กกก on 2010-05-23 16:28

ทำไมได้คับผม งงมาก
<div><object width="315" height="80"><param name="movie" value="http://www.ijigg.com/jiggPlayer.swf?songID=V240EGBP0&Autoplay=0"><param name="scale" value="noscale" /><param name="wmode" value="transparent"><embed src="http://www.ijigg.com/jiggPlayer.swf?Autoplay=0&songID=V240EGBP0" width="315" height="80" scale="noscale" wmode="transparent"></embed></object></div>
ใส่แล้วมันไปขึ้นว่า your code here ตรงหน้าแรกมไ่มีอะไรขึ้นมาเลย

#43 By Download on 2010-04-24 01:31

สุดยอดค่ะwink
ขอบคุณมากนะคะ
Hot!

#42 By -DeminA- on 2010-04-10 13:41

เจ๋งมากเลยค่ะ จขบ. *O*
ว่าจะลองทำบ้างซะแล้ว
อยากลองเปลี่ยนบรรยากาศให้บล็อคดูบ้าง
เผื่อจะทำได้สวยๆ อย่าง จขบ. นะคะ >_<

ขอบคุณมากค่ะ
Hot! Hot! Hot! Hot! Hot!
มึนจนหัวจะระเบิดอยู่แล้วครับ

ทำแล้วเละตุ้มเป๊ะ

#40 By -•ท๊อฟจัง•- on 2010-03-16 21:44

ขอบคุณมากครับ
ขอ add ไว้นะครับ เป็นประโยชน์มากยามว่าง confused smile Hot! Hot! Hot!

#39 By Kunizan on 2010-02-07 17:30

ขอบคุณครับ
ขอบคุณมากมาย

#37 By Jaijaishop on 2010-01-29 22:58

Hot! จะลองไปทำดูค่ะ ได้ความรู้เยอะแยะเลยค่ะ

ขอบคุณมากๆค่ะbig smile

#36 By Walk-In Closet Shop on 2010-01-14 14:48

สุดยอดฮะ

ชอบอะ จะพยยามลองทำดูนะฮะ ขอบคุณมาก

#35 By Keep On Smiling on 2009-11-27 12:52

ยังออกเเนวมึนยุเรย ยย ย

TT*

#34 By ยัยต๊อ งง !! ^O^ on 2009-11-07 16:56

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

#33 By *CherchezzZ* on 2009-10-07 04:03

เยี่ยมเลยค่ะ!!

ขอบคุณมาก ^/\^

#32 By —•dongseng•— on 2009-09-13 12:57

แวะเข้ามาศึกษาขอความรู้นะคะ surprised smile
ขอบคุณสำหรับ Entry ดีๆ แบบนี้ค่ะ

เป็นมือใหม่หัดทำบล๊อคได้อาศัยบล๊อคของคุณและของเพื่อนๆ ท่านอื่นที่แนะนำเป็นวิทยาทานทำนู่นนี่

Hot! Hot! Hot! Hot! Hot! ให้ห้าดาวย้อนหลังนะคะ เพื่อเป็นการขอบคุณและให้กำลังใจคนเขียนบล๊อคดีๆ ค่ะ surprised smile

#31 By MaM@n on 2009-05-09 14:15

ขอบคุณค่า

#30 By MayMae on 2009-05-05 12:09

ขอบคุณนะคะ ที่แนะนำการแต่งบลอก

กำลังหาวิธีแต่งอยู่ ทำไม่ค่อยเป็นน่ะค่ะ เดี๋ยวจะลองไปทำดูนะคะ^^

#29 By ^^ (124.121.166.154) on 2009-03-11 11:14

แอบมาอ่านนานแล้ว
ยังไม่ได้คอมเม้นต์ขอบคุณซะที
ลองทำตามแล้วล่ะค่ะ ^^; ออกมาพอดูได้ 55+ แต่พอดีบล็อกมันกล้างเกินขนาดปกติ เลยใช้วิธีขี้โกง (แอบใช้ดรีม8ทำตาราง 55+)

ขอแอด Fav.นะคะ บล็อกสวย แถมเนื้อหาน่าอ่านด้วย

confused smile

#28 By HeDw!g on 2008-10-30 19:41

ขอบคุณมากนะคะ มาช้าดีกว่าไม่มานะเนี๊ยะsad smile

พอดีพึ่งย้ายบ้านใหม่ มีปัญหาเรื่องอินเตอร์เน๊ตนิดหน่อย พึ่งได้เล่นวันนี้เอง

ขอบคุณมากนะคะ ทำเสร็จแล้วจะเรียกไปตรวจนะคะ



Hot!

#27 By ::housewife:: on 2008-10-23 16:20

จำลองเอาไปใช้มั่งนะ

#26 By fenfang on 2008-10-14 16:59

เพิ่งจะรู้ค่ะว่าทำได้ wink

#24 By RIKO~Y on 2008-10-12 01:16

กำลังคิดจะทำธีมใหม่อยู่เลย พอได้มาเจอเอนทรีนี้ "แหล่มมากๆ" confused smile
ขอบคุณสำหรับเทคนิคดีๆ นะครับ จะลองไปใช้ดูsurprised smile

#23 By vvitch on 2008-10-05 11:32

เด๋วเอาไปทำมั้งดีกว่า เยี่ยมไปเลย

#22 By Nanni3 on 2008-10-02 01:23

ทำได้แล้วค่ะ เหลือตกแต่งอีกเยอะเลย ขอบคุณมากนะคะcry

#21 By Juro on 2008-10-01 05:51

เห็นแล้วอยากจะร้องดังๆ
บล็อคไฮโซมาก

ปล.พี่บอกว่าม.4พี่ได้แค่ 2กว่าๆเนี่ย เค้ายอมนะถ้าฝีมือเทพแบบนี้ โอ้ว ยอดมากจอร์จ
Hot! Hot! Hot! Hot! Hot!

#20 By KPP on 2008-09-30 22:14

Hot! Hot! Hot! big smile

#19 By Meowzilla Zilla on 2008-09-29 11:45

น่าสนใจค่า
เดี๋ยวหลังสอบจะลองทำมั่ง ขอบคุณนะคะ

#18 By Bluemoon on 2008-09-28 22:11

Hot! Hot! Hot!
ขอบคุณสำหรับความรู้ดีๆนะค่ะconfused smile

#17 By Wu ! on 2008-09-28 21:30

กำลังคิดอยู่ค่ะเรื่องแต่ง neck เนี่ย แต่ยังคิดไม่ตก sad smile
ขอบคุณที่แนะนำนะคะ Hot!

ปล. หายไปหลายวัน กลับมาเห็นถ้วยกาแฟเปลี๊ยนไป๋ ดีขึ้นจริงๆ ค่ะ บล็อคเลิศจริงๆ open-mounthed smile
Hot! Hot! Hot! Hot! ให้แบบไม่มีกั๊ก ไว้จะลองทำดูค่ะ แหะๆ เผื่อบลอกตัวเองจะดีขึ้นกว่านี้ เหอๆ ขอบคุณมากค่า

#15 By Juro on 2008-09-28 19:24

Hot! Hot! ขออ่านซ้ำหลายๆรอบ จะทำมั่ง เย่ เย่ ขอบคุณค่า

#14 By (^_^)/nana on 2008-09-28 19:00

อ้อ คราวนี้คงยัดอะไรลงไปได้อีกหลายโซนทีเดียวconfused smile

#13 By on 2008-09-28 17:47

Hot! Hot! Hot!

สุดยอดมากกกก ขอบคุณนะคะ cry

#12 By Nisa ,, on 2008-09-28 14:13