มาหัดแต่ง Title ของบล็อกกันครับ

นัด
  Titleของบล็อก  

เห็นบล็อกของหลายท่านสวยดีพยายามหาความรู้ที่จะนำมาแต่งบล็อกของตัวเองบ้าง ไปเจอมา 2 ที่ คือ
http://gotoknow.org/blog/sec/114903
http://gotoknow.org/blog/theme4u/93658
ขอขอบคุณ 2 ท่านนี้มากเลย ส่วนของผมก็ใช้ CSS ดังนี้ครับ
ขั้นที่ 1 เราก็ต้องเตรียมรูปกันก่อนโดยใช้โปรแกรมตกแต่งรูปภาพค เช่น Adobe Photoshop ขนาดของรูปควรจะเป็น ความกว้าง 910 pixels ส่วนความสูงก็ไม่ควรเกิน 130-150  pixels เมื่อได้ขนาดของรูปแล้วก็แต่งให้เต็มที่เลยครับ แล้ว save เป็นไฟล์ .jpg หรือ .gif ตัวอย่างที่เสร็จแล้ว

ขั้นที่ 2
เราจะต้องอัพโหลดไฟล์รูปภาพ ขึ้นมาไว้ในไฟล์อัลบั้มของเราก่อน ดูวิธีการอัพโหลดไฟล์ที่นี่ครับ วิธีการอัพโหลดไฟล์

ขั้นที่ 3
มาดูโค๊ดที่ใช้ครับ
CSS code ที่ใส่ในการตกแต่ง

<table border="0"><tbody><tr><td>  <p>div#container {width: 810px;}</p>

div#content2 {float: right; width: 710px;}

div#sidebar2 {float: left; width: 180px;}

body{ background: #ffffff;background-image:url(" http://gotoknow.org/file/kpp2nut/bg.jpg ");
background-repeat: repeat;}

div#page-wrapper {
background:#FFFFFF url(
http://gotoknow.org/file/kpp2nut/bg.jpg ) repeat-x scroll center top;
}

div#title {
 padding: 10px 4px 10px;
 font-size: 1.5em;
 color: #FFFFFF;
 background-image:url("
http://gotoknow.org/file/kpp2nut/logo.jpg ");
 background-repeat:no-repeat;
 background-position:center center;
 height:110px;

}

div#sidebar2 {
 float: left;
 width: 180px;
 padding-right: 5px;
background: #BBD02E;
}

</td></tr></tbody></table>คำอธิบาย</strong>
padding คือ การกำหนดตำแหน่งของชื่อบล็อก ถ้าไม่ใส่ส่วนนี้ ระบบจะกำหนดให้อยู่ตำแหน่งซ้ายบน
background-image คือ ไฟล์รูปภาพที่จะนำมาใส่ เราจะต้องเอา url ของไฟล์รูปที่เราอัพโหลดในขั้นที่2 มาใส่ในวงเล็บ
background-repeat คือ การกำหนดใส่แสดงรูปซ้ำจนเต็มพื้นที่ เช่นถ้ารูปเราเล็กกว่าขนาด title ที่เว็บกำหนดไว้ ก็เขียนคำสั่งให้แสดงรูปต่อๆ กันจนเต็ม
background-position คือ การกำหนดตำแหน่งของรูปที่นำมาใส่
height คือ การกำหนดความสูงของส่วน title เพื่อให้พอดีกับรูปที่เราทำมา <p>

อันนี้ทำมาฝากครับ

http://gotoknow.org/file/kpp2nut/logokm.jpg
ภาพตัวอย่าง
</p><p>:: เห็นหลายท่านสงสัย :::</p><p>ขอเพิ่มเติมนะครับ </p><p>1 . login เข้าระบบแล้ว เลือกที่ จัดการบล๊อก >>  ตกแต่งบล๊อก</p><p>
2. copy code จาก ขั้นที่ 3 มาใส่ดังรูป</p><p></p><p> </p>

บันทึกนี้เขียนที่ GotoKnow โดย  ใน krunutสพม41

คำสำคัญ (Tags)#theme#css#title

หมายเลขบันทึก: 118297, เขียน: 09 Aug 2007 @ 11:57, แก้ไข, 06 Sep 2013 @ 18:14, สัญญาอนุญาต: สงวนสิทธิ์ทุกประการ, ความเห็น: 3, อ่าน: คลิก
บันทึกที่เกี่ยวข้อง
บันทึกล่าสุด


ความเห็น (3)

♥< lovefull >♥
เขียนเมื่อ 22 Sep 2007 @ 21:05

 อะ อะ งงงง อะนะ

อ่านแล้วแต่ว่ายังไม่เข้าใจ

ทำท่า งง เหมือนกัน ? 

แก้ว
IP: xxx.154.36.125
เขียนเมื่อ 03 Nov 2007 @ 14:39

พอได้แล้วค่ะขอยืมเป็นการชั่วคราวจะแต่งเองใหม่ค่ะ ขอบคุณค่ะ