วิธีแต่ง astore ให้สวยกว่า AOM ไปเลย

[qwert001]

แต่ง astore แบบรูปข้างบนนี้ผมใข้เวลา 4 นาที!!!

จริงๆแล้วมันก็ไม่ได้มีอะไรยากนะครับ






ขั้นที่ 1 แค่จัดหน้าโดยแก้ css

โค้ด เลือก ขยาย


/* PAGE STYLE */
body {
      margin:auto;
      padding:0px;
      background:#FFFFFF;
      color:#000000;
      min-width:auto;
      font-family:'Verdana', sans-serif;
      font-size:9pt;
      font-weight:500;
      line-height:12pt;
      text-decoration: none;
margin-top:190px;
text-align:center;
background-image:
url('http://i129.photobucket.com/albums/p209/arnon001/tem2-1.jpg');
background-position: 50% 0%;
background-repeat: repeat-x

}

/* MAIN PAGE AREA */
#mainwrap {
      float:right;
}
#wrap {
       margin:0 auto;
       text-align:left;
}
#main {margin-top:90px;
      width:530px;
     
      overflow:hidden;
border-style: solid;
border-left-width: thin;
border-top-width: thin;
border-bottom-width: thin;
border-right-width: thin;
border-color: #00FFFF;

}
div#header {
      background:#206BA2;
      padding:6px 24px 4px;
      margin:0;
      vertical-align:middle;
}
a#mainheadertitle {
      padding:0px;
      font-family:serif;
      font-size:15pt;
      font-weight:normal;
      line-height:1.5em;
      color:#FFFFFF;
      margin:0px;
      text-align:left;
      vertical-align:middle;
      text-decoration:none;
}
a#mainheadertitle:hover {
      text-decoration:underline;
}
td#mainheaderlogo {
      padding:5px;
}
img#mainlogo {
      padding-right:5px;
}
div#mainsubheader {
      background:#F2F2F2;
      padding:10px 24px;
      vertical-align:middle;
}
div#contentsubheader {
      width:482px;
      overflow:hidden;
}
div#subheaderlinks {
      float:right;
      text-align:right;
}
div#subheadertitle {
      font-size:12pt;
      font-weight:bold;
}
div#contenterror {
      background:#FFFFFF;
      padding:14px 24px;     
}
span.currentpage {
      font-weight:bold;
}

span.error {
      font-weight:bold;
}

/* SIDEBAR */
#sidebar {
      float:left;
      width:200px;
      overflow:hidden;
}
#sidebar ul {
      margin-bottom:0;
}
#sidebar h3, #sidebar p {
      padding:0 10px;
}

/* GENERAL SIDEBAR WIDGET STYLES */
ul#widget,ul.widget li.widget {
      margin:0;
      padding:0;
      list-style:none;
}
li.widget {
      float:left;
      width:200px;
      margin-bottom:0px;
}
ul#widget div {
      background:#FFFFFF;
}
ul#widget h3 {
      font-family:'Verdana', sans-serif;
      font-size: 10pt;
      font-weight: bold;
      color:#FFFFFF;
      margin:0px;
      padding:4px 15px 4px;
      text-align:left;
background-image:
url('http://i537.photobucket.com/albums/ff332/qecera/tab.jpg');

}






code css ด้านบนนี้ใส่ตรง Global ครับ



ขั้นที่ 2 ก็เอารูปภาพไปใส่เป็น Background ครับ
ทีนี้จะแต่งยังไงก็อยู่ที่จินตนาการครับ ลองดูภาพประกอบ



จากภาพแสดงให้เห็นว่าจริงๆแล้วก็เป็นเพียงการจัดหน้าเวบธรรมดา
แล้วเอา Background มาซ้อนครับ

วิธีการใส่ Background ก็คือ เอา url รูป background ไปใส่ตรงบรรทัดที่ 16 ใน css ครับ
ส่วนตรงหัวข้อ Search ที่เป็นสีดำๆ ก็เอา url รูปไปใส่ตรงบรรทัดรองสุดท้ายของ css ครับ




แค่นี้เองครับ การทำไม่ยากหรอกครับ มันยากตรงที่ทำยังไงให้มันออกมาดูลงตัว ให้ดูดี


ทุกคนทำได้อยู่แล้วครับ...




รูปตัวอย่าง Background ของผมครับ

[mahatang]

ขอบคุณครับ แล้วจะลองทำดู

[คุณป้าขา]

  โหววววววววววววววว

[guy852]

  เดียวผมใส่ระบบอัพโหลด css กับรูปก่อน 

[khonthai]

โอ้วววววววววววว สุดยอดเลยครับ เดี๋ยวลองทำดูมั่ง

[EThaiZone]

คนขายเทมของ astore จะตกงานก็คราวนี้แหละ 

[qwert001]

ขอโทษคนขายเทม astore ด้วยนะครับ ผมไม่ได้จะลบหลู่
แต่ก็คงไม่กระทบอะไรเพราะคนขายเขาต้องมีเทคนิคและฝีมือมากกว่านี้อยู่แล้ว

[payu]

คนขายเทมของ astore จะตกงานก็คราวนี้แหละ 

จริง จริง

[workshop]

ขอบคุณครับ

[tradeya]

เห็นแล้วก็เอาไปลองทำด่วน 

[siamman]

คนขายเทมของ astore จะตกงานก็คราวนี้แหละ 

ผมว่าคงไม่กระทบมากมายหรอก เพราะบางคนหลายคนที่รู้วิธี แต่ก็อยากซื้อเวลา ยอมจ่ายดีกว่าเสียเวลาคิดหน้าตาหรือเวลามานั่งทำโฟโต้ช๊อป

[น้องบิ้ว]

ขอโทษคนขาย astore ด้วยนะครับ ผมไม่ได้จะลบหลู่
แต่ก็คงไม่กระทบอะไรเพราะคนขายเขาต้องมีเทคนิคและฝีมือมากกว่านี้อยู่แล้ว

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

[youcanberich]

แบบนี้คุณ qwert001

คนขายเทมของ astore จะตกงานก็คราวนี้แหละ 

จริง จริง

ตามนั้น สวยมากๆ ทำอยู่ทุกวันยังไม่ได้แบบนี้เลย 

[ColdMoney]

ขอบคุณครับ แหล่มเลย 

[janistar]

เยี่ยมค่ะ เด๋วว่างๆ ลองทำ ตอนนี้ง่วงทั้งว่น งานการไม่ได้ทำเลย 

[ฉันไม่มีตัวตน]

ขอบคุณคร้าบบบบ

[goldsaber]

โอ้....ขอบคุณหลาย ๆๆๆๆๆ

[barbies55]

ขอบคุณมากๆสำหรับเคล็ดวิิชาค่ะ
แต่ฝีมือการแต่งแบคกราวน์ของท่าน งามแต้ๆ

[wat007]

   ขอบคุณนะครับ

[pingza]

ขอบคุณคร๊าฟฟ