Code แต่งบล็อก

เรียนอาจารย์ราณี  นู๋ทิมนำโค้ดตกแต่งบล็อกมาฝากค่ะ  อาจารย์ ลอง Copy ไปใส่ที่โหมด ตกแต่งบล็อกนี้  ได้เลยค่ะ  (อาจไม่ใช่สไตล์ของอาจารย์ ถ้าไม่ชอบอาจารย์ก็สามารถเปลี่ยนรูปพื้นหลังได้นะคะ

div#title{padding: 0px 10px 0px;

font-size: Extra large;color:# F37763;

background:# 07116E;

background-image:url("http://www.bloggang.com/data/tawan-pink/picture/1136236795.jpg");

background-repeat:no-repeat;

background-position:center center; height:180px;}

div#title span {display:none;}

div#container {width: 880px; background:
#ffffff; border: 10px ridge #07116E;}
div#content2 {width: 600px; border-ridge : 0px ridge #07116E;}
div#sidebar2 {width: 275px; background: #ffffff;}

div#sidebar2 {width: 275px; background-image:url("http://www.bloggang.com/data/tawan-pink/picture/1150659571.jpg"); border: 0px solid #ffffff;}
div#content2 {background: #ffffff; width:600px; background-image:url("http://www.bloggang.com/data/tawan-pink/picture/1150659571.jpg");border/: 0px solid #ffffff;}

body{ background:#07116E;background-image: url("http://www.bloggang.com/data/tawan-pink/picture/1150659571.jpg");background-repeat: repeat;}

 

  • นู๋ทิมทดลองนำตัวอย่างรูปมาใส่ให้ใน Code ถ้าอาจารย์ชอบก็นำไปใช้ได้เลยค่ะ แต่ถ้าไม่ถูกใจอาจารย์สามารถหามาเปลี่ยนได้เลยค่ะ

 

 

คำอธิบายค่ะ

div#title{padding: 10px 4px 35px;
font-size: big; color:#F37763; (สีของอักษรชื่อบล็อก)
background:# 07116E;
background-image:url("http://ลิ้งรูปด้านบนค่ะ");
background-repeat:no-repeat;
background-position:center center; height:180x; (คือความกว้างของพื้นหลังด้านบน)

div#title span {display:none;}

div#container {width: 880px; background:
#ffffff; border: 10px ridge #07116E;}
div#content2 {width: 600px; border-ridge : 0px ridge #07116E;}
div#sidebar2 {width: 275px; background: #ffffff;}

div#sidebar2 {width: 270px; background-image:url("http://ลิ้งพื้นที่บล็อกขวามือค่ะ"); border: 0px solid #ffffff;}div#content2 {background: #ffffff; width: 550px; background-image:url("http://ลิ้งพื้นที่ตรงกลาง");border/: 0px solid #ffffff;}body{ background: #e2c7c5; background-image: url("http://ลิ้งพื้นหลัง");background-repeat/: repeat;}

บริเวณ Code สีอาจารย์สามารถปรับเปลี่ยนได้ตามใจชอบค่ะ

  =http://www.bloggang.com/data/tawan-pink/picture/1136236795.jpg

=http://www.bloggang.com/data/tawan-pink/picture/1150659571.jpg

  • ถ้าอาจารย์ชอบภาพพื้นหลัง2ภาพนี้อาจารย์ก็ copy ไปไว้ที่คอมฯ อาจารย์ก่อน แล้วค่อยนำไฟล์ขึ้นมาไว้ที่บล็อกอาจารย์นะคะ (เพราะรูปนี้เขาแจกฟรีมาค่ะ เจ้าของเขาอาจลบทิ้งได้ค่ะ ถ้าเขาต้องการพื้นที่เพิ่ม)
  • ขอให้อาจารย์สนุกกับการแต่งบล็อกนะคะ

 

 

คำตอบ