พิ้นหลังสวย

โคตพิ้นหลัง

pskloei (ผาสามยอดวิทยาคม) อีเมลติดต่อ มีต่อ »

home / blog / newblogloei / 287670

อ่าน: 25

มีวิธีเพิ่มพื้นหลังสำหรับการทำบล็อคมาฝาก

โค๊ดพื้นหลัง

เครดิต : คุณ กัญญา กุ้ง แสงเจริญโรจน์(จำปาพันธ์) โรงเรียนบ้านหนองมะปริง

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

    

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

  

 

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

 

 

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

 คลิกเลือก  บันทึก CSS     เป็นอันเสร็จสมบูรณ์  

      

 

 

 

แบบที่ 1

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

                                                          

 

  

 

แบบที่ 2

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

                               

 

 

        

 

 

แบบที่ 3

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

                                  

 

 

 

แบบที่ 4

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

                        

 

 

   

 

แบบที่ 5

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

ลองดู  5 แบบนะครับ  หากยังต้องการความรู้เพิ่มเติมอีกลองเยี่ยมชมบล็อคนี้ได้เลยครับ

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