สวัสดีครับทุกท่าน

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

ปรับปรุงใหม่นะครับ เพื่อให้เข้ากับภาพตอนนี้นะครับ

ในส่วนแรกจะแนะนำในเรื่องของการตกแต่งบล็อกและจัดรูปแบบก่อนนะครับ

  • ส่วนแรกที่เรียกว่า 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 จะอยู่ด้านล่างของหน้านะครับ ในบล็อกนี้ก็คือ Rss20 มิสเตอร์ช่วย นั่นเองครับ 


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 ซึ่งสะดวกในการใช้งานสำหรับผมเองครับ หากท่านจะใช้ร่วมกันก็ตามสบายเลยนะครับ
  • ขอให้สนุกนะครับ หากไม่มั่นใจตรงไหนก็เขียนถามไว้ได้นะครับ อาจจะมีผู้รู้ท่านอื่นๆ มาช่วยกันแนะนำนะครับ

ขอให้สนุกและขอบพระคุณมากนะครับ

เม้ง สมพร ช่วยอารีย์