วิธีง่าย ๆ เติมพื้นที่ส่วนท้ายอีกหน้าบล็อกอีก 3 Column

สอนทำ blog

ต่อเนื่องจากบทความ วิธีง่ายๆ เติมอีก 4 Column ที่ด้านล่างของบล็อก ก็เลยขอนำเสนออีกทางเลือกในการเติมพื้นที่ส่วนท้ายของหน้าบล็อก จาก 4 COLUMN เป็น 3 COLUMN มาให้เลือกใช้ดูครับ ขั้นตอนการติดตั้งก็คล้ายกับบทความเดิมครับ คือ



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

]]></b:skin>

จากนั้นให้แทนที่ด้วยโค้ดต่อไปนี้

/* 3 column edit by Hackublog*/

#footer-wrapper {
width: 960px;/*ปรับความกว้างได้ */
background: #000000;/*สีพื้นหลัง*/
margin: 0px auto 0px;
padding: 0px;
border-top: 4 px solid #960000;
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: 280px;/*ปรับความกว้างได้ */
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #909090;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer2 {
width: 280px;/*ปรับความกว้างได้ */
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #909090;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer3 {
width: 280px;/*ปรับความกว้างได้ */
float: left;
margin: 5px;
padding: 5px;
text-align: left;
background: #909090;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#footer1 h2, #footer2 h2, #footer3 h2{
background:#333 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81KcgGkI/AAAAAAAAA5s/F42frbPwJ00/s1600/headline.png) ;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-transform: uppercase;
text-align: center;/*ทำให้หัวข้ออยู่ตรงกลาง*/
margin: 0 0 5px;
padding: 5px;
}
#footer1 a, #footer2 a, #footer3 a{
color:#ffffff;/*สีของ link*/
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
}
#footer1 a:hover, #footer2 a:hover, #footer3 a:hover{
color:#C80000;
text-decoration: none;
font-weight:blod;}
#footer1 ul li, #footer2 ul li, #footer3 ul li{
list-style-type: none;
background:url(http://upic.me/i/4s/blogger.png) no-repeat;
border-bottom: none;
margin-left: -35px;/*โค้ดสำหรับปรับ list ให้ชิดซ้าย ตั้งค่าใหม่ได้ตามความเหมาะสม เช่นปรับเป็น –20 เป็นต้น */
line-height: 2em;
margin-right: 3px;
padding-left: 20px;
display:block;
}
#footer1 li:hover, #footer2 li:hover, #footer3 li:hover{
display:block; background-color:#C1C1C1; font-color:#C80000;
}
/* 3 column CSS end */

]]></b:skin>



ถ้าหากต้องการโค้ดที่เหมือนกับบล้อกของผมก็ใช้โค้ดต่อไปนี้แทนโค้ดข้างบนครับ





#footer-wrapper{width:1000px;background:#909090;margin:0px auto 0px;padding:0px;border-top:50px solid #EDEEEF;word-wrap:break-word;overflow:hidden;font-size:11px;font-color:#000;font-family:Arial,tahoma,Lucida Sans Unicode,trebuchet MS}
#footer1{width:310px;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
#footer2{width:310px;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
#footer3{width:320px;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
#footer1 h2,#footer2 h2,#footer3 h2{background:#BBBBBB;color:#3D3D3D;font-size:13px;font-family:Arial,Tahoma,Verdana;font-weight:bold;text-transform:uppercase;text-align:center;margin:0 px;padding:5px;text-shadow:0.5px 0.5px 0.5px #eeeeee}
#footer1 a,#footer2 a,#footer3 a{color:#151515;font-size:12px;font-family:Arial,Tahoma,Verdana}
#footer1 a:hover,#footer2 a:hover,#footer3 a:hover{color:#C80000;text-decoration:none;font-weight:blod}
#footer1 ul li,#footer2 ul li,#footer3 ul li{display:block;background-color:#DDDDDD;font-family:Arial,Helvetica;color:#3e3e3e;font-color:#717171;line-height:1.6em;padding-left:5px;magin:0 0 0 2px 0;color:#333;border-top:1px solid #ffffff;border-bottom:1px solid #4E4E4E;border-left:1px solid #BBBBBB;border-right:1px solid #565656}
#footer1 a:hover,#footer2 a:hover,#footer3 a:hover{color:#C80000;text-decoration:none;font-weight:blod}
#footer1 li:hover,#footer2 li:hover,#footer3 li:hover{display:block;background-color:#EDEEEF;font-color:#C80000;border-bottom:1px solid #ffffff}

]]></b:skin>



ขั้นที่ 2 ให้ค้นหาโค้ด

<div id='footer-wrapper'>
หรือถ้าไม่เจอให้ค้นหา
<div id='footer'>

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

<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section><div style='clear:both;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
</b:section><div style='clear:both;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
</b:section><div style='clear:both;'/>
</div>



