:: H o u s e 1 0 8 ::

 

คราวนี้จะสอนแบบรวบรัดเลยนะคะ ไม่เข้าใจใช้ ems. ถามมาได้เลยค่ะ

...เมื่อเราเข้ามาที่หน้า Manage blog แล้ว

ให้เข้าไปที่หัวข้อ Theme ค่ะ

ก็จะพบกับช่อง 4 ช่อง ใน My Theme Slots

ที่จะทำให้เราสามารถ เก็บรูปแบบธีมที่เราเคยทำไว้ได้ค่ะ ...

ถัดลงมา จะเป็นรูปแบบ ธีม3 แบบให้เลือก ซึ่งจะมี

Apollo/Dark apollo/Simple

ซึ่งที่จะทำวันนี้ เป็นรูปแบบของ Simple ค่ะ

ดูที่ช่องของรูปแบบธีม Simple จะมีปุ่ม

ก็กดตรงนั้นแล้วรูปแบบธีม Simpleที่เลือกไว้

ก็จะไปขึ้นที่ช่องสลอตค่ะ

...

จากนั้น ถ้าเราจะเลือกใช้ธีมนั้นกับหน้าบลอคเรา

ก็กดตรงสลอตค่ะ

...

ถ้าจะตกแต่งธีมก่อนก็กด ค่ะ แล้วก็จะไปสู่หน้า

Color & Pictures ให้เราไปที่หน้า Css Editor

...

จากนั้นก็จะสู่หน้าแก้ไขCssค่ะ จะมี2ปุ่มด้านล่างคือ

 ใช้ทดลองดูหน้าบลอคก่อนเซฟจริง

 ใช้เซฟเก็บหน้าบลอคที่เราทำไว้..

/* General */
body {
 background:#000000 url(ใส่URLของรูปที่จะเป็นBg) repeat top left; <<ส่วนของสี/รูป Bg
 color:#333;   <<ส่วนของสีตัวหนังสือหลัก รวมถึงหัวข้อด้านข้างเช่นRecommend
 font:12px Tahoma, "MS Sans Serif"; <<ฟ้อนท์ตัวหนังสือ
 line-height:1.5em;
 text-align:center;
}
a:link, a:visited{
 color:#0054a6; <<สีของลิ้งค์ตัวหนังสือ
 text-decoration:none; 
}
a:hover, a:active{
 color:#0081ff; <<สีของลิ้งค์เวลาเอาเม้าส์ชี้
}
#page{
 margin:auto;
 padding-top:15px;
 text-align:left; <<ถ้าอยากให้แถบเมนู ตัวหนังสือข้างในชิดขวาก็เปลี่ยนเป็นRight
 width:780px; <<ความกว้างของหน้าบลอค
}
#header, #neck, #belly, #leg, #footer{
 float:left;
 width:780px;
}
/*=============*/

