นำสิ่งดีดีมาฝาก

ตกแต่งบล็อคให้สวยงาม

วันที่ 20 มิถุนายน 2552 อาจารย์ดิศกุล สอนการนำรูปภาพเข้า การแก้ไขและเพิ่มเติม และนำเสนอผลงานของกลุ่มอื่นให้ดูด้วย และวันนี้ได้ความรู้เพิ่มเติมในเรื่องการตกแต่งบล็อคให้สวยงามจากน้องกรุงด้วย พอกลับมาถึงบ้านก็ศึกษาเพิ่มเติม จนได้ไปรู้จักเว๊บไซด์ของอาจารย์ศิริพร อาจารย์ใจดีมากเลย ก็ได้เข้าไปขออนุญาตอาจารย์ขอนำโค๊ดที่ได้มาแนะนำให้สมาชิก ป.โทบริหารการศึกษา ม.บูรพา รุ่น 1 ระยอง ได้ศึกษา สนใจก็อ่านต่อนะจ๊ะ

สำหรับผู้ที่เพิ่งเริ่มแต่งบล็อก มีขั้นตอนดังนี้

1 .ไปที่ เมนูทางลัด ---> จัดการบล็อก แล้วเลือก ตกแต่งบล็อก

- สำหรับผู้ที่จะตกแต่งหน้าประวัติไปที่เมนู ประวัติ แล้วเลือก ตกแต่งหน้าประวัติของคุณ

2. จะเข้ามาที่หน้า แก้ไขชุดตกแต่ง แล้วเลือก แก้ไข css ที่ตกแต่งมาเอง

3.ให้ copy code ของ css เลือกตามแบบต่างๆที่อยู่ข้างล่าง นำไปวางในกรอบสี่เหลี่ยมของ CSS ที่ตกแต่งมาเอง

คลิกเลือก บันทึก CSS เป็นอันเสร็จสมบูรณ์

คราวนี้ก็ลองนำ code css ข้างล่างตามแบบที่ชอบไปลองใช้ดูค่ะ

แบบที่ 8

div#subtitle {background:#8DB6CD;}

div#ribbon{background:#4F94CD;}

div#page-wrapper { background-image: none;}

div#page {background-image: url(http://gotoknow.org/file/siriporn5633/bg45.jpg);}

body{background-image:url(http://gotoknow.org/file/siriporn5633/f029.jpg);background-repeat:repeat;}

div#title{font-size: big; color:#36648B; background:#F0F5FA;background-image:url(http://gotoknow.org/file/siriporn5633/1189935_5021421.gif);background-repeat:no-repeat;background-position:bottom right; height:130px;}

จะได้บล็อกที่มีสีสันลวดลายตามรูป sample blog 8

แบบที่ 9

div#subtitle { background:#FFA07A;}

div#ribbon{background:#A0522D;}div#page-wrapper { background-image: none;}

div#page {background-image:url(http://gotoknow.org/file/siriporn5633/tree.jpg);}body{background-image:url(http://gotoknow.org/file/siriporn5633/30x30_mexican_tiles.jpg);background-repeat: repeat;}

div#title{font-size: big; color:#FF1493; background:#FFC0CB; background-image:url(http://gotoknow.org/file/siriporn5633/bg49.gif);background-repeat:repeat;background-position:top; height:100px;}

จะได้บล็อกที่มีสีสันลวดลายตามรูป sample blog 9

แบบที่ 10

div#subtitle {background:#698B69;}

div#ribbon{background:#9BCD9B;}

div#page-wrapper { background-image: none;}

div#page {background-image: url(http://gotoknow.org/file/siriporn5633/bg7.gif);}

body{ background:#FFEC8B;background-image:url(http://gotoknow.org/file/siriporn5633/view2.gif);}

div#title{font-size:big; color:#FF6A6A; background:#F5DEB3; background-image:url(http://gotoknow.org/file/siriporn5633/view1.gif);background-repeat:repeat;background-position:top; height:100px;}

จะได้บล็อกที่มีสีสันลวดลายตามรูป sample blog 10

แบบที่ 11

div#subtitle {background:#CDC0B0;}

div#ribbon{background:#CDC5BF;}

div#page-wrapper {background-image: none;}

div#page {border:medium double #DB7093;background:#FFFAF0;}

body{background-image:url(http://gotoknow.org/file/siriporn5633/kabe2.gif);}div#title{font-size: big; color:#A0522D; background:#ffffff; background-image:url(http://gotoknow.org/file/siriporn5633/t04.gif);background-repeat:no-repeat;background-position:right; height:120px;}

จะได้บล็อกที่มีสีสันลวดลายตามรูป sample blog 11

แบบที่ 12

div#subtitle {background:#C71585;}

div#ribbon{background:#FFB6C1;}

div#page-wrapper { background-image: none;}

div#page {border:medium double #DB7093; background-image:url(http://gotoknow.org/file/siriporn5633/bgh09_2.gif); }

body{background-image:url(http://gotoknow.org/file/siriporn5633/bg66_4.gif );background-repeat: repeat;}

div#title{font-size: big; color:#C71585; background:#FFCCFF; background-image:url(http://gotoknow.org/file/siriporn5633/bgh19_3.gif);background-repeat:repeat;background-position:top; height:100px;}

ถ้าไม่สะใจก็เข้าไปที่เว๊บไซด์ของอาจารย์ได้ตามนี้จ๊ะ

http://gotoknow.org/blog/blog-css/148761

เขียนใน GotoKnow โดย กัญญา กุ้ง แสงเจริญโรจน์(จำปาพันธ์)
ใน ความรู้เรื่องการตกแต่งบล็อคให้สวยงาม

คำสำคัญ (Tags): #แนะนำความรู้การตกแต่งบล็อค

หมายเลขบันทึก: 270118เขียนเมื่อ 22 มิถุนายน 2009 19:43 น. ()แก้ไขเมื่อ 12 กุมภาพันธ์ 2012 07:28 น. ()สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกันจำนวนที่อ่าน