จะตกแต่งบล็อกให้มีสีสันสามารถนำรูปสวยๆมาช่วยในการตกแต่งได้  

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

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

 

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

 

 

แบบที่ 55

div#subtitle {background:#D2691E;}

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

div#page{background:#FDF5E6;}

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

 div#title{font-size: big; color:#66CC00;background:#FFFAF0;  background-image:url(http://gotoknow.org/file/siriporn5633/1183269634.gif); background-repeat:no-repeat;background-position:bottom;   height:140px;}

                                    

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

รูป blog 55  

 

 

 

แบบที่ 56

div#subtitle {background:#D2691E;}

div#ribbon{background:# CD3333;}

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

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

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

div#title{ font-size: big; color:#330099;background:#FFF0F5;  background-image:url(http://gotoknow.org/file/siriporn5633/kunsi-rank6.gif); background-repeat:repeat;background-position:top;   height:120px;}

                            

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

รูป  blog 56  

 

 

 

 

แบบที่ 57

div#subtitle {background:#CD6090;}

div#ribbon{background:#CD919E;}

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

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

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

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

                                     

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

 รูป  blog 57 

 

 

    

แบบที่ 58

div#subtitle {background:#CD6090;}

div#ribbon{background:#EE799F;}

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

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

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

 div#title{font-size: big; color:#CC3300; background:#F0FFFF; background-image:url(http://gotoknow.org/file/siriporn5633/sakura266.gif);background-repeat:repeat;background-position:bottom;   height:120px;}

                              

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

รูป  blog 58  

 

 

 

 

แบบที่ 59

div#subtitle {background:#8DB6CD}

div#ribbon{background:#6CA6CD;}

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

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

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

 div#title{font-size: big; color:#4A708B; background:#E0FFFF; background-image:url(http://gotoknow.org/file/siriporn5633/bg_spring_h4.jpg);background-repeat:repeat;background-position:top;   height:130px;}

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

รูป  blog 59  

 

 

 

แบบที่ 60

div#subtitle {background:#9BCD9B;}

div#ribbon{background:#698B69;}

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

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

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

 div#title{font-size: big; color:#CC0000; background:#FFF5EE; background-image:url(http://gotoknow.org/file/siriporn5633/bg_h_cosmos40.gif);background-repeat:repeat;background-position:top;   height:120px;}

                                 

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

รูป  blog 60  

 

 

แบบที่ 61

div#subtitle {background:#FFB6C1;}

div#ribbon{background:#D02090;}

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

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

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

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

                          

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

รูป  blog 61