/* Header */ <<ส่วนเฮดบลอค
#header{
 background:#000;  << [3] สีทั้งหมดตรงเฮดบลอค
 padding:20px 0px 0px 0px; << [1] ระยะห่างขอบกับตัวหนังสือข้างบน(คือตรงสีม่วงๆขีดๆ)
 text-align:center;
 position:relative;
}
#header h1 a{
 color:#666; << สีของตัวหนังสือ [2]
 font-size:24px; << ขนาดของตัวหนังสือ [2]
}
#header h1 a:hover{
 color:#999; << สีของตัวหนังสือ [2]เมื่อเอาเม้าส์ชี้
}
#header h2{
 font-size:12px; << ขนาดของตัวหนังสือ ที่เป็นหัวรองต่อจาก [2] (แล้วแต่ค่ะบางคนก็ไม่มี)
 margin:5px 0px 5px 0px; << ระยะห่างระหว่าง [2] กับหัวรอง
}
#coverimage{
 background:url(URLของรูปเฮดบลอค) no-repeat;
 height:100px; <<ปรับให้เท่ากับขนาดของเฮด
 width:730px; <<ปรับให้เท่ากับขนาดของเฮด
 margin-left:25px !important;
 margin-left:0px; /*Fix IE Bug*/
}
/*=============*/
/* Neck Menu */ <<ส่วนคอบลอค หรือ ตรงที่ไว้Page เช่น Home |        
#neck{
 background:#FFF;
}
#neck .module{
 background:#d7d7d7; <<สีBgของส่วนนี้
 display:inline;
 float:left;
 margin:0px 0px 0px 25px;
 padding:2px 0px 5px 0px;
 width:730px; <<ความยาวของคอ
}
#neck .module ul{
 display:inline;
 margin:0px;
 padding:0px;
}
#neck .module h2{
 display:none;
}
#neck .module li{
 border-right:1px solid #CCC; <<เส้นที่คั่นแต่ละเรื่องของPage เส้นข้างๆคำว่าHomeค่ะ
 display:inline;
 padding:0px 10px 0px 10px;
}
/*=============*/
/* Content */
#belly{
background:#FFF; <
}
#content{
 display:inline;
 float:left;
 margin:10px 15px 0px 25px;
 width:490px; <<ความกว้างของส่วนEntryที่เราใช้เขียน
 /*Fix too large image makes content drop problem in IE*/
 overflow:visible !important;
 overflow:hidden;
}
.entry{
 float:left;
 margin-bottom:15px;
 border-bottom:1px solid #CCC; <<เส้นยาวๆ ที่อยู่ใต้ลิ้งค์ที่ไปComment
}
.entry .title{
 display:block;
 float:left;
 margin-bottom:10px;
 width:100%;
}
.entry .title h2{
 font-size:18px; <<ขนาดตัวหนังสือของหัวข้อเรื่อง
}
.entry .title h2 a{
 color:#949494; <<สีของตัวหนังสือหัวข้อเรื่อง
}
.entry .title h2 a:hover{
 color:#CCC; <<สีตัวหนังสือหัวข้อเรื่องเมื่อเอาเม้าส์ชี้
}
.entry .title span{
 color:#666; <<ข้อมูลการโพสที่อยู่ใต้หัวข้อเรื่อง
 font-size:10px; <<ขนาดตัวหนังสือ
}
.entry .post{
 float:left;
}
.entry .post p{
 margin-bottom:10px;
}
.entry .info{
 float:left;
 width:100%;
}
.entry .info .tag{ <<การปรับค่าตัวหนังสือตรงคำว่าTags ด้านล่าง
 float:left;
 font-size:10px;
 width:350px;
}
.entry .info .coms{ <<ปรับค่าตัวหนังสือตรงคำว่า Commentsด้านล่าง
 float:right;
}
/* Sidebars */
#sidebar, #sidebar2{
 background:#ebebeb; <<สีBgของเมนูด้านขวา
 display:inline;
 float:right;
 margin:5px 25px 0px 0px;
 width:225px;<<ความกว้างของแถบเมนู
}
#sidebar2{
 display:none;
}
#sidebar .module, #sidebar2 .module{
 margin:5px 5px 15px 5px;
}
#sidebar .module ul, #sidebar2 .module ul{
 margin:5px 0px 0px 5px;
 padding:0;
 list-style: none;
}
#sidebar .module h2, #sidebar2 .module h2{
 border-bottom:1px solid #CCC; <<เส้นใต้หัวข้อ เช่นRecommend
 font-size:18px; <<ขนาดตัวหนังสือหัวข้อ(เจ้าคำว่าRecommendไรแถวนั้นแหละจ้า)
}
a.archive{
 background:url(URL) no-repeat; <<รูปตรงท้ายCategories ""
 width:12px; <<ความกว้างของรูป
 height:12px; <<ความยาวของรูป
 padding-left:15px;
 margin-left:4px;
 width:350px;
}

 

ไว้เท่านี้ก่อนค่ะ เดี๋ยวส่วนคอมเม้นมาอัพต่อ

ตรงไหนที่ไม่เข้าใจว่ามันคือส่วนไหนก็ลองพิมโค้ดสี เช่น ดำ แดง

แล้วลองPreview จะรู้ว่ามันเป็นส่วนไหนๆค่ะ

* *เมื่อวานบ้านโดนตัดไฟ(แม่ลืมจ่ายค่าไฟฟ้า)

กันดารเลยต้องอยู่กับแสงเทียนค่ะ ก็ไม่เลว 55

 แต่กลัวปลาทองในกะละมังตาย**