อยากให้บล็อกแปลกๆแหวกแนว สวยๆ แบบหน้าตาเฉย ก็เชิญครับ ผมเป็นคนหน้าตาเฉยน่ะครับ

แหม ต้องขอออกตัวก่อนว่า ขออภัยคุณใยมดจริงๆครับ ที่พอมีเวลาหน่อย ก็กลับไม่ได้เขียนบันทึกแต่งบล็อก อิอิ โดนหมั่นไส้เสียจน คุณใยมดลาออกเสียแล้ว แต่คนเราอย่าไปยึดอะไรมากแหละครับดีแล้ว เพราะที่ผมตั้งขึ้นมาก้แบบ หน้าตาเฉย สำหรับพวกที่แบบ อิอิ ไม่ค่อยมีเวลา พอมีเวลาก็เข้ามาเขียนแบบหน้าตาเฉย ให้คนแปลกใจเล่นครับ มีแต่คนมาตามรีบให้ไปดู บันทึกนี้เลยต้องให้เป็น วิทยาทานครับ เฮ้อ เนี่ยล่ะน้า ไปรับปากไว้ อิอิ ก็ต้องรับกรรมกันไป แต่ช่วยอ่ะช่วยได้ครับ แค่ช้าไปหน่อย แฟนขับ เลยลดปริมาณจากที่ไม่ค่อยมีอยู่แล้ว กลายเป็นไม่มีเสียเลย

สำหรับผู้เริ่มต้นก็เชิญไปศึกษาได้ที่บล็อก อาจารย์ศิริพรนะครับ

Tips ต่อไปนี้ ลองนำไปใช้กันนะครับ

theme boy
Design by BoyBoy
"theme สวยๆจากพี่บอยค่ะ น่ารักคิกขุค่ะ ดูหวานๆ แต่อย่าบอกเค้านะคะว่านี่ผู้ชายทำ สงสัยจะโรแมนติคน่าดูเลยค่ะ ที่ learner  ธีมนี้ดูเหมือนจะฮอตฮิต มากเลยล่ะค่ะ "

ค่าสี  : 95 ค่าความเข้มสี : 70

div#title {padding: 40px 4px 70px;
font-size:big;
color:#095960;
background: #F9D6DC;
background-image:url("http://gotoknow.org/file/minisock/boy_banner2.jpg"); background-repeat:no-repeat;
background-position:center;
height:90px;}

div#title span {display:none;}

div#subtitle {font-size:medium;}

body{ background: #ffffff;
background-image:url("http://gotoknow.org/file/minisock/2250.jpg");
background-repeat: repeat;}

div#container{width: 840px;
background: #ffffff;
border:2px A solid border #095960;}

div#content2 {width: 570px;
background-image:
url("http://gotoknow.org/file/minisock/bg9.gif");
background-repeat:repeat;
background-position:center;
background-attachment :no-fixed;}

div#sidebar2 {width: 265px;
background: #ffffff;
font-size:small;
background-image:
url("http://gotoknow.org/file/minisock/bg.jpg");}

form{border:2px dotted # FE72B1;
background-image:
url("http://gotoknow.org/file/minisock/b5.jpg");
background-repeat:repeat;
background-position:right;
background-color:# F7F7F7;}

div.item {border-bottom:2px dotted #095960;}
 theme mew
Design by Miss Strawberry
" theme ของ มิวค่ะ ดูอาร์ตดีค่ะ สวยดี ก็เลยเอามาแจกกันจ้ะ มีคนแอบเอาไปใช้แล้วด้วยนะคะ แสดงว่าได้รับความนิยมอยู่เหมือนกันนะ "
 ค่าสี : 95  ค่าความเข้ม : 0

div#title {padding:40px 10px 45px;
color:#FFFFFF;
background-image:
url("http://gotoknow.org/file/minisock/hc28.jpg");
background-repeat:repeat;
background-position:center center;
height:110px;}

div#title span {display:none;}

div#subtitle {font-size:medium;}

body{background-image:
url("http://gotoknow.org/file/minisock/113.jpg ");
background-repeat:repeat;}

div#container {width: 810px;
border: dashed 4px #FFFFFF}

div#content2 {border-right: 4px dotted #F31C7E;
width: 579px;
background-image:
ur("http://learners.in.th/file/miyaki/con7c.jpg");
background-repeat:repeat;
background-position:center top;}

div#sidebar2 {width: 221px;}

form{background-image:
url("http://gotoknow.org/file/minisock/Untitled-3.jpg");
background-repeat:repeat;
background-position:center bottom;
background-color:#FFFFFF;}
theme tom
Design by MorMor
" theme สีฟ้าสดใสจากสมาชิก learner ค่ะ ดูเรียบๆแต่ก็สร้างความสดใสให้กับ
ผู้มาเยือนได้ดีที่เดียวเชียวค่ะ " 

ค่าสี : 48  ค่าความเข้ม: 98

div#title{padding: 10px 4px 55px;
font-size: 2em;
color:#ffffff;  
background:#ffffff;
background-image:url("http://gotoknow.org/file/minisock/theme6head.jpg");
background-repeat:no-repeat;
background-position:center center;
height:35px;}

div#title span {display:none;}

body{ background:#ffffff;
background-image: url("http://gotoknow.org/file/minisock/theme6out3.jpg");
background-repeat: repeat;
background-attachment : no-fixed; }

div#container {width: 800px;}

div#sidebar2 {width: 221px;}

div#content2 {width: 570px;
background: #FDF1FE;
background-image:url("http://gotoknow.org/file/minisock/theme6in+copy.jpg");
background-repeat:repeat;
background-attachment :no-fixed; }

 
theme view
Design by RainBowSix
" theme ของหนึ่งในผู้ประสานงาน G2K เอามาแจกกันค่ะ สวยดี เท่ห์ๆ สไตล์หนุ่มๆน่ะค่ะ เอาแบบคิกขุมาแจกก็เยอะแล้วค่ะ เลยอยากเปลี่ยนแนวบ้างค่ะ "

ค่าสี : 1   ค่าความเข้มสี : 1

div#title{font-size: 2em;
color:#ffffff;
background-image:url("http://gotoknow.org/file/minisock/Headcity.jpg");
background-repeat:no-repeat;
background-position:center left;
height:130px;}

div#title span {display:none;}

body{ background:#ffffff;
background-image: url("http://gotoknow.org/file/minisock/bgcity.jpg");
background-repeat: repeat;
background-attachment : fixed;}

div#container {width: 840px;
border-width: 0px ;}

div#content2 {width: 570px;
background-image: url("http://gotoknow.org/file/minisock/bgcon.jpg");
background-repeat:no-repeat;
background-position:right top;}

div#sidebar2 {width: 250px;}

td.calendar_link {
text-align: center;
font-weight: bold;
margin: 2px;
padding: 2px;
border: 0px;  
background-image:url("http://gotoknow.org/file/minisock/ccc.jpg")}
 
theme minisock
Design by MiNiSocK
" theme สุดท้าย..ท้ายสุด เป็น theme ของหนึ่งในผู้ประสานงาน G2K เช่นเดียวกันค่ะ แล้วก็เป็น theme ของเจ้าของบันทึกนี้ด้วยค่ะ..อิอิ อย่าลืมอุดหนุนกันนะคะ " 
ค่าสี :52  ความเข้มสี :100
div#title{padding: 10px 25px 45px;   
font-size: medium;
color:#f3ac3c;    
background:#000000;  
background-image:url("http://gotoknow.org/file/minisock/acar17.jpg");    
background-repeat:no-repeat;  
background-position:center center;  
height:95px;}

div#title span {display:none;} 

body{background:#def5fa;
background-image: url("http://gotoknow.org/file/minisock/back+copy.jpg");
background-repeat:repeat;}

div#container {border: dotted 4px;
color:#0577d6;
width: 800px;}

div#content2 {width:595px;
background-image: url("http://gotoknow.org/file/minisock/bg+copy.jpg");
background-repeat:repeat;
background-position:left top;
overflow: hidden} 

div#sidebar2 {width: 195px;
background-image: url("http://gotoknow.org/file/minisock/sidebar2+copy.jpg");
background-repeat:repeat;
background-position:right middle;}     

form{
background-image:url("");
background: #ffffff; }

div#main {width: 800px;}  
ขอขอบคุณ คุณ minisock ที่ให้ความอนุเคราะห์ครับ

รูป theme ค่าสีและความเข้มอยู่ซ้ายมือนะคะ ส่วนโค๊ดที่ต้อง copy ไปวางอยู่ทางขวามือเลยครับ

ค่าสี : 67 %
ค่าความเข้มสี : 100 %

Theme

by :

 คุณ นิติยา

theme ดอกไม้สวยงามสำหรับคุณผู้หญิงค่ะ อันนี้เป็นฝีมือนักศึกษา วิชา E-Commerce มอ. ค่ะ

div#container {border: double 2px #FA2BB8}

body{ background: #FFFEFF;
background-image: url("/file/tozusu/9.bmp");
background-repeat: repeat;}

div#title{padding: 40px 350px 60px;
font-size: medium;
color:#000000;
background-image:url("/file/tozusu/8.bmp"); background-repeat:repeat; background-position:center center;
height:30px;}

div#title span {display:none;}

div#content2 {
background-image: url("/file/tozusu/9.bmp"); background-repeat:repeat; background-attactment : fixed;
}

 

 

ค่าสี : 9
ความเข้มสี : 0

Theme

by :

คุณ จักรกฤษณ์

Theme ราศี ฝีมือผู้ประสานของ Gotoknow.org ค่ะ มีทั้งหมด 12 ราศี ค่ะ โดยสุตั้งค่าโค๊ดเป็นราศีตุลย์ไว้ค่ะ ถ้าต้องการเปลี่ยนก็ copy โค๊ด ส่วนสีส้มที่เป็นของราศีตัวเองจากนั้นก็ไปแทนที่ส่วนที่เป็นสีแดงในโค๊ดด้านบนค่ะ ก็จะได้ theme ประจำราศีของตนเองค่ะ

div#container {width: 810px;}
div#content2 {width: 579px;
background-image: url("/file/tozusu/oo2.jpg");
background-repeat:repeat;
background-position:;
}

div#sidebar2 {width: 221px;
}

div#subtitle {font-size:medium;}
body{background: ;
background-image: url("/file/tozusu/bgzodi.jpg");
background-color #000000;
background-repeat:repeat;}

div#title {padding:80px 60px 45px;
font-size:;
color:#ffffff;background:#ffffff;
background-image:url("/file/tozusu/librahead.jpg");
background-repeat:no-repeat;
background-position:center center;height:70px;}

div#title span {display:none;}
form{
background-position:center bottom;
background-color:#FFFFFF;
}

-----------------------------------------------
`HEADER`

head libra ราศีตุลย์ /file/tozusu/librahead.jpg

head aquarius ราศีกุมภ์  /file/tozusu/aquariushead.jpg

้้head aries ราศีเมษ /file/tozusu/arieshead.jpg 

head cancer ราศีกรกฎ /file/tozusu/cancer.jpg

head capricorn ราศีมังกร /file/tozusu/capricorn.jpg

head gemini ราศีมิถุน /file/tozusu/gemini.jpg

head leo ราศีสิงห์ /file/tozusu/leo.jpg

head pisces ราศีมีน /file/tozusuPisces.jpg

head sagitarius ราศีธนููู /file/tozusu/sagitarius.jpg

head scorpio ราศีพิจิก /file/tozusu/scorpio.jpg

head taurus ราศีพฤษภ /file/tozusu/Taurus.jpg

head vergo ราศีกันย์ /file/tozusu/Virgo.jpg 

 

ค่าสี : 8% 

ความเข้มสี : 50%

Theme

by :

คุณ ฐิตาวรรณ

theme หมีน้อยน่ารัก สำหรับสาวๆ อีกแล้วค่ะ ฝีมือนักศึกษาวิชา E-Commerce มอ. ค่ะ

 body{ background:#ffffff;background-image: url("/file/tozusu/background.gif");
background-repeat: repeat;
background-attachment : no-fixed;}

div#sidebar2 {width: 225px;}

div#title{padding: 10px 4px 90px;
font-size: 2em;color:#ffffff;   
background:#ffffff;
background-image:url("/file/tozusu/teddybear.jpg"); 
background-repeat:no-repeat;
background-position:center center;height:35px;}
div#title span {display:none;}

div#container {width: 810px;}
div#content2 {width: 580px;
background: #FFFFFF;
background-image:
url("/file/tozusu/bg_check14.gif");
background-repeat:repeat;
background-attachment : no-fixed;}

form{
border: medium double #5EA2FF;
background-image:url("/file/tozusu/bg_check14.gif");
background-repeat:repeat;

div.comment_item
{border: 3px dotted #753312;}

ค่าสี 14%
ความเข้มสี 100%

Theme

by :

คุณ อรดา

theme สีส้มสดใส น่ากิ๊น น่ากิน ของ เพื่อนสุเองค่ะ นักศึกษาวิชา E-Coomerce มอ. ค่ะ

 div#container{width:810px;}

div#content2 {float:left; width: 569px;
background-repeat:no-repeat;
background-attachment:fixed; }
div#sidebar2 {float: right; width: 221px;}

div#container {border: dashed 5px;}
div#title{padding: 10px 4px 35px;
font-size:3; color:#ffffff;
background-image:url("/file/tozusu/hdorg.jpg");
background-repeat:no-repeat;
background-position:center center;
height:35px;}
div#title span {display:none;}

body{
background: #f5f7f9; background-image: url("/file/tozusu/bgs.jpg");
background-repeat:repeat;
background-attachment:fixed;
}

form{
border:2px dotted 8dc63f;
background-image:url("/file/tozusu/orange.jpg");
background-repeat:repeat-y;
background-position:right;
background-color:#FFFFFF;
}

div.comment_item {
margin: 0px 0px 8px;
padding: 10px;
border: 1px outset 8dc63f;
}

div#content2 {width: 579px;
background-image: url("/file/tozusu/orangebg.jpg");
background-repeat:no-repeat;
background-position:left top;}

 

 

ค่าสี : 99
ความเข้ม : 87 

Theme

by :

Aratus

theme ฝีมือผู้ประสานงาน G2K อีก 1 คน (สุเองค่ะ )ชื่อว่า theme ใบไม้สีแดงค่ะ ที่ learners ขายดี ก็เลยเอามาแจกที่นี่บ้างค่ะ

 		div#container {width: 810px;}
div#container {border: dashed 3px #BD0722}
div#content2 {width: 579px;
background-image: url("/file/tozusu/content2x%27mas.jpg");
background-repeat:no-repeat;
background-position:left top;
}
div#sidebar2 {width: 221px;
}
div#subtitle {font-size:medium;
}
body {background: ;
background-image: url("/file/tozusu/bgbear.jpg");
background-repeat:repeat;
}
div#title {padding:60px 60px 45px;
font-size:;
color:#ffffff;
background:#FDC8D0;
background-image: url("/file/tozusu/headblogbearnew.jpg"); 
background-repeat:no-repeat;
background-position:center center;height:60px;
}
div#title span {display:none;
}
form{
background-image: url("/file/tozusu/content2bear.jpg");
background-repeat: repeat;
background-position: center bottom;
background-color: #FFFFFF;
}
สรุปว่า อันนี้เป็นแบบสำเร็จรูปครับ ก็copy ไปวางที่ ช่อง css ที่ตกแต่งมาเองนะครับ
ถ้าอยากแต่งเองก็เอาโค็ดนี้ไปครับ
 div#title span {display:none;}ul#user-menu ul

{background-image: url("URL");

background-repeat:repeat;   clear: both;} 

คือ  Toolbar ด้านบน

body{background-image:url("URL");} 

คือ  background  ข้างหลังสุด  

html {

 

    scrollbar-arrow-color: #FFFFFF;

     scrollbar-darkshadow-color: #FFFFFF;                                            

    scrollbar-face-color: #FFFFFF;

 

    scrollbar-highlight-color: #FFFFFF;

 

    scrollbar-track-color: #FFFFFF;

      }    ส่วนตรงนี้เป็นค่าสี ต้องการเปลี่ยนก้อเปลี่ยนได้

div#page {background-image:url ("URL"); 

border: thin dashed white; 

width: 910px; 

text-align: left; 

margin-left: auto; 

margin-right: auto;  

}

คือ  background  ข้างในอันที่อยู่ทางซ้ายมือ   

div#title {height: 230px; 

padding: 10px 4px 10px; 

 font-size: 2.5em; 

color: #FFFFFF; 

background-image:url("URL");

} 

คือ  Head บล็อก   

 

div.breadcrumbs

       {

            padding: 6px 8px;

            clear: both;

       }

 

div#searchbar

       {

            float: right;

       }

 

div.badge-code

       {

            font-size: 0.8em;

            clear: both;

            padding: 2px 4px;

            position: relative;

       }

 

div#footer

       {

            font-size: 0.8em;

            text-align: center;

            clear: both;

            border-top: 2px solid #FFFFFF;

            padding: 10px 4px;

       }

 

div#content1

       {

            background: #434951;

       }

 

/*-- two column --*/

 

div#content2

       {

        background: #434951;

        float: left;

            width: 640px;

            border-right: 2px solid #FFFFFF;

       }

 ส่วนตรงนี้ก้อเป็นส่วนของ ตัวอักษร ว่าให้อยู่ตรงไหน สีอะไร ถ้าจะเปลี่ยนก้อเปลี่ยนที่ค่าสี

 

div#sidebar2 { background-image:url("URL"); 

float: right; 

width: 254px; 

padding-right: 5px; 

} 

คือ   background  ข้างในที่อยู่ทางขวามือ  

/* Calendar */

 

table.calendar {

}

 

td.calendar_link {

            text-align: right;

            font-weight: bold;

            margin: 1px;

            padding: 1px;

            border: 1px solid #FFFFFF;

            background: #434951;

}

 

td.calendar_no_link {

            text-align: right;

            color: #000000;

            margin: 1px;

            padding: 1px;

            border: 1px solid #FFFFFF;

            background: #434951;

}

border: dashed 3px #FFFFFF

ส่วนตรงนี้เป็นส่วนของปฎิทิน ก้อสามารถเปลี่ยนค่าสีได้ตามต้องการเลยครับ

ก้อ Copy Code ไป แล้วก้อนำลิ้งค์รูปที่คุณต้องการจะใส่มาใส่ที่  URL  น๊ะครับ