ตกแต่งบล็อคให้สวยงาม

 วันที่  20  มิถุนายน  2552  อาจารย์ดิศกุล  สอนการนำรูปภาพเข้า  การแก้ไขและเพิ่มเติม  และนำเสนอผลงานของกลุ่มอื่นให้ดูด้วย  และวันนี้ได้ความรู้เพิ่มเติมในเรื่องการตกแต่งบล็อคให้สวยงามจากน้องกรุงด้วย  พอกลับมาถึงบ้านก็ศึกษาเพิ่มเติม  จนได้ไปรู้จักเว๊บไซด์ของอาจารย์ศิริพร  อาจารย์ใจดีมากเลย  ก็ได้เข้าไปขออนุญาตอาจารย์ขอนำโค๊ดที่ได้มาแนะนำให้สมาชิก ป.โทบริหารการศึกษา ม.บูรพา รุ่น 1  ระยอง  ได้ศึกษา  สนใจก็อ่านต่อนะจ๊ะ

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

    

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;}

                                                          


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

 

 

 

แบบที่ 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;}

                                         

 

ถ้าไม่สะใจก็เข้าไปที่เว๊บไซด์ของอาจารย์ได้ตามนี้จ๊ะ

http://gotoknow.org/blog/blog-css/148761