วิธีง่ายๆ เติมอีก 4 Column ที่ด้านล่างของบล็อก

 

 

 

4 column footer

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

 

วิธีติดตั้งไม่ซับซ้อนครับ

 

ขั้นที่ 1 ไปที่แผงควบคุม >>รูปแบบ >> แก้ไข HTML  >> ค้นหาโค้ด


]]></b:skin>

แล้ววางโค้ดต่อไปนี้ไว้ข้างบน



/* 4 COLUMN FOOTER DESIGN by HACKUBLOG */


#footer-wrapper {
width: 965px;
background: #909090;
margin: 0px auto 0px;
padding: 0px;
border-top: 2px solid #000000;
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 */
}
#footer1 {
width: 220px;
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #FFFFFF;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer2 {
width: 220px;
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #FFFFFF;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer3 {
width: 220px;
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #FFFFFF;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer4 {
width: 215px;
float: right;
margin: 5px;
padding: 5px;
text-align: left;
background: #FFFFFF;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
    }

#footer1 li, #footer2 li, #footer3 li, #footer4 li {list-style-type: none;
border-bottom: 1px dotted #9a9a9a;
margin-left: 3px;
margin-right: 3px;}


ขั้นที่ 2 เป็นขั้นตอนการระบุตำแหน่งด้วย HTML โดย ค้นหาโค้ด



<div id='footer-wrapper'>


แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว


<div id='footer1'>
<b:section class='footer-1' id='footer-1' showaddelement='yes'/>
</div>

<div id='footer2'>
<b:section class='footer-2' id='footer-2' showaddelement='yes'/>
</div>

<div id='footer3'>
<b:section class='footer-3' id='footer-3' showaddelement='yes'/>
</div>

<div id='footer4'>
<b:section class='footer-4' id='footer-4' showaddelement='yes'/>
</div>


บันทึกแม่แบบ และลุยเพิ่ม Gadget ได้ตามใจชอบเลยครับผม



4 column footer2

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

  1. ผมลองทำแล้วอันที่อยู่ขวามือสุดมันร่วงลงมาด้านล่างอะครับ

  1. ลองปรับความกว้างแล้วครับตอนนี้ได้เรียบร้อยแล้วขอบคุณมากครับ

  1. @ ภัทรพงษ์ : อ๋อครับ ต้องปรับความกว้างครับ ภัทรพงษ์เก่งขึ้นมากแล้วนะครับเนี่ย!

  1. โอ้วแจ๋มไปเลย เพิ่มเยอะกว่านี้

  1. หาโค๊ดขั้นที่สองไม่เจออะ

  1. หาโค๊ดที่ 2 ไม่เจอเหมือนกัน

  1. ถ้าเป็นแม่แบบรุ่นใหม่หรือแม่แบบที่หาไม่เจอช่วยแจ้ง url บล็อกมาเลยครับจะช่วยดูให้

  1. หาโคดที่2ไม่เจอเหมือนกันค่ะ

    www.cakecarrot.blogspot.com รบกวนด้วยนะคะ

  1. หาโค๊ดที่ ๒ ไม่เจอค่ะ
    http://krubusarakorn.blogspot.com/
    รบกวนด้วยนะคะ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ

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

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

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