และทำการบันทึกแม่แบบและลุย add Gadget กันได้เลยครับ

3col_footer

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

  1. แล้วมีวิธีที่จะโปรโมทบล็อกของเราใน hi5 ได้มั้ยครับ
    อีกอย่างผมอยากให้เพื่อนที่ hi5 ของผมมาเป็นแฟนบล็อกผมได้งัย มีวิธีไหมครับ
    ขอบคุณมากครับ

  1. เท่าที่ทราบ ตอนนี้ hi5 ยังไม่ได้เป็นเครือข่ายกับ สังคมอื่นๆ เช่นยังไม่ได้เชื่อมโยงกับ twitter หรือ facebook ครับ ซึ่งตอนนี้ที่เชื่อมโยงกับ blogger มีอยู่หลาย band อยู่เหมือนกัน แต่ไม่ปรากฎ hi5 เลยครับ (เหมือนกับว่า hi5 จะนิยมในหมู่คนไทยซะมากกว่าครับ)

    คุณ Thomas คงต้องแก้ปัญหาไปก่อน โดยใส่ Link ของ hi5 ในบล็อกของคุณให้เชื่อมต่อไปที่ hi5 เอาเองครับ (ใช้วิธี เพิ่ม gadget ที่เป็น link ก็ได้ครับ)

    ในทางกลับกันคงต้องใช้วิธีโพส link blog ของคุณใน Profile และอาจจะแสดง รูปบล็อกของคุณในอัลบัมของ hi5 ซึ่งเป็นการโปรโมทแบบทางอ้อมครับ

  1. ขอบคุณคุณ ADMIN 4ALL มาก ๆ ครับ ผมได้ความรู้อีกเรื่องหนึ่งแล้ว และถ้าหากผมจะรบกวนครั้งต่อไปคงไม่ว่านะครับ ขอบคุณจากใจจริง ๆ บล็อกของคุณมีประโยชน์มาก ๆ ครับ บาย

  1. ยินดีครับผม ถ้าผมสามารถช่วยได้ก็จะช่วยเต็มที่ครับ

  1. ขอบคุณมากครับ นำไปใช้ได้ดี เพิ่งหัดทำได้ซักพัก ได้ความรู้เยอะเลย เก่งจังคับ

  1. ของผมเอาไปวางแล้วมันเป็นแนวดิ่งลงมาอ่ะครับ ไม่เรียนกันเป็นแนวขวางเลยครับ
    ต้องแก้ตรงไหนครับ

  1. @ Johunna : ให้แก้ความกว้างใน CSS เป็นค่า % ครับซึ่งจะได้ผลลัพธ์ดังนี้

    #footer-wrapper{width:100%;background:#909090;margin:0px auto 0px;padding:0px;border-top:50px solid #EDEEEF;word-wrap:break-word;overflow:hidden;font-size:11px;font-color:#000;font-family:Arial,tahoma,Lucida Sans Unicode,trebuchet MS}
    #footer1{width:33%;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
    #footer2{width:33%;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
    #footer3{width:34%;float:left;margin:5px;padding:0px;text-align:left;background:#DDDDDD;border-top:2px solid #ffffff;border-bottom:2px solid #000;border-left:2px solid #BBBBBB;border-right:2px solid #565656}
    #footer1 h2,#footer2 h2,#footer3 h2{background:#BBBBBB;color:#3D3D3D;font-size:13px;font-family:Arial,Tahoma,Verdana;font-weight:bold;text-transform:uppercase;text-align:center;margin:0 px;padding:5px;text-shadow:0.5px 0.5px 0.5px #eeeeee}
    #footer1 a,#footer2 a,#footer3 a{color:#151515;font-size:12px;font-family:Arial,Tahoma,Verdana}
    #footer1 a:hover,#footer2 a:hover,#footer3 a:hover{color:#C80000;text-decoration:none;font-weight:blod}
    #footer1 ul li,#footer2 ul li,#footer3 ul li{display:block;background-color:#DDDDDD;font-family:Arial,Helvetica;color:#3e3e3e;font-color:#717171;line-height:1.6em;padding-left:5px;magin:0 0 0 2px 0;color:#333;border-top:1px solid #ffffff;border-bottom:1px solid #4E4E4E;border-left:1px solid #BBBBBB;border-right:1px solid #565656}
    #footer1 a:hover,#footer2 a:hover,#footer3 a:hover{color:#C80000;text-decoration:none;font-weight:blod}
    #footer1 li:hover,#footer2 li:hover,#footer3 li:hover{display:block;background-color:#EDEEEF;font-color:#C80000;border-bottom:1px solid #ffffff}

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

  1. ทำให้ Footer แสดงทุกหน้าได้ไหมคะ ขอบคุณล่วงหน้าค่ะ

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

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

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