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

 

การเลือกสี

การเลือกสีที่จะนำมาใช้ในการออกแบบภาพ Animation และเว็บ นั้นสำคัญมาก เพราะว่ามันสามารถทำให้งานของเราออกมาสวยงามและลงตัว

  หลักการนำมาใช้ในการออกแบบ 

1.การเลือกสีโทนเดียวกันที่มีน้ำหนักและความสว่างของสีต่างกัน
โทนสีคงที่แต่ตำแหน่งน้ำหนักความสว่างของสีต่างกัน การเลือกในลักษณะนี้จะทำให้จะได้ความมีมิติให้แก่ วัตถุที่มี รูปร่างและรูปทรง และรวมถึงตัวอักษรไอค่อน ทำให้ เกิดมิติขึ้นมา

 2.เลือกสีต่างโทนแต่น้ำหนักและความสว่างสีเท่ากัน
โทนสีต่างกัน และน้ำหนักความสว่างของสีคงที่ การเลือกในลักษณะนี้จะทำให้สีต่างโทนตัดกันได้อย่างลงตัว ทำให้ดูแล้วฉาบเรียบไม่ตะกุกตะกัก สบายตาดี

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

 4.เลือกกันหลายๆ กลุ่มและมารวมกันเป็นชิ้นงาน
โทนสีจะแยกออกเป็นกลุ่มๆ แล้วนำมาซ้อนกัน จะทำให้เกิดความหลากหลายในชิ้นงาน และสื่อความหมาย สร้างความสนใจในงานได้มาก แต่ควรกะน้ำหนักโทนสีร่วมพอดีๆ ดีมากกว่านั้นจะทำให้ลายตาดูยาก

รายละเอียดการแต่งบล็อก  

-  เมื่อเข้าสู่เว็บ http//learners.in.th แล้วจะมีหน้าตาอย่างนี้

-  เมื่อ Log in เข้าไปจะจะเจอหน้าศูนย์รอมข้อมูล

-  เมื่อเข้าไปแล้วให้เลือกที่เมนูของฉันแล้วเลือกตกแต่งหน้าต่างๆ (แล้วแต่จะเลือก)

ส่วนที่ 1 การตกแต่งหน้าต่างๆ

-  ตัวอย่างเช่น ตกแต่งหน้าศูนย์รวมข้อมูล

-  เมื่อเข้าไปแล้วจะมีให้เลือก 2 อย่างคือ1. เลือกชุดตกแต่ง จะเป็นรูปแบบทีเค้ามีไว้ให้แล้ว 2. แก้ไข CSS ที่ตกแต่งมาเอง ส่วนนี้จะให้เรานำโค๊ดต่างๆมาใส่แล้วตกแต่งเอง (โค๊ดอยู่ทางด้านล่างนะค๊าบพร้อมวิธีใช้ )

-  เมื่อตกแต่งอย่างซะใจแล้วให้ถ้าเลือกแบบที่ 1.คลิกบันทึกชุดตกแต่งที่เลือก
เลือกแบบที่  2.คลิกบันทึกcss

ส่วนที่ 2 การตกแต่งบันทึก

- ให้เลือกเมนูของฉัน แล้วเลือกบล็อกและบันทึก และเลือกจัดการบล็อก เลือกตกแต่ง

- หลังจากนั้นก็เหมือนกับส่วนที่ 1 ครับ

 

โค๊ดต่างๆที่ใช้ในการแต่งบล็อก

ลบพื้นหลังและลบกรอบสีขาว
<style>table {background-color: transparent;border-style: none;border-spacing: none;}td {border: none;border-color: none;background: none;}</style>

เปลี่ยนรูปพื้นหลัง
<style>body{background-attachment: fixed;background-image:url(URL ของรูป);}</style>

เปลี่ยนสีและแบบ Font
<style>body, ul, li, p{font:bold MS Sans Serif;font-size:10pt;color:โค้ดสี;}</style>

เปลี่ยนตัวหนังสือให้ใหญ่และ Font
<style>p b font {font:bold 13px MS Sans Serif;}</style>

เปลี่ยนสี Link
<style>A:link{color:โค้ดสี Link;text-decoration:none;}
A:visited{color:โค้ดสีที่คลิกแล้ว;text-decoration:none}
A:hover{color:โค้ดสีที่ลากผ่าน;text-decoration: none;}</style>

เปลี่ยน Bullet (จุดกลมๆที่อยู่หน้า Group Blog)
<style>ul{list-style: ;list-style-image: url(URL ของรูป);}</style>

 เปลี่ยน Title Bar (แถบสีฟ้าที่อยู่บนและล่างสุด)
<script>
var tt = 0;
var FMess = new Array("ข้อความที่ 1","ข้อความที่ 2","ข้อความที่ 3")
function FTitle()
{
document.title = FMess[tt]
tt = (tt < (FMess.length -1)) ? tt + 1 : 0;
setTimeout('FTitle()',700);
}
FTitle();
</script>

ทำให้รูปไม่มีกรอบ
<style>img {border: none;}</style>

เปลี่ยน Cursor
<body style="cursor:url(URL ของรูป ไฟล์ .ani หรือ .cur)">

 เปลี่ยนสี Scrollbar (แถบลากขึ้นลงด้านขวามือ)
<STYLE> body { scrollbar-3d-light-color:โค้ดสี; scrollbar-arrow-color:โค้ดสี; scrollbar-3d-light-color:โค้ดสี; scrollbar-arrow-color:โค้ดสี; scrollbar-base-color:โค้ดสี; scrollbar-dark-shadow-color:โค้ดสี; scrollbar-face-color:โค้ดสี; scrollbar-highlight-color:โค้ดสี; scrollbar-track-color:โค้ดสี; scrollbar-shadow-color:โค้ดสี; }</STYLE>

เปลี่ยนรูปเรารักในหลวง (Login ท้ายชื่อใน Comment)
<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="http://www.bloggang.com/images/smile.gif") {document.images[i].src="URL ของรูป"}</script>

จำนวนผู้ชมออนไลน์
<script src="http://fastonlineusers.com/on4.php?d=URL บล็อคของคุณ"></script> : Users Online

ใส่รูปภาพ
<img src="URL ของรูป" "border=0">

ใส่รูปภาพพร้อมคำพูด
<img src="URL ของรูป" alt="ข้อความที่ต้องการ">

ใส่รูปให้กล่อง Comment
<style/css>textarea{width:300;height:200;background:url(URL ของรูป);color=โค้ดสีเวลาพิมพ์; font-family : MS Sans Serif; font-size:14pt; }</style>

ส่งอีเมล์
<a href="mailto:ที่อยู่อีเมล์ของคุณ">ส่งอีเมล์</a>

หรือใส่รูป

<a href="mailto:ที่อยู่อีเมล์ของคุณ"><img src="URL ของรูป"></a>

เปลี่ยน Logo Bloggang
<script>ldocument.images[0].src="URL ของรูป"; document.images[0].width =0 ; document.images[0].height =0</script>

ทำ Link
<a href ="URL Link">ข้อความที่ต้องการ</a>

ทำ Link เปิดหน้าใหม่
<a href =URL Link target=_blank>ข้อความที่ต้องการ</a>

 ทำรูปให้กับ Link
<a href="URL Link"><img src="URL ของรูป"></a>

 ทำรูปให้กับ Link (เปิดหน้าใหม่)

<a href="URL Link" target=_blank><img src="URL ของรูป"></a>

เปลี่ยน Now Here
<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="http://www.bloggang.com/images/now.gif") {document.images[i].src="URL ของรูป"}</script>

Theme อิสระ - เมนูซ้าย, ขวา เปลี่ยนไม่ได้
ทำกรอบรอบๆบล็อค
<script>
if (document.all)
document.body.style.cssText="border:10 ridge โค้ดสี"
</script>

ข้อความต้อนรับ
<SCRIPT>
<!-- Begin
alert("ข้อความที่จะทักทาย")
// End -->
</script>

ข้อความบอกลา
<Script> Sub Window_onUnLoad() alert("ข้อความที่ต้องการ") End Sub </Script>

เปลี่ยนสีตัวหนังสือ
<font color="โค้ดสี">ข้อความที่ต้องการ</font>

ลูกเล่นเมื่อเปลี่ยน Webpage
<="Page-Enter" content="RevealTrans (Duration=3, Transition=23)">
<="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">

จำนวนผู้ชมทั้งหมด
<center><script src="http://fastwebcounter.com/secure.php?s=ใส่ URL บล็อค ของคุณที่นี่ค่ะ"></script></center>

กรอบนับ Comment โดยคุณ กึ่งยิงกึ่งผ่าน
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<fieldset style="border:โค้ดสี double 3px; padding:20"> <legend align=center><img src=URL ของรูป> Comment No. ' + i + ' <img src=URL ของรูป> </font></legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}</script>

โค้ด กลับขึ้นข้างบนของ Page
<center><a href="#top">TOP</a></center>

 โค้ดทำกรอบและเปลี่ยนคำให้กับ Submit และ Reset
<script>
document.forms.reply.Submit.value = "Submit";
document.forms.reply.Reset.value = "Reset";
document.forms.reply.Submit.style.width = 100;
document.forms.reply.Reset.style.width = 100;
document.forms.reply.Submit.style.height = 30;
document.forms.reply.Reset.style.height = 30;
document.forms.reply.Submit.style.backgroundColor = "black";
document.forms.reply.Reset.style.backgroundColor = "black";
document.forms.reply.Submit.style.color = "#e65c7c";
document.forms.reply.Reset.style.color = "#e65c7c";
document.forms.reply.Submit.style.border = "3px double #e65c7c";
document.forms.reply.Reset.style.border = "3px double #e65c7c";
</script>

Submit = เปลี่ยนเป็นคำที่ต้องการแทน Submit
Reset = เปลี่ยนเป็นคำที่ต้องการแทน Reset
100 = ความยาวของกรอบ
30 = ความสูงของกรอบ
black = สีพื้นหลังที่ต้องการ
#e65c7c = สีตัวอักษรที่ต้องการ
3px double #e65c7c = ขนาด, ชนิด, และสีกรอบที่ต้องการ
ชนิดกรอบจะมี solid, inset, outset, groove, ridge, dashed, dotted, หรือ double

โค้ดเปลี่ยนรูปตรง Rss Feed
<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="http://www.bloggang.com/images/icon_rss.png") {document.images[i].src="URL ของรูปที่ต้องการ"}</script>

โค้ดเปลี่ยนรูปตรง My FriendFlock
<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="http://www.bloggang.com/images/icon_network_mini1.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>

 โค้ดใส่ background

เปลี่ยนรายละเอียดที่ต้องการ ตรงข้อความ สีชมพู
คำสั่งที่ใส่ใน script จะแสดงผลทุกบล็อก
คำสั่งที่ใส่ที่ช่องรายละเอียดตอนสร้างบล็อก จะแสดงเฉพาะที่บล็อกนั้น

โค๊ด bg แบบ fixed ไม่ให้ bg เลื่อนลงตาม scroll bar

<style>body{background-attachment: fixed;background-image:url(http://..........);}</style>

 โค๊ด bg ด้านซ้ายของบล็อก

<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-position:left ;background-repeat:repeat-y ;background-attachment : fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>

 โค๊ด bg ด้านขวาของบล็อก

<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-position:right ;background-repeat:repeat-y ;background-attachment : fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>

 โค๊ด bg line หัวบล็อก

<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-repeat : repeat-x ;background-attachment : fixed; background-color: "……ใส่สีพื้นหลัง……";}</style>

 โค๊ด bg line ใต้บล็อก

<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ; background-position:bottom ;background-repeat : repeat-x;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>

 โค๊ด bg เป็นรูปภาพเดียวทั้งหน้า

<style>Body{background-image:url(http:XXX);background-position: center (bottom left..etc..);background-repeat: no-repeat;background-attachment: fixed;background-color:color code;}</style>

 โค๊ด bg โดยใช้สี

<style>body{background:color code}></style>

โค๊ด bg โดยไล่เฉดสี (gradient)

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='color code 1', startColorstr='color code 2', gradienttype=0);">

gradienttype 0 ไล่สีตามแนวนอน
gradienttype 1 ไล่สีตามแนวตั้ง

โค๊ด bg แบบ tile

<style>body{background-image:url(URLของภาพ);}</style>

 โค้ดใส่กรอบและรูปภาพให้กล่องคอมเม้นท์

เปลี่ยนรายละเอียดที่ต้องการ ตรงข้อความ สีชมพู
นำโค๊ดไปจัดที่โปรแกรม notepad ก่อนนำไปใส่ที่ script area นะค่ะ

<style>
textarea{
width: 300;
height: 200;
background: url(URL ของรูปที่ต้องการ);
color: โค้ดสีเวลาพิมพ์ข้อความ;
font-family: MS Sans Serif;
font-size: 15pt;
border: double 5px โค้ดสีกรอบที่ต้องการ;}
input{
background: โค้ดสีพื้นหลังตรงที่จะพิมพ์ชื่อ;
color: โค้ดสีเวลาพิมพ์ชื่อ;
border: double 2px โค้ดสีกรอบตรงที่จะพิมพ์ชื่อ;}
</style>

 ขนาดของรูปกราฟิกที่นำมาใช้งาน

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

  • ขนาดของรูป Background   =   964 x ตามความต้องการ px
  • ขนาดของรูปในส่วน Head  =  940 x 132 px
  • ขนาดของรูปพื้นหลัง breadcrumbs-top และ breadcrumbs-bottom  = 940 x 28 px
  • ขนาดของรูปพื้นหลังให้กับ หัวข้อเมนูบน Sidebar  = 300 x 20 px
    (สารบัญ,ข่าวล่าสุด,ข่าวล่าสุด,กิจกรรมที่กำลังจะเกิด,พอดคาสต์ล่าสุด,เกี่ยวกับเว็บไซต์นี้,ติดต่อ)
  • ขนาดของรูปที่ใช้ในการตกแต่ง Sidebar =  300 x ตามความต้องการ px
    (ส่วนใหญ่จะมีความสูงไม่มาก เป็นรูปลายพื้น หรือสีพื้นแล้วให้มัน repeat)
  • ขนาดของรูปที่ใช้ในการใส่พื้นหลังให้กับ Footer  = 940 x 56 px
  • ขนาดของรูปที่จะนำมาประกอบในส่วนทางขวาที่ใช้แสดงข้อมูลของหน้าเพจ = 630 x ตามความเหมาะสม px

 

อ้างอิง :  http://gotoknow.org/blog/aboutportal/309033

            :  http://sukumal.brinkster.net/meaploy/angel/color.html

            : http://www.jobpub.com/articles/showarticle.asp?id=352

            :  http://www.tlcthai.com/webboard/view_topic.php?table_id=1&cate_id=154&post_id=64474

           :http://www.bloggang.com/viewdiary.php? id=hattori&month=09-2008&date=18&group=20&gblog=1