แต่งพื้นหลังบล็อกให้มีลวดลาย  สีสันตามที่ชอบได้        

ถ้าจะลองเปลี่ยนสีสันของบล็อกใหม่ก็ลองนำไปใช้ดูค่ะ 

 

 

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

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

จะได้บล็อกดังตัวอย่างในแต่ละแบบข้างล่างนี้                

 

 

แบบที่ 13

div#subtitle {background:#6495ED;}

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

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

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

div#title{font-size:big; color:#000080;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/tree1.gif); background-position:right center;background-repeat:no-repeat;height:180px;}

                                 

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

 

แบบที่ 14

div#subtitle {background:#6495ED;}

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

div#page{background:#F5F5F5;}

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

div#title{font-size:big; color:#0000CD;background:#FFFFFF;height:90px;}

                           

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

 

 

แบบที่ 15

div#subtitle {background:#CD853F;}

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

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

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

div#title{font-size:big; color:#D2691E;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/118.jpg); background-position:right center;background-repeat:no-repeat;height:120px;}

                          

 

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

 

 

แบบที่ 16

div#subtitle {background:#D8BFD8;}

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

div#page{background:#F5F5F5;}

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

div#title{font-size:big; color:#BA55D3;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/tree4.gif); background-position:right top;background-repeat:no-repeat;height:110px;}

                               

 

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

 

 

แบบที่ 17

div#subtitle {background:#CD853F;}

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

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

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

div#title{font-size:big; color:#D2691E;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/1189320998.jpg); background-position:top;background-repeat:no-repeat;height:150px;}

                    

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

 

แบบที่ 18

div#subtitle {background:#DB7093;}

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

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

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

div#title{font-size:big; color:#C71585;background:#FFF0F5;background-image:url(http://gotoknow.org/file/siriporn5633/1199436368.gif); background-position:center bottom;background-repeat:no-repeat;height:130px;}

                                        

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

 

แบบที่ 19

div#subtitle {background:#548B54;}

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

div#page{background:#F0FFF0;}

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

div#title{font-size:big;color:#458B74;background:#F0FFF0;background-image:url(http://gotoknow.org/file/siriporn5633/tree2.gif); background-position:right ;background-repeat:no-repeat;height:180px;}

                                             

 

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