เมื่อวานเขียน แต่งบล็อกแบบสำเร็จรูป      มีตัวอย่างให้ 4 แบบ      
วันนี้มีบล็อกสำเร็จรูปสวยๆอีก 4 แบบ  
ถ้าจะลองเปลี่ยนหน้าตาบล็อกใหม่ๆ  ก็ลองทำดูค่ะ
สำหรับผู้ที่เพิ่งเริ่มแต่งบล็อก ดูขั้นตอนได้ที่  แต่งบล็อกสำเร็จรูป    

 

 

แบบที่ 01

 

div#subtitle {background:#FFE4E1;}

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

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

body{background:transparent url(http://gotoknow.org/file/siriporn5633/food1-3.gif);}

div#title{padding: 18px 4px 35px;font-size:big; color:#DB7093;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/t03.gif); background-position:right center;background-repeat:no-repeat;height:90px;}

                                                                                            

  

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

 
 
 
 
 

แบบที่ 02

 

div#subtitle {background:#6495ED;}

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

div#page{ border: medium double #000080; border-bottom:medium double#000080; background-image: none;}

div#page{background:#F5F5F5;}

body{background:transparent url(http://gotoknow.org/file/siriporn5633/blue-line.jpg );}

div#title{padding: 18px 4px 35px;font-size:big; color:#0000CD;background:#FFFFFF; height:70px;}

                                             

 

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

 
 
 
 
 

แบบที่ 03

 

 div#subtitle {background:#6495ED;}

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

div#page{background:#F5F5F5;}

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

div#title{padding: 18px 4px 35px;font-size:big; color:#0000CD;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/22ki5.jpg); background-position:right top;background-repeat:no-repeat;height:140px;}

                                                                              

  

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

แบบที่ 04

 

div#subtitle {background:#F5DEB3;}

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

div#page{background:#FDF5E6;}

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

div#title{padding: 18px 4px 35px;font-size:big; color:#D2691E;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/26yo1.jpg); background-position:right center;background-repeat:no-repeat;height:150px;}

                                            

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

 

คราวนี้ลองนำไปใช้ดูนะคะ