รู้จักกับโครงร่างของโค้ด Template ใน Blogger

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

สอนทำบล็อก


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



อธิบายภาพรวมของโค้ด

โค้ดของแต่ละ template นั้นจะมีโครงร่างดังนี้


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

#outer-wrapper { … }
#header-wrapper{ … }
#content-wrapper{ … }  
#main-wrapper{ … }
#sidebar-wrapper{ … }
#footer-wrapper{ …. }
 
]]></b:skin>

</head>

<body>

<div id='outer-wrapper'>
        <div id='header-wrapper'>
                               ...
        </div>

        <div id='content-wrapper'>
               <div id='main-wrapper'>
                               ...
               </div>

               <div id='sidebar-wrapper'>
                              ...
               </div>

       </div>
      
       <div id='footer-wrapper'>
                              ...
       </div>


</div>

</body>
</html>


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




อธิบายโค้ดทีละส่วน


1. โค้ด #outer-wrapper  นั้นเป็นส่วนที่กำหนดขนาดของ template ทั้งหมด ซึ่งปัจุบันนิยมกำหนดอยู่ในช่วง 960–1000px เช่น

#outer-wrapper {
width:980px;
margin:0 auto;
padding:10px;
text-align:left;
font-size:100%;
font-family:Lucida Sans Unicode,Arial,inherit;
}


เมื่อกำหนดขนาดแล้ว การเรียก HTML ก็จะวางโค้ดในส่วน <body> และคลุมโค้ดในส่วนอื่นๆ (ดูในโค้ดภาพรวมข้างบน) ซึ่งเมื่อเรียกโค้ด outer-wrapper ก็จะมีลักษณะดังนี้

<body>
<div id='outer-wrapper'>
ใส่โค้ดขององค์ประกอบอื่น ๆ ในตำแหน่งนี้
</div>
</body>



หมายเหตุ บาง Template อาจจะใช้โค้ดที่ชื่อว่า #container แทน



2. โค้ด #header-wrapper  เป็นโค้ดบรรจุโลโก้ ชื่อของบล็อก หรือ Search box เข้าไปด้วย การกำหนดขนาดจะต้องกำหนดขนาดให้ไม่เกินขนาดของ #outer-wrapper เช่น

#header-wrapper  {
  width:980px;
  margin:0 auto 10px;
  }


เมื่อกำหนดขนาดแล้ว การเรียก HTML ก็จะวางโค้ดในส่วน <body> และถัดจาก <div id='outer-wrapper'> เช่น

<body>
<div id='outer-wrapper'>
      <div id='header-wrapper'>
     
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
       <b:widget id='Header1' locked='true' title='Hackublog (ส่วนหัว)' type='Header'/>
       </b:section>

      </div>

ใส่โค้ดขององค์ประกอบอื่น ๆ ในตำแหน่งนี้
</div>
</body>




3. โค้ด #content-wrapper เป็นโค้ดส่วนที่บรรจุ main-wrapper และ sidebar-wrapper (ดูรูป) ซึ่งการกำหนดค่าต่าง ๆ ก็ทำได้คล้ายกับ 2 โค้ดที่กล่าวมาแล้ว เช่น

#content-wrapper {
width: 980px;
position: relative;
margin: 60px auto 0;
clear: both;
}


เมื่อกำหนดขนาดแล้ว การเรียก HTML ก็จะวางโค้ดในส่วน <body> ในตำแหน่งที่ได้แสดงไว้ใน การอธิบายภาพรวมของโค้ด



4. โค้ด #main-wrapper เป็นโค้ดที่ใช้กำหนดพื้นที่ ที่แสดงบทความ และกล่อง Comment ซึ่งจะกำหนดได้ไม่เกินความกว้างของ #content-wrapper และจะต้องเหลือพื้นที่ให้ Sidebar ด้วย เช่น

#main-wrapper {
width: 650px;
float: left;
padding-bottom: 40px;
margin-left: 3px;
word-wrap: break-word;
overflow: hidden;
}


การเรียก HTML ก็จะวางโค้ดในส่วน <body> ในตำแหน่งที่ได้แสดงไว้ใน การอธิบายภาพรวมของโค้ด




5. โค้ด #sidebar-wrapper เป็นโค้ดที่กำหนดความกว้างของ sidebar ซึ่งโดยทัวไปนิยมจัดไว้ทางด้านขวาของ template แต่ก็เป็นไปได้ว่าบาง template จะจัดตำแหน่ง sidebar ไว้ทางซ้าย หรืออาจจะมีทั้ง 2 ข้างเลยก็ได้ (กรณี 3 column) เราสามารถกำหนดขนาดของพื้นที่ในส่วนนี้  โดยให้ผลรวมความกว้างของ #sidebar-wrapper กับ #main-wrapper ไม่เกินความกว้างของ #content-wrapper เช่น

#sidebar-wrapper {
width: 300px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


และการเรียก HTML ก็จะวางโค้ดในส่วน <body> ในตำแหน่งที่ได้แสดงไว้ใน การอธิบายภาพรวมของโค้ด

ข้อสังเกต จะเห็นว่า คามกว้างของ #sidebar-wrapper กับ #main-wrapper = 650 + 300 = 950 px จะเหลือความกว้างอีก 40px ซึ่งเราจะต้องเผื่อความกว้างสำหรับค่า margin และ padding ระหว่างองค์ประกอบของหน้าแต่ละส่วน

สอนปรับแต่งและเทคนิควิธีใช้งาน blogger 



6. โค้ด #footer-wrapper จะอยู่ในส่วนท้ายของหน้า ซึ่งจะใช้กำหนดพื้นที่ในส่วนที่ต่อจาก #content-wrapper (ดูรูปแรก) เราจะต้องกำหนดความกว้างไม่เกินความกว้างของ #outer-wrapper เช่น

#footer-wrapper {
  background: #fff;
  width:980px;
  clear:both;
  margin:0 auto 10px;
}


และการวางตำแหน่งของ HTML ดูได้จากการอธิบายภาพรวมของโค้ด

สุดท้ายหวังอย่างยิ่งว่าบทความนี้จะช่วยให้คุณเข้าใจโครงร่างของโค้ดของ template ได้ดีขึ้น ซึ่งจะส่งผลให้คุณสามารถเข้าใจการปรับแต่ง template ให้เป็นสไตล์ของคุณเองได้ดีขึ้น  หากมีข้อสงสัยในการปรับแต่งสอบถามที่กล่อง Comment ใต้บทความนี้ครับ

ตอนนี้มีความคิดเห็น : 22 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ผมอยากทราบวิธีแบ่ง บทความเป็น บล็อกๆ อ่ะครับ ของผมมันแสดงในเมนแรปเปอ ติดๆกันเลยดูไม่สวย

    ขอบคุณล่วงหน้าน่ะครับ

  1. ตอบคุณ iCute

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

    สำหรับแม่แบบที่คุณใช้อยู่ตอนนี้ ต้องแก้อีกมากเลยครับกว่าจะได้อย่างที่ต้องการ เพราะต้อง กำหนด CSS และ HTML ใหม่ ถ้าจะให้ง่าย ผมว่าหาแม่แบบ (Template) ที่กล่องบทความมันแยกกันอยู่แล้วจะง่ายกว่าครับ

  1. ครับขอบคุณมากๆครับ

  1. ขอโทษนะคะ ถ้าจะลบแถบที่มี วันที่โพสต์ข้อความ comment read more อะไรพวกนี้อ่ะค่ะ ต้องไปลบโค้ด HTML ตรงไหนหรอคะ ช่วยหน่อยค่ะ

  1. @ MRTutors
    ต้องขอดูบล็อกด้วยครับ โค้ดแต่ละ Template ไม่เหมือนกันครับ พอจะแจ้งที่ตั้งบล็อกได้หรือไม่ครับ

  1. เว็บนี้ค่ะ http://mrtutors.blogspot.com/

  1. อือ ลืมไปอีกอย่าง ช่อง search ด้วยค่ะ จะไม่ให้หน้าเว็บมี search อ่ะค่ะ

  1. @ MRTutors

    1. ถ้าต้องการลบ search ออก ให้ค้นหาและลบโค้ดต่อไปนี้

    .searchfield {
    -moz-border-radius:20px 20px 20px 20px;
    -webkit-border-radius:20px 20px 20px 20px;
    background:none repeat scroll 0 0 #444444;
    border:1px solid #444444;
    color:#eeeeee;
    font:1em arial,verdana,tahoma,sans-serif;
    margin:0;
    padding:5px 14px;
    }
    และ

    <form action='/search' id='searchthis' method='get' style='display:inline;'>
    <fieldset>
    <input class='searchfield' name='q' size='23' type='text'/>
    </fieldset>
    </form>

    2. ถ้าต้องการลบวันที่ และข้อความแสดงการ Comment ให้เข้าไปที่ >> รูปแบบ >>องค์ประกอบของหน้า >> คลิกแก้ไขตรงกล่องบทความ >> เอาเครื่องหมายถูกออกจาก สิ่งที่ไม่ต้องการให้แสดง

    3. ผมไม่พบ Read more ในบล็อกของคุณเลยครับ

  1. mrtutors
    แล้วถ้าจะเปลี่ยนช่อง search ไม่ให้ค้นหาบทความในบล็อก เปลี่ยนเป็นค้นหาแบบเดียวกับ google จะได้มั๊ยคะ แล้วถ้าได้ต้องเปลี่ยนเป็นโค้ดยังไงคะ

  1. @ MRTutors

    ใช้วิธีเพิ่ม Gadget 'ช่องค้นหา' จะง่ายที่สุดครับ

  1. ถ้าผมต้องการให้เวลาคลิ๊กที่ชื่อของบทความ กับ อ่านเพิ่มเติม เป็นการเปิดอีกหน้าต่าง ไม่ทับกับหน้าเดิม สามารถทำได้มั๊ยครับ

  1. ผมหาไม่เจอซักอันเลยครับอะครับ ช่วยดูให้ทีหน่อยนะครับ ผมงง มากเลย

    อยากจะปรับเปลี่ยนอะไรนิดหน่อย แต่หาโค๊ดไม่เจอเลย ดูให้หน่อยนะครับ

    http://attraction-rich.blogspot.com/

  1. มีเรื่องรบกวนค่ะ
    พอดีบล็อกของหนูมีบล็อกข้อความสองอันอยากทราบว่าจะลบออกอันหนึ่งยังไงค่ะ
    www.noonbum.blogspot.com ชว่ยดูด้วยนะค่ะ
    ขอบคุณค่ะ

  1. @noonbum : ให้ทำแบบนี้นะครับ
    1. ลบ gadget ออกให้หมดครับ แล้ว add เข้าไปใหม่
    2. ถ้าทำตามข้อ 1 แล้วไม่หายก็ให้ upload แม่แบบอันที่ใช้อยู่มาแทนที่อีกครั้งครับ

  1. ขอถามเรื่องโค๊ดหน่อยครับ เราเอาโค๊ดหน้า landing page มาแทรกในบล๊อกเกอร์ได้มั้ยครับ ถ้าได้จะแทรกตรงส่วนไหนครับ

  1. @qaasimar: ให้เอาโค้ด iframe มาแทรกลงในบทความหรือ HTML Gadget ครับผม

  1. อยากเปลี่ยน background ในส่วนของ outer-wrapper ทำไงครับ

  1. ถ้าต้องการให้แสดงแถวละ 3 โพสต์ ต้องไปแก้ตรงใหนครับ

  1. ใส่ BG ตรงส่วน content-wrapper ยังไงอะครับ

  1. จะซ่อนหน้า 3 ทำไงคับ

  1. พี่คัฟ คือผมมีปัญหาเรื่องความยาวของบทความอ่ะคัฟ ถ้าใส่บทความยาวเกินไปบทความก่อนๆมันก็จะไปขึ้นหน้าที่2เลย ตอนนี้เลยอยากรุ้ว่าเราสามารถเพิ่มความยาวให้กับบทความของบล๊อกได้หรือป่าว มันจะได้จัดหน้าได้ถูกต้องและเท่าๆกัน และผมต้องแก้โค้ดตรงไหน ขอความช่วยเหลือหน่อยนะคัฟ

  1. เราโหลดภาพลงแทรกกับบทความ แล้วอยากทำให้ภาพนั้นคลิ๊กไม่ได้ ต้องทำไงครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel