2 วิธีปรับความกว้าง Template ของ Blogger

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

สอนทำบล็อกของ blogger
ในบทความนี้ผมจะลงรายละเอียดในการปรับความกว้างของ Template ให้ตรงกับความต้องการของคุณมากขึ้น ซึ่งในที่นี้จะนำเสนอวิธีการปรับแต่ง Template 2 วิธีดังนี้


วิธีที่ 1 ทำโดยการแก้ไข HTML โดยตรง

ในที่นี้ผมจะยกตัวอย่าง Template ที่ชื่อว่า Minima และสำหรับแม่แบบอื่น ๆ ก็ทำได้คล้ายกัน

เริ่มต้น ให้ Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML และค้นหาโค้ดต่อไปนี้

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

หมายเหตุ บางแม่แบบอาจพบโค้ด

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(....) repeat-y left top;
}

โค้ดที่พบนั้นเป็น CSS โค้ดที่กำหนดความกว้างในส่วนต่าง ๆ ของ Template Minima ซึ่งสามารถขยายความกว้างได้ดังนี้

1.1 การปรับ outer-wrapper : ความกว้างของส่วนนี้จะหมายถึงความกว้างของ Template โดยรวม 

ก่อนปรับความกว้าง

สอนทำบล็อก

หากต้องการให้ความกว้างของส่วนนี้เต็มจอ ควรปรับให้มีขนาด 980px ซึ่งจะได้โค้ดเป็น

#outer-wrapper {
  width: 980px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

หลังปรับความกว้าง

สอนทำบล็อกของ blogger




1.2 การปรับ header-wrapper  : โค้ดส่วนนี้จะเป็นการกำหนดความกว้างของส่วนหัวของบล็อก

ก่อนปรับความกว้าง

สอนแต่งบล็อก

พื้นที่ส่วนนี้มีความกว้างเท่ากับพื้นที่ส่วน outer-wrapper  นั่นคือปรับให้มีความกว้าง 980px ซึ่งจะได้โค้ดเป็น

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
หลังปรับความกว้าง

สอนสร้างบล็อก



1.3 การปรับ main-wrapper : โค้ดส่วนนี้จะเป็นความกว้างของพื้นที่ของบทความ (รวมถึงพื้นที่ส่วน Comment ด้วย)

ก่อนปรับความกว้าง

วิธีทำ blogger

การปรับความกว้างพื้นที่ส่วนนี้ควรปรับไม่ให้เกินความกว้างของส่วน outer-wrapper นั่นคือไม่ให้เกิน  980px และยังคงต้องเผื่อเหลือพื้นที่ให้กับ sidebar-wrapper ด้วย  ในที่นี้ผมใช้ความกว้าง 650 px ซึ่งจะได้โค้ดเป็น

#main-wrapper {
  width: 650px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

หลังปรับความกว้าง

สอน Blogspot




1.4 การปรับ sidebar-wrapper  : เป็นส่วนที่กำหนดความกว้างของ Sidebar ซึ่งในการปรับความกว้างควรปรับให้สัมพันธ์กับส่วน main-wrapper  โดย

sidebar-wrapper + main-wrapper < outer-wrapper 

เช่น ตอนนี้เราได้ปรับส่วน main-wrapper ให้มีความกว้าง 650 แล้ว ความกว้างของ sidebar-wrapper  ควรจะเป็น 300 ถึง 340 px

ในที่นี้ผมให้ความกว้างเป็น 310px เพื่อเหลือพื้นที่ให้กับค่า margin , padding และ border ของ  main-wrapper และ sidebar-wrapper ด้วย (ดูรูป)

สอนสร้าง blogger

ซึ่งเมื่อปรับความกว้างแล้วจะได้โค้ดเป็น   
#sidebar-wrapper {
  width: 310px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
หลังปรับความกว้าง

สอนแต่ง blogger

หมายเหตุ หากเราตั้งค่าความกว้างของ main-wrapper และ sidebar-wrapper ให้มีผลรวมความกว้างเกินกว่า 980px จะทำให้เกิดปัญหา Sidebar ตก (ดูรูป)

โค้ด Template blogger

ซึ่งถ้าเจอปัญหานี้ก็ให้แก้ไขโดยการปรับลดความกว้างให้น้อยลงจนกว่า Sidebar จะไม่ตก 



1.5 การปรับ footer : ความกว้างส่วนนี้ควรมีความกว้างเท่ากับส่วน header-wrapper ซึ่งในที่นี้กว้าง 980px ดังนั้นเมื่อปรับโค้ดแล้วจะได้เป็น
#footer {
  width:980px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

ก่อนปรับความกว้าง

แก้ปัญหา blogger

หลังการปรับความกว้าง
สอนเทคนิคการทำ blogger






วิธีที่ 2 วิธีที่สองนั้นเป็นการใช้เครื่องมือออกแบบแม่แบบของ Blogger ซึ่งคุณสามารถศึกษาได้จากบทความ เครื่องมือสำหรับ “ออกแบบแม่แบบ” ด้วยตนเอง ใหม่! จาก blogger 

สอนแต่ง blogspot


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

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

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

  1. สุดยอดค่ะ อ่านเข้าใจง่าย หามาแยอะแล้วค่ะ ของพี่ใช่เลย ตอนนี้กะลังทำบล็อก ไม่ได้หลับไม่ได้นอนเลยค่ะ ยากใช้ได้เลยทีเดียว แต่สนุกดีค่ะ ชอบ ขอบคุณนะคะ่

  1. @Chat~Tar

    ยินดีมากเลยครับ และขอบคุณที่แวะมาเยี่ยมชมครับ หากมีข้อสงสัยใด ๆ ก็สอบถามกันได้เลยครับผม

  1. ดีมาก และขอบคุณค่ะ

  1. @myredhero

    ด้วยความยินดีครับผม

  1. ขอบคุณมากครับ กำลังหาวิธีการปรับความกว้างอยู่เลยครับ

    ทำตามได้ภายในเวลาไม่ถึง 5 นาทีเลยครับ

  1. ขอบคุณมากๆ ครับ ต้องมาแอบเรียนรู้เรื่อยๆ ฝากตัวด้วยนะครับ

  1. @ คุณ OAT และ คุณ ขุนเขาในเงาน้ำ : ยินดีด้วยครับ ขอบคุณมากที่มาเยี่ยมชมบล็อกเล็ก ๆ แห่งนี้ครับ

  1. ตอนนี้กะลังสร้างบ้านบล็อกอยู่ ขอบคุณมากครับสำหรับความรู้ที่แบ่งปัน เพราะหามาหลายที่แล้ว ของคุณอ่านเข้าใจง่ายดี หน้าเอาไปเขียนเป็นหนังสือรวมเล่มนะครับ ผมว่าขายได้กระจายแน่ๆ

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

  1. รบกวนด้วยครับ ว่ามันใช่โค้ดนี้หรือเปล่าครับ

  1. /* Header
    ----------------------------------------------- */
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0px;
    padding-right: 0px;

    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: 90%;
    }

  1. @ toptentoyou.blogspot.com : ถ้าเป็นแม่แบบรุ่นใหม่ก็ใช้เครื่องมือของ blogger ได้เลยนะครับ ไม่ต้องใช้วิธีนี้ครับ แต่ถ้าเป็นแม่แบบที่ดาวน์โหลดมาติดตั้ง หรือเป็นรุ่นเก่า ขอพี่ดูบล็อกเลยดีกว่าครับ

  1. งง อยู่นาน พอได้พบ ก็ ok ขอบคุณครับ

  1. เริ่ด

  1. ถ้าต้องการแค่ปรับความกว้าง เฉพาะหน้าละคะ ต้องทำอย่างไร
    คืออยากทำไห้หน้าแรกมีพืนที่กว้าง

    และไนบทความสามารถ แทรกแท็บเสริมได้อีกมั้ยคะ

  1. @Kwanruan : ต้องศึกษาจากสองบทความนี้ครับ
    http://www.hackublog.com/2010/05/how-to-create-difference-pgae-on.html
    http://www.hackublog.com/2010/05/different-post-page-on-blogger.html

    อาจจะยุ่งยากสักหน่อยลองอ่านทำความเข้าใจก่อนนะครับ สงสัยก็ถามกันอีกทีครับ
    (เป็นวิธีสำหรับแม่แบบที่ปรับแต่งเองครับ แม่แบบรุ่นใหม่อาจจะใช้โค้ดต่างกัน)

  1. ทำไม่ได้อะคับ

  1. ช่วยดูให้หน่อยได้มั้ยคับ
    pongpanoth07@hotmail.com

  1. ช่วยดูให้หน่อยนะคะ พยายามหาวิธีขยาย ตรงบทความ
    ทำไม่ได้เลยคะ ลองทุกวิธี ที่เขียนมาแล้วอะ

    slidbar ไม่มีคะ
    main มันก็เป็นโค๊ดนี้ ไม่มีเลขให้แก้
    #main-wrapper{overflow:hidden;}
    .clear{clear:both;}
    #blog-pager-newer-link{float:left;}
    #blog-pager-older-link{float:right;}
    #blog-pager{text-align:center;}

    เป็น theme แบบ คอลั่มเดียว
    แต่ช่องบทความดันชิดซ้าย เหลือขวาไว้บานเลย
    อยากขยายให้มันเต็ม จะได้สมดุลกันคะ


    ยังไงรบกวนหน่อยนะคะ
    http://mb-runbot24.blogspot.com/

    maenongmiw@gmail.com

  1. Thanks 4 all

  1. เออ MR.Hack คือ แปป ว่า ที่ ให้ ค้น หา อ่ะ หา ไม่ เจอ อะ ครับ ทำ งัย ดี


    #outer-wrapper {


    #header-wrapper {


    และ ก็ อิก 2 อัน อ่ะ ทำ งัย ดี อ่ะ ครับ

  1. ผม ใช้ แม่แบบ ของ blog ที่ มี สอง ฝั่ง แต่ พอ ทำ เเล้ว ดู ว่า มัน จะ ใหญ่ เกิน ไป เรย ต้อง การ เอา ด้าน ข้าง มา ชิด กับ

    ตรง กลาง


    ทั้ง 2 ด้าน มัน ห่าง อยุ่ ฝั่ง ล่ะ นิด ครึ่ง นิ้ว ได้ มั้ง อ่ะ

  1. เจ๋งครับ อิอิ

  1. ผมค้นหาโค้ดไม่เจออะครับ

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

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

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

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