หากต้องการจะเปลี่ยนสีสันของบล็อกใหม่  

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

 

 

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

 

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

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

 

 

แบบที่ 41

div#subtitle {background:#2E8B57;}

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

div#page{background:#F0FFFF;}

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

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

 

                      

 

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

 

 

แบบที่ 42

div#subtitle {background:#3CB371;}

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

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

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

div#title{font-size:big; color:#009900;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/34282yg2.gif); background-position:top;background-repeat:repeat;height:90px;}

                      
 

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

 

 

แบบที่ 43

div#subtitle {background:#FFE4E1;}

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

div#page{background:#FFF5EE;}

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

div#title{font-size:big; color:#D2691E;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/1199436284.gif); background-position:left;background-repeat:no-repeat;height:130px;}

                                  

 

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

 

 

 

แบบที่ 44

div#subtitle {background:#3CB371;}

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

div#page{border:medium double #006400;background:#F0FFF0;}

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

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

                              

 

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

 

 

 

 

แบบที่ 45

div#subtitle {background:#E9967A;}

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

div#page{background:#FFFAF0;}

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

div#title{font-size:big;color:#1C1C1C;background:#FFE4E1;background-image:url(http://gotoknow.org/file/siriporn5633/sn055.jpg);background-position:top center;background-repeat:repeat;height:140px;}

                      

 

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

 

 

 

แบบที่ 46

div#subtitle {background:#EEE8AA;}

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

div#page{background:#FFFACD; }

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

div#title{font-size:big;color:#8B4513;background:#ffffff;background-image:url(http://gotoknow.org/file/siriporn5633/coffee2.jpg);background-position:center;background-repeat:no-repeat;height:140px;}

                        
 

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

 

 

 

 

แบบที่ 47

div#subtitle {background:#EEDD82;}

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

div#page{border:medium double #006400;background:#FFFACD; }

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

div#title{font-size:big;color:#8B4513;background:#ffffff;background-image:url(http://gotoknow.org/file/siriporn5633/bg1-2.gif);background-position:left;background-repeat:repeat;height:120px;}

                      

 

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