แต่งบล็อกแบบสำเร็จรูป

แต่งบล็อกสำเร็จรูป ง่าย...สะดวก ได้ที่นี่..

การตกแต่งบล็อกเป็นการเพิ่มสีสันและความน่าสนใจให้บล็อก

อยากจะตกแต่งบล็อกแต่ไม่รู้จะเริ่มต้นอย่างไร ต้องทำอะไรบ้าง ทุกคนทำได้ค่ะไม่ยากเลย

ทำตามขั้นตอนดังนี้

ขั้นตอนการตกแต่งบล็อกแบบง่ายๆ

พร้อมแล้ว เริ่มได้เลย...

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

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

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

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

เป็นอันเสร็จสมบูรณ์ ง่ายไหมล่ะ

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

แบบที่ 1

div#subtitle {background:#B0C4DE;}

div#ribbon{background:#009ACD;}

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

div#page {border: medium double #E0FFFF; background:#C6E2FF;border-bottom:medium double#E0FFFF;background-image:url(http://gotoknow.org/file/siriporn5633/04xv3.jpg);background-position:right;background-repeat:repeat;}

body{background:#e4c10c5; background-image: url(http://gotoknow.org/file/siriporn5633/1127234116.jpg);}
div#title{padding: 18px 4px 35px;font-size:big; color:#00008B;background:#C6E2FF; background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/image1.gif); background-position:right;background-repeat:no-repeat;height:120px;}

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

แบบที่ 2

div#subtitle { background:#8B4513;}

div#container {width: 840px; background: #ffffff;}

div#ribbon{background:#CD853F;}

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

div#page{border: medium double #FFFACD; background:#FFEFD5;border-bottom:medium double#FFFACD;}

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

div#title{padding: 18px 4px 35px; font-size:big;color:#8B4513; background:#FFFFF0;background-image:url(http://gotoknow.org/file/siriporn5633/book2.jpg); background-repeat:no-repeat; background-position:left;height:125px;}

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

แบบที่ 3

div#subtitle {background:#8B4513;}

div#ribbon{background:#CDAA7D;}

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

div#page {border: medium double #A0522D; background:#F5DEB3;border-bottom:medium double#A0522D;}

body{background:#DEB887; background-image:url(http://gotoknow.org/file/siriporn5633/shellbg.jpg);}

div#title{padding: 18px 4px 35px;font-size:big; color:#8B4513;background:#F5DEB3; background-image:url(http://gotoknow.org/file/siriporn5633/shellwel.jpg); background-position:right bottom;background-repeat:no-repeat;height:130px;}

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

แบบที่ 4

div#subtitle { background:#FFC0CB;}

div#ribbon{background:#D02090;}

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

div#page {background:#FFF5EE;}

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

div#title{padding: 10px 4px 35px; font-size: big; color:#D02090;background:#ffffff; background-image:url(http://gotoknow.org/file/siriporn5633/54vw7.jpg); background-repeat:no-repeat; background-position:right;height:120px;}

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

แบบที่ 5

div#subtitle { background:#DB7093;}

div#ribbon{background:#D02090;}

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

div#page {border: medium double#FFE4B5; background:#FFFAF0;border-bottom:medium double#FFE4B5;}

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

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

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