แต่งบล็อกสำเร็จรูปให้เลือกใช้ 5 แบบ

         

                                  มีบล็อกที่ตกแต่งสำเร็จรูปมาแล้ว  5 แบบ   

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

         

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

    

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

          

  

 

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

 

 

 

 

 

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

 

 

 

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

 คลิกเลือก  บันทึก CSS   ดังรูป  

 

 

 

 

เป็นอันเสร็จสมบูรณ์ จะได้บล็อกหน้าตาดังตัวอย่างในแต่ละแบบข้างล่างนี้          

 

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

 

 

แบบที่ 8

div#subtitle {background:#8DB6CD;}

div#ribbon{background:#4F94CD;}

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

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

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

div#title{font-size: big; color:#36648B; background:#F0F5FA;background-image:url(http://gotoknow.org/file/siriporn5633/1189935_5021421.gif);background-repeat:no-repeat;background-position:bottom right; height:130px;}

                                                          


<p> </p> <p class="MsoNormal" style="margin: 0cm 0cm 0pt">   </p> <p class="MsoNormal" style="margin: 0cm 0cm 0pt"></p> <p class="MsoNormal" style="margin: 0cm 0cm 0pt"></p> <p class="MsoNormal" style="margin: 0cm 0cm 0pt">  จะได้บล็อกที่มีสีสันลวดลายตามรูป sample blog 8 </p> <p class="MsoNormal" style="margin: 0cm 0cm 0pt"> </p> <p align="center"> </p>

 

 

แบบที่ 9

div#subtitle { background:#FFA07A;}

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

div#page {background-image:url(http://gotoknow.org/file/siriporn5633/tree.jpg);}body{background-image:url(http://gotoknow.org/file/siriporn5633/30x30_mexican_tiles.jpg);background-repeat: repeat;}

div#title{font-size: big; color:#FF1493;  background:#FFC0CB;   background-image:url(http://gotoknow.org/file/siriporn5633/bg49.gif);background-repeat:repeat;background-position:top;   height:100px;}

                               

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

      

 

 

แบบที่ 10

div#subtitle {background:#698B69;}

div#ribbon{background:#9BCD9B;}

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

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

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

div#title{font-size:big; color:#FF6A6A;  background:#F5DEB3;   background-image:url(http://gotoknow.org/file/siriporn5633/view1.gif);background-repeat:repeat;background-position:top;   height:100px;}

                                  

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

 

แบบที่ 11

div#subtitle {background:#CDC0B0;}

div#ribbon{background:#CDC5BF;}

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

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

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

                        

 

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

     

   

แบบที่ 12

div#subtitle {background:#C71585;}

div#ribbon{background:#FFB6C1;}

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

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

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

div#title{font-size: big; color:#C71585;  background:#FFCCFF;   background-image:url(http://gotoknow.org/file/siriporn5633/bgh19_3.gif);background-repeat:repeat;background-position:top;   height:100px;}

                                         

 

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