การแต่งบล็อก

ศิริพร
ติดตาม ผู้ติดตาม 
ติดต่อ

      

หากต้องการจะเปลี่ยนสีสันของบล็อกใหม่  

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

 

 

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

 

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

   จะได้บล็อกหน้าตาดังตัวอย่างในแต่ละแบบข้างล่างนี้

 

 

แบบที่ 41

div#subtitle {background:#2E8B57;}

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

div#page{background:#F0FFFF;}

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

div#title{font-size:big; color:#009900;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/myblog.gif); background-position:right;background-repeat:no-repeat;height:130px;}

 

                      

 

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

 

 

แบบที่ 42

div#subtitle {background:#3CB371;}

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

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

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

div#title{font-size:big; color:#009900;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/34282yg2.gif); background-position:top;background-repeat:repeat;height:90px;}

                      
 

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

 

 

แบบที่ 43

div#subtitle {background:#FFE4E1;}

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

div#page{background:#FFF5EE;}

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

div#title{font-size:big; color:#D2691E;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/1199436284.gif); background-position:left;background-repeat:no-repeat;height:130px;}

                                  

 

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

 

 

 

แบบที่ 44

div#subtitle {background:#3CB371;}

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

div#page{border:medium double #006400;background:#F0FFF0;}

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

div#title{font-size:big; color:#548B54;background:#FFFFFF;background-image:url(http://gotoknow.org/file/siriporn5633/049.jpg); background-position:right;background-repeat:no-repeat;height:130px;}

                              

 

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

 

 

 

 

แบบที่ 45

div#subtitle {background:#E9967A;}

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

div#page{background:#FFFAF0;}

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

div#title{font-size:big;color:#1C1C1C;background:#FFE4E1;background-image:url(http://gotoknow.org/file/siriporn5633/sn055.jpg);background-position:top center;background-repeat:repeat;height:140px;}

                      

 

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

 

 

 

แบบที่ 46

div#subtitle {background:#EEE8AA;}

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

div#page{background:#FFFACD; }

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

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

                        

 

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

 

 

 

 

แบบที่ 47

div#subtitle {background:#EEDD82;}

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

div#page{border:medium double #006400;background:#FFFACD; }

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

div#title{font-size:big;color:#8B4513;background:#ffffff;background-image:url(http://gotoknow.org/file/siriporn5633/bg1-2.gif);background-position:left;background-repeat:repeat;height:120px;}

                      

 

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

 

 

 

 

 

บันทึกนี้เขียนที่ GotoKnow โดย  ใน css และ blog



ความเห็น (14)

น้ำผึ้งหลวง
IP: xxx.113.36.14
เขียนเมื่อ 

แต่ละครั้งที่นำมาแบ่งปัน  มีแต่สวย ๆ ทั้งนั้น   จะไม่ขอยืมไปใช้ก็กระไรอยู่    ขอขอบคุณนะคะ

แอบเหงา
IP: xxx.12.73.5
เขียนเมื่อ 
อาจารย์คะ ทำไมใส่แล้วไม่ขึ้นรูปอะไรเลย
เขียนเมื่อ 

ขอบพระคุณงาม ๆ ค่ะ คุณครู  ที่ค้นพบการตกแต่งบล็อก  หลังจากที่ปล่อยให้เป็นขาวดำมานาน  ขอบคุณอีกครั้งค่ะ  ขออนุญาตเป็นลูกศิษย์คุณครู  แล้วจะมาเรียนอีกค่ะ

kanya
IP: xxx.47.131.149
เขียนเมื่อ 

สวัสดีค่ะ อาจารย์ ชื่อ กัญญา นะคะ ได้ค้นพบบล็อกของอาจารย์จาก www.google.or.th :แบ่งปัน และเรียนรู้ ข้อมูลเกี่ยวกับการตกแต่งบล็อก จากบล็อกสำเร็จรูปที่แนะนำให้ใช้  ก็ได้ทดลองทำดูแล้วในบล็อกของตัวเองที่กำลังอยู่ในช่วงฝึกหัดทำ ขอบคุณนะคะ  

nulek
IP: xxx.120.116.57
เขียนเมื่อ 

ขอบคุณอาจารย์มากนะคะ ที่ช่วยให้บล็อกหนูมีสีสรรสวยงาม ขึ้นค่ะ

เขียนเมื่อ 
  • สวัสดีค่ะ อาจารย์
  • ขออนุญาตนำไปใช้นะคะ
  • ขอบคุณค่ะ
เขียนเมื่อ 

สวัสดีค่ะ  pa_daeng [มณีแดง คนสวย แซ่เฮ]  เลือกแบบที่ชอบไปปรับใช้ได้เลยค่ะ

เขียนเมื่อ 

สวัสดีค่ะ อ.ศิริพร

ได้ความรู้จากบล็อกของอาจารย์เยอะเลยค่ะ

ขออนุญาตเก็บภาพสวยๆ ไปใช้ในบล็อกของตัวเองนะคะ

ขอบพระคุณค่ะ

IP: xxx.144.187.19
เขียนเมื่อ 

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

สวัสดีคะอาจารย์ศิริพร ขออนุญาตนำผลงานของอาจารย์ไปเผยแพร่ให้กับกลุ่มนิสิต ป.โท บริหารการศึกษา กลุ่มระยอง นะคะ

ขอบพระคุณอย่างสูงนะคะ

โอกาสหน้านำสิ่งดีดีมาฝากอีกนะคะ

เขียนเมื่อ 

ขอบคุณมากๆ ค่ะ ขออนุญาตนำบล็อกที 45 ไปใช้นะค่ะ ต่อไปนี้บล็อกจะได้ไม่ธรรมดาอีกต่อไป ขอบคุณจริง ๆๆ ค่ะ ขอให้สร้างสรรคต่อไปนะค่ะยังมีคนอีกเยอะที่เป็นมือใหม่และงงกับการตกแต่งบล็อก

ประภาภรณ์
IP: xxx.44.32.9
เขียนเมื่อ 

การแต่ง css อยากมั้ยค่ะ อาจารย์เก่งจังค่ะ ขออนุญาตใช้บล็อกที่อาจารย์แต่งไว้ได้มั้ยค่ะ ขอบคุณค่ะ

เขียนเมื่อ 

ขอบคุณสำหรับบล็อกสวยๆ ขอไปแต่งบล็อกนะค่ะ สุขสมหวังทุกประการค่ะ

เบลล์
IP: xxx.143.148.154
เขียนเมื่อ 

สวัสดีค่ะ

ขอถามหน่อยนะคะ

ถ้าเราแต่งรูปเองแล้วจาเอามาแต่งบล๊อก

เราจาทำโค้ดได้ยังไงคะ

คือหนูพึ่งเข้ามาเล่นใหม่ค่ะ