สวัสดีครับทุกท่าน
เอาเคล็ดลับเทคนิคมาเผยกันให้ดูเป็นส่วนๆ ในบล็อกมิสเตอร์ช่วย
แห่งนี้นะครับ เผื่อท่านใดอยากจะเอาไปปรับตกแต่งกันเล่นๆ
ปรับปรุงใหม่นะครับ
เพื่อให้เข้ากับภาพตอนนี้นะครับ
ในส่วนแรกจะแนะนำในเรื่องของการตกแต่งบล็อกและจัดรูปแบบก่อนนะครับ
- ส่วนแรกที่เรียกว่า title
หมายถึงส่วนที่อยู่ในด้านบนที่มีภาพภูเขา(ภูเขาชุมทองข้างบ้านผมเองครับ)
นะครับ พร้อมมีชื่อบันทึกของเราอยู่นะครับ
โดยคุณสามารถเปลี่ยนที่อยู่ของภาพด้วยนะครับ บริเวณลิงก์นั้นนะครับ
และกำหนดความสูง ที่ height นะครับ ว่าจะเท่ากับกี่ px
ให้เหมาะกับภาพของเรานะครับ ตัวสีของชือบันทึก นั่นคือสีน้ำเงิน
color:#0000FF;
div#title{
padding: 20px 8px 35px;
font-size:
xx-large;
color:#0000FF;
background:#000000;
background-image:url("http://www.schuai.net/gotoknow/homeheader2sm.jpg");
background-repeat:no-repeat;
background-position:center top;
height:180px;
}
div#title span {display:none;}
- ส่วนที่สอง คือ subtitle อันนี้เป็นส่วนที่แสดงชื่อของเรา
นะครับ ในบล็อกนี้ ก็คือส่วนที่แสดงว่า เม้ง
สมพร ช่วยอารีย์ ---------> http://www.somporn.net
นั่นเองครับ ตรงนี้คุณก็สามารถกำหนดพื้นหลังได้เช่นกันนะครับ
จะเห็นว่าผมจัดชื่อเอาไว้ให้อยูตรงกลาง ซึ่งเป็นไปตามบรรทัด
text-align: center;
หากท่านจะจัดให้อยู่ซ้ายปกติ ไม่ต้องใส่บรรทัดนี้ หรือแทน center
ด้วยคำว่า left ก็ได้ครับ ตรงนี้ผมใส่กรอบเข้าไปด้วยนะครับ
เป็นเส้นประ ด้วยบรรทัด นี้นะครับ border-bottom: 2px solid
#F9F2EC;
หากไม่ต้องการก็ลบบรรทัดนี้ทิ้งได้นะครับ
div#subtitle {
font-size: 1.5em;
color: #000088;
background: #338833;
background-image: url("http://www.schuai.net/gotoknow/grass.jpg");
background-repeat:repeat;
background-position:left top;
padding: 2px;
border-bottom: 2px solid #F9F2EC;
text-align: center;
}
- ส่วนที่สามคือที่เรียกว่า ribbon เป็นส่วนที่เป็นเมนู เรียกว่า
pull-down เมนู ซึ่งประกอบไปด้วย
เส้นทางหลัก
ค้นหา และชื่อของเรา
ในส่วนนี้เราสามารถที่จะใส่พื้นหลังได้ด้วยเช่นกันครับ
ตลอดจนการใส่พื้นหลังในเมนูด้วยนะครับ
- การใส่พื้นหลังของชุดนี้ทำได้ง่ายๆ ดังนี้
div#ribbon {
padding: 2px 2px;
color: #0000FF;
background: #338833;
background-image: url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
position: relative;
clear: both;
z-index: 970;
}
- และท่านสามารถจะใส่พื้นหลังลงไปในแถบเมนูได้เช่นกันนะครับ
โดยส่วนเมนูนี้จะเรียกว่า ul#user-menu
ul โดยใส่ชุดนี้ลงไปนะครับ
ul#user-menu ul {
padding: 3px 4px;
color: #0000FF;
background: #338833;
background-image: url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
position: relative;
clear: both;
z-index: 970;
}
- ส่วนที่สี่คือส่วนที่เป็น navigation คือชุดของ
home / blog / mrschuai ตรงนี้ก็สามารถที่จะกำหนดพื้นหลังได้เช่นกันนะครับ
แต่พื้นหลังตรงนี้ จะไปนำพื้นหลังของส่วนที่เป็น พื้นหลังที่รองรับ
ในส่วนใหญ่มาใช้ คือส่วนที่เรียกว่า page ซึ่งเราไม่ต้องใส่ก็ได้ครับ
โดยพื้นหลังในส่วนของ page จะกล่าวต่อไป
โดยจะมีผลต่อพื้นหลังตรงนี้ให้อัตโนมัติเลยครับ ดังนั้นส่วนนี้
เราไม่ต้องจัดการก็ได้ครับ
- ส่วนที่สี่ คือส่วนที่เรียกว่า
feed จะอยู่ด้านล่างของหน้านะครับ ในบล็อกนี้ก็คือ มิสเตอร์ช่วย นั่นเองครับ
div#feed {
font-size: 0.8em;
clear: both;
background: #338833;
background-image: url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
border-bottom: 4px solid #F9F2EC;
padding: 2px 4px;
position: relative;
z-index: 970;
}
- ส่วนต่อไปนี้ เป็นการจัดเรียงรูปแบบของการวางเมนู
รูปภาพและส่วนของเนื้อหานะครับ
ว่าจะจัดวางให้อยู่ทางซ้ายเป็นเมนูและทางขวาเป็นเนื้อหา
โดยค่าเริ่มต้นของบล็อกจะจัดให้ส่วนของเมนูหรือรูปภาพอยู่ทางด้านขวาและเนื้อหาทางด้านซ้ายนะครับ หากคุณไม่ต้องการปรับเปลี่ยนก็
เอาไว้คงเดิมแต่ท่านสามารถที่จะทำขยายหน้าเนื้อหาและเมนูให้เต็มหน้า
เต็มจอของหน้าต่างได้นะครับ มาทำความรู้จักส่วนย่อยๆ
กันในตรงนี้ก่อนเลยนะครับ
ส่วนแรกที่เรากำหนดคือ page-wrapper อันนี้ใช้วิธีการกำหนดเป็น %
แทนนะครับ ก็กำหนดไปเลย 100% ให้มันเต็มพื้นที่ไปเลยครับ
โดยที่ใน page-wrapper
นี้จะมีส่วนที่ชื่อว่า page บรรจุอยู่ครับ
ซึ่งเราตั้งค่าไว้ให้มีความกว้างเป็น 99%
นั่นคือมันจะกว้างตามที่หน้าต่างเปิดอยู่ในตอนนี้
โดยเว้นระยะขอบทิ้งไป 1% ครับ
div#page-wrapper {
float: left;
width:
100%;
text-align: center;
}
สำหรับการปรับปรุงครั้งล่าสุดของ GotoKnow
อาจจะทำให้คนที่ใช้ IE6 ในการเปิดบล็อกอาจจะเจอปัญหา
ดังนั้นผมแนะนำให้กำหนดความกว้างเป็นขนาดจำนวนพิกเซล แทนนะครับ
ดังนั้น แนะนำให้แทนที่
width:
100%; เป็น width:
1000px;
div#page {
background: #00CCEE;
border: solid 1px
#00057C;
border-bottom: solid 2px
#00057C;
width:
99%;
background-image: url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
text-align: left;
margin-left: auto;
margin-right: auto;
}
สำหรับ IE6
ผมแนะนำใหม่เพื่อแก้ปัญหาตอนนี้คือ ให้กำหนดส่วน
นี้ซึ่งจะรวมทั้งส่วนของเมนูและส่วนของเนื้อหาทั้งสองคอลัมน์
โดยกำหนดให้เป็น
width:
99%; เป็น width:
990px;
ส่วนที่สองใน div#page
นี้ประกอบไปด้วยสองส่วนสำคัญนะครับ คือ ส่วนที่เป็น เมนูด้านซ้ายมือ
นี้ เรียกว่า sidebar2 โดยถูกกำหนดให้ลอยอยู่ทางด้านซ้าย float : left
(ตรงนี้นั่นเองที่บังคับให้เมนูลอยอยู่ด้านซ้ายมือ)
โดยมีความกว้างเป็น 26% ของความกว้างของหน้าต่างในขณะนี้
และในส่วนเนื้อหามีชื่อว่า content2
ตรงนี้เราก็บังคับให้ลอยอยู่ทางด้านขวา float: right
โดยมีความกว้างเป็น 72% ของความกว้างของหน้าต่าง จะเห็นว่า
รวมกันสองส่วน 26% + 72% = 98% แล้ว 2% หายไปไหน 2%
นี้เหลือเอาไว้คั่นระหว่างสองส่วนซ้ายขวานั่นเองครับ (หมายเหตุ
หากคุณใส่ส่วนด้านบนที่เป็น main
ก็ควรจะมีส่วนด้านล่างต่อไปนี้ด้วยนะครับ คือ sidebar2, content2)
div#sidebar2 {
float: left;
width: 26%;
background-image: url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
}
กำหนดส่วนนี้ให้มีความกว้างใหม่เป็น
width: 26%; เป็น
width: 260px;
div#content2 {
float: right;
width:
72%;
background-image:
url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat;
background-position:right top;
}
กำหนดส่วนนี้
content2 ให้มีความกว้างใหม่เป็น
width: 72%; เป็น
width: 700px; เพื่อให้มีช่องว่าระหว่างสองคอลัมน์ประมาณ 20 pixels
นะครับ
- ส่วนต่อมาเป็นส่วนที่อยู่ล่างสุดของหน้าบล็อกชื่อว่า footer
ในบล็อกนี้ก็เป็น ส่วนที่เป็นพื้นหญ้าสีเขียวนั่นเองครับ
ท่านสามารถใส่พื้นหลังได้นะครับ
div#footer {
font-size: 0.8em;
clear: both;
color: #0000FF;
background:#338833;
background-image: url("http://www.schuai.net/gotoknow/grassbg.jpg");
background-repeat:repeat;
background-position:right top;
}
- ต่อไปเป็นส่วนที่ตกแต่งในหน้าต่าง pop-up
ตอนจะเพิ่มความเห็นนะครับ ที่เรียกว่า form นั่นเองนะครับ
form{
border: medium double #5EA2FF;
background-image:url("http://www.schuai.net/gotoknow/greenbg6.jpg");
background-repeat:repeat;
}
- ส่วนต่อมาเป็นส่วนที่ตกแต่งข้อความเห็นในแต่ละบทความนะครับ
สามารถกำหนดสีและใส่พื้นหลังได้เช่นกันนะครับ
div.comment_item {
border: dashed 2px #00CCEE;
background-image:url("http://www.schuai.net/gotoknow/woodbg.jpg");
background-repeat:repeat
}
- ส่วนต่อมาเป็นโค้ดตกแต่งบริเวณภาพประวัติของท่านนะครับ
div.picture {
margin: 0px;
padding: 2px;
border: 2px dashed #0000EE;
background-image:url("http://www.schuai.net/gotoknow/grassbg.jpg");
background-repeat:no-repeat;
}
-
ตรงนี้เป็นโค้ดในส่วนการเพิ่มข้อความเห็นของแต่ละบทความนะครับ
div.comment_greeting {
text-align: center;
padding: 10px;
border: 2px dashed #0000EE;
background-image:url("http://www.schuai.net/gotoknow/grassbg.jpg");
background-repeat:repeat;
}
- มาถึงตรงนี้ ก็ได้เล่นไปหลายๆ ส่วนในการตกแต่งบล็อกแล้วใช่ไหมครับ
ถูกใจอันไหน ก็ไปเพิ่มได้เลยนะครับ
หรือจะลองเอาไปใส่ทุกส่วนก็ได้นะครับ copy ไปวางต่อๆ
เรียงกันตามลำดับได้เลยนะครับ
- หมายเหตุ การกำหนดค่าสีในบล็อกนี้ เป็นดังนี้นะครับ
ค่าสี (%):
|
66 |
ค่าความเข้มสี (%):
|
0 |
- สำหรับการตกแต่งธีมนี้นะครับ
คุณสามารถไปตกแต่งใน Profile ของคุณได้เลยนะครับ
ซึ่งมันจะไปเป็นค่าเริ่มต้นของบล็อกต่างๆ ของคุณเองโดยอัตโนมัติ
โดยที่เราไม่ต้องไปตกแต่งในบล็อกนั้นๆ นะครับ เว้นแต่จะตกแต่งส่วนหัว
title นะครับ
- ขอให้สนุกนะคับ
--------------------------------------------------------------------------------------
- ส่วนต่อไปนี้จะเป็นส่วนของ แก้ไขบล็อกนะครับ
- ส่วนต่อไปเป็นการตกแต่งเสียงต้อนรับนะครับ
ในบล็อกนี้ท่านจะได้ยินเสียงยินดีต้อนรับ ซึ่งเป็นไฟล์เสียงสกุล .wav
นะครับ โดยมีขนาดแฟ้มไม่ถึง 50Kb หากท่านทำได้ยิ่งเล็กก็ยิ่งดีครับ
จะได้ไม่ใหญ่และช้าในการดึงข้อมูลนะครับ สำหรับ HTML Code
ที่ใส่เสียงต้อนรับ มีดังนี้นะครับ
<bgsound
src="http://www.schuai.net/gotoknow/welcome2.wav"
loop=1>
โดยคุณสามารถจะอัดเสียงคุณเข้าไปเป็นช่วงสั้นๆ แล้วบันทึกเป็น
welcome.wav ก็ได้นะครับ แล้วนำไฟล์ขึ้นเหมือนรูปภาพทั่วไป
แล้วแทนที่อยู่ของเสียงตามลิงก์ที่ปรากฏของไฟล์นั่น
แล้วคุณก็แทนที่ลิงก์ด้านบนนั้นได้เลยนะครับ
- สำหรับเพลงประกอบ ในบล็อกนี้เป็นเสียงดนตรีสกุล .wav
เช่นกันนะครับ ซึ่งก็เป็นท่อนสั้นๆ
ของดนตรีบรรเลงกรีนมิวสิคของคุณจำรัส นะครับ โดยมี HTML Code
ดังนี้ครับ
<bgsound
src="http://www.schuai.net/index.wav"
loop="infinite">
สำหรับ code นี้จะเห็นว่าเรากำหนด loop="infinite"
นั่นคือให้วนเล่นซ้ำๆ ไปเรื่อยๆ เพลินๆ นะครับ
ซึ่งต่างจากเสียงต้อนรับมีการเล่นเพียงครั้งเดียวคือ loop=1
นั่นเองครับ
- สำหรับเพลงอื่นสกุล .wma, .mp3 และอื่นๆ คุณสามารถเขียน html code
ได้เป็น
<EMBED
src=http://www.budpage.com/bmu06.wma
width=240 height=67 autostart="true" loop="true"
volume="200"></EMBED>
คุณก็แทนที่ลิงก์ด้านบนด้วยไฟล์ที่คุณเอาขึ้นเก็บไว้ใน gotoknow
นะครับ
หรือว่าลิงก์เพลงอื่นที่มีแจกบริการให้ฟังทางเนทก็ได้นะครับที่ชี้ไปยังไฟล์นั้นโดยตรงนะครับ
-----------------------------------------------------------------------------------
- เหนื่อยไหมครับ หวังว่าท่านคงสนุกในการตกแต่งนะครับ
เผื่อผมจะได้มีโอกาสได้ยินเสียงต้อนรับเป็นภาษาต่างๆ
หรือภาษาถิ่นที่คุณอยู่กันด้วยเช่น ชาวเหนือ อีสาน กลาง ออก ตก ใต้
ต่างประเทศนะครับ อิๆๆ
- สำหรับลิงก์ต่างๆ
คุณเปลี่ยนแปลงได้นะครับตามที่ต้องการที่คุณเก็บภาพของคุณได้นะครับ
ดังนั้น ที่ได้บอกเล่าเป็นส่วนๆ
จะเป็นการเปิดโอกาสให้คุณตกแต่งในส่วนต่างๆ
เป็นภาพและมีเอกลักษณ์เป็นบล็อกของตัวเองได้นะครับ
ส่วนใดที่ท่านสนใจนำไปใช้ในบล็อกนี้ก็ใช้ได้เลยนะครับ
- สำหรับที่อยู่ของลิงก์ภาพ เพลง และอื่นๆ
แนะนำให้เก็บไว้ที่เดียวกันใน gotoknow เลยนะครับ
สำหรับตัวอย่างของผมด้านบนนั้น ผมจะเก็บไว้ในเว็บ schuai.net
ซึ่งสะดวกในการใช้งานสำหรับผมเองครับ
หากท่านจะใช้ร่วมกันก็ตามสบายเลยนะครับ
- ขอให้สนุกนะครับ หากไม่มั่นใจตรงไหนก็เขียนถามไว้ได้นะครับ
อาจจะมีผู้รู้ท่านอื่นๆ มาช่วยกันแนะนำนะครับ
ขอให้สนุกและขอบพระคุณมากนะครับ
เม้ง สมพร ช่วยอารีย์