r a p p e l e r *

<div id="social">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] ?>" send="true" width="450" show_faces="false" font=""></fb:like>

</div>

text-shadow: 0px 2px 3px #555;

ความหมายของเลขแต่ละตัว จาก ซ้าย > ขวา
1 = X-Offset
2 = Y-Offset
3 = Blur
4 = Colour

*** แต่ถ้าอยากให้ text glow มันเข้มขึ้น ก็ซ้ำค่าลงไปแบบนี้ ***

text-shadow: 0px 0px 5px #ffcc00, 0px 0px 5px #ffcc00;

credit: http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

ใน file ข้อมูล ใส่
<div class="details" onmouseover="this.className='details2'" onmouseout="this.className='details'"></div>


ใน file css

ก็ใช้ .details2{อะไรก็ว่าไป}

CSS column น่ะ 

div {

column-count:2;   /*จำนวนคอลัมภ์*/
  column-width: 15em;  /*ความกว้างของคอลัมภ์*/
  column-gap: 2em;   /* ระยะห่างระหว่างคอลัมภ์ */            
  column-rule: 4px solid green;  /* เส้นกั้น */
  padding: 5px;      /* กรอบใหญ่รวมคอลัมภ์ทั้งหมด */
}

• ‘column-count’, to determine the number of columns into which the content of the element will flow.
• ‘column-width’, to describe the optimal width of each column.
• ‘column-gap’, to set the padding between columns.
• ‘column-rule’, to define a border between columns.

/*LINK HEADER2*/
.header2 {
    list-style:none;
    list-style-type:none;
    display:inline;
    font-family: Arial, Helvetica, Tahoma;
    font-size: 20px;
    color:#2372bb;
    text-align:left;
    margin:0px;
    padding:0px;
}

#header2 ul, #header2 ul li { /*Adding a Horizontal or Inline Page Listing in WordPress*/
display: inline;
list-style:none;
list-style-type:none;
text-align:left;
margin:0px;
padding:0px 20px 0px 0px;
}

#header2ul li { /*Adding seperator*/
list-style: none;
display: inline;
padding-right:20px;
margin:0px;
}
   
.header2 a {
    color:#2372bb;
    text-decoration:none;
}
.header2 a:hover {
    color:#FFFFFF;
    text-decoration:none;
}

/*LINK FOOTER*/
.linkfooter {
    list-style:none;
    list-style-type:none;
    display:inline;
    font-family: Arial, Helvetica, Tahoma;
    font-size: 14px;
    color:#FFFFFF;
    text-align:center;
}

#footer ul, #footer ul li { /*Adding a Horizontal or Inline Page Listing in WordPress*/
display: inline;
list-style:none;
list-style-type:none;
text-align:center;
}

#footer ul li { /*Adding seperator*/
border-right: 1px solid #2663a0;
list-style: none;
display: inline;
padding-left:10px;
padding-right:10px;
}
   
.linkfooter a {
    color:#FFFFFF;
    text-decoration:none;
}
.linkfooter a:hover {
    color:#004687;
    background-color:#FFFFFF;
    text-decoration:none;
}
/* END : F O O T E R */

เวลาเราจะให้ ข้อความ หรือ ตาราง มันขึ้นไปอยู่บนสุด ในตารางข้างนอก
เช่น...

*** ตารางสีดำ คือ ตารางนอก คิดซะว่าเป็นตารางที่คนชมเว็บเราจะมองไม่เห็นนะคะ
ตารางสีชมพู คือ ตารางใน คิดซะว่าเป้นตารางที่คนชมเว็บเราจะมองเห็นค่ะ

*** ถ้ายังงงอยู่ แนะนำให้ดูแบบในหน้า link ของเราค่ะ
จะมี ตาราง 3 column : column ซ้าย ยาวสุด
อีก 2 column มันจะสั้น ปกติ มันจะต้องอยู่ตรงกลางค่ะ
แต่ทีนี้ เราจะมาทำให้มันขึ้นไปอยู่บนสุด ระดับเดียวกะ column ซ้าย

เราจะใช้ code valign="top" ใส่ใน ตารางนอก ในส่วนของ <td> ค่ะ

----------

สำหรับ ข้อความ เราจะใช้ code แบบนี้

<table width="100px" height="100px" border="0">
<tr>
<td valign="top"><center>ข้อความ</center></td>
</tr>
</table>

----------

สำหรับ ตาราง เราจะใช้ code แบบนี้

<table width="100px" height="100px" border="0">
<tr><td valign="top">
<table align="center" width="50px" height="50px" border="1" bordercolor="#996666"><tr><td>ข้อความ</td></tr& gt;</table>
</td></tr>
</table>

*** ตัวอักษร เขียว และ แดง คือ ตารางนอก
ตัวอักษร สีดำ คือ ตารางใน

----------

สรุป ก็คือ ใส่ code valign="top" ใน <td> ของตารางนอกน่ะค่ะ

*** ไม่รู้ว่าวิธีนี้จะถูกไหมนะคะ
แต่ใครที่เขียน blog หรือ diary
ใช้ code ที่บอกไว้สำหรับ FF ไป มันก็จะทำให้ดูได้ทั้ง 2 browser ค่ะ***

----------

เวลาเราจะให้รูปมันอยู่ด้านซ้าย
แล้วตัวหนังสืออยู่ด้านขวาน่ะค่ะ
เช่น...

PIX TXTTXTTXT
PIX TXTTXT
PIX

*** ตัวอย่างข้างบนนี้คือ รูปมันยาวกว่าข้อความ
เราอยากจะทำให้ ข้อความ อยู่ระดับเดียวกับด้านบนของภาพ
ก็ใส่ code นี้

<img src="URL" align="left">

ใน "..." เราจะแก้จาก left เป็น right ก็ได้ค่ะ
แล้วข้อความมันก็จะไปอยู่ทางซ้ายแทน

*** แต่!!! มันใช้ได้เฉพาะกะ IE ***

----------

วิธีแก้ code นี้ ให้ใช้ได้ใน FF ก็คือ...

<div><img src="URL" align="left" style="float:left;">ข้อความ</div>
<div style="clear:both;"></div>

คำอธิบาย
- align ใส่ไว้ เพื่อ IE | style >>> float นี่ใส่ไว้เพื่อ FF
- ถ้าเปลี่ยน left เป็น right ก็ต้องเปลี่ยนทั้งใน align และ ใน float นะจ๊ะ
- clear:both นี่สำคัญมากนะคะ ห้ามลืม!!! >>> มันทำให้ ข้อความข้างล่างต่อมา ไม่ขึ้นมาต่อท้าย ข้อความเก่า ของเรา

ขอบคุณความรู้จาก : http://www.divland.com/blog/2007/05/06/flo...clear/#more-101

----------

แหะๆ จบจ้า ง่ายป๊ะ

อันนี้มันแบบ HTML นะคะ
ถ้าแบบ CSS ก็ทำไม่เป็นเหมือนกันค่ะ
ถ้าใครอยากรู้เพิ่มเติม ไปดูต่อได้ในเว็บที่บอกไว้นะคะ

*** ปล. ใครมีวิธีดีกว่านี้ ช่วย mail มาบอก หรือ PM มาบอกก็ได้ค่ะ จะขอบพระคุณเป็นอย่างสูงค่า แฮ่... ***

1) ซ่อน scroll bar

<style type="text/css">body {overflow:hidden;}</style>

หรือว่าจะไว้ในส่วน Body แบบข้างล่างนี้

<body style="overflow:hidden">

----------

CREDIT : น้องแนน NuNaNJuNG [ไป web น้องแนน click ค่ะ]

#########################################################

2) ซ่อน scrollbar ด้านล่าง

<style type="text/css">
body {
overflow-x: hidden;
}
</style>

----------

CREDIT : นาย scoutt [ไปอ่านต่อ click ค่ะ]

#########################################################

2.1) ซ่อน scrollbar ด้านล่าง ใน FF (Fire Fox)
code ใน ข้อ 2 สามารถใช้กับ IE (Internet Explorer) ได้
แต่ถ้าเป้น FF (Firefox) อาจจะต้องใช้ trick นิดหน่อย โดยใช้คำสั่งว่า

<style type="text/css">
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
</style>

CREDIT : นาย jkd [อ่านต่อ click ที่นี่ ค่ะ]

วิธี ใส่เพลง หรือ display file ต่างๆที่ง่ายที่สุด

<embed src="URL">

----------

วิธี ใส่เพลง หรือ display file ต่างๆ แบบกำหนดส่วนต่างๆได้

<embed src="URLเพลง" height="100" width="50" autostart="false" repeat="true" loop="true" type="audio/midi">

* - autostart หมายถึง พอโหลด page เสร็จ จะให้เริ่มเล่นเลยไหม
* - repeat หมายถึง เล่นซ้ำไหม
* - loop หมายถึง จะให้เล่นซ้ำๆ วนไปวนมา ไม่จบใช่หรือไม่
* - type หมายถึง ถ้าเพลงเป็น file แบบไหน ก็ให้เปลี่ยนตรงหลัง type= ให้ตรงกับประเภทของมัน ดังต่อไปนี้ ...

t y p e * - ประเภทของเพลง mp3 > audio/x-mp3 wma > audio/x-ms-wma mpeg > audio/mpeg" wav > audio/wav flash > application/x-shockwave-flash

----------

real แบบ เล็กๆ

<embed src="URL ที่มี .ram หรือ .rm" align="middle" border="0" width="40" height="25" autostart="true" control="small console" controls="playbutton" type="audio/x-pn-realaudio-plugin"></embed>

credit : Chocolaterie*

ใส่ใน head นะจ๊ะ กำหนดทั้งหน้า

<style>
body{ cursor:crosshair; }
}
a{ cursor:crosshair; }
}
</style>

หรือ

<style>
body{CURSOR: url('URL ของ cursor ตอนปกติ');
}
a{CURSOR: url('URL ของ cursor ตอนชี้บน link');
}
</style>

* URL ของ cursor เช่น http://cursaga.atspace.com/cursor/wink.cur

----------

อันนี้ ใส่ ตรงแต่ละที่ๆเป็น link

<a href="http://www.abc.com/" style="cursor:crosshair">ข้อความ</a>

หรือ

<a href="http://www.abc.com/" style="cursor: url('URL ของ cursor ตอนชี้บน link นี้')">ข้อความ</a>

 อยากให้อยู่ตรงไหน ก็ใส่ลงไปตรงนั้นเลยจ้า

<iframe src="URL" name="ชื่อ" frameBorder=0 width=400 height=300 scrolling="yes or no"></iframe>

ตรง scrolling เลือกใส่ อย่างเดียว นะจ๊ะ *
- จะให้มี scrollbar ก็ ใส่ yes
- ไม่ให้มี scrollbar ก็ใส่ no

*ตรง name นี่ กำหนดไว้เพื่อที่ว่า
เวลาจะให้ link page ที่ต้องการมาปรากฎใน iframe น่ะค่ะ

อยากให้อยู่ตรงไหน ก็ใส่ลงไปตรงนั้นเลยจ้ะ

<script language="javascript">
now = new Date();
var thday = new Array ("อาทิตย์","จันทร์",
"อังคาร","พุธ","พฤหัสบดี","ศุกร์","เสาร์");
var thmonth = new Array ("มกราคม","กุมภาพันธ์","มีนาคม",
"เมษายน","พฤษภาคม","มิถุนายน", "กรกฎาคม","สิงหาคม","กันยายน",
"ตุลาคม","พฤศจิกายน","ธันวาคม");

document.write("วัน" + thday[now.getDay()]+ "ที่ "+ now.getDate()+ " " +
thmonth[now.getMonth()]+ " " + (0+now.getYear()+543));
</script>

ส่วนประกอบของ scrollbar เป็นดังนี้



credit : http://eyely.diaryis.com/

｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*｡✿*

c o d e ข อ ง s c r o l l b a r * ก็เป็นดังนี้

ใส่ใน head นะจ๊ะ

<style>
<!--
body {
scrollbar-face-color:#808080;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#FFFFFF;
scrollbar-highlight-color:#808080;
scrollbar-3dlight-color:#808080;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#808080;
}
</style>

รูปภาพเปลี่ยนไป เมื่อเอา mouse วาง

<img src="URL" onmouseover="this.src='URL'" onmouseout="this.src='URL'">

----------

Link ที่เป็นรูปภาพ จะเปลี่ยนไป เมื่อเอ mouse ไปวาง

<a herf="URL"><IMG src="URL" onmouseover="this.src='URL'" onmouseout="this.src='URL'"></a>

<a href="URL"><img src="URLรูป" border="0" style="filter:gray" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'"></a>

BACK

<a href="java script:history.back(1)" target="_self" >back</a>

NEXT

<a href="java script: history.forward()" target="_self" >next</a>

REFRESH

<a href="java script:location.reload()" target="_self" >next</a>

ใส่ใน head นะคะ

<style type="text/css">
<!--
a:link { color: #FF6600; text-decoration: none}
a:visited { color: #FF6600; text-decoration: none}
a:active { color: #FF6600; text-decoration: none}
a:hover { background-color: #808080; color: #FFFFFF; text-decoration: none}
-->
</style>

n o t i c e *

- link หมายถึง สี ของ link อ่ะจ้ะ
- visited หมายถึง สี ของ link ที่เคยกดไปดูมาแล้ว
- active หมายถึง สี ของ link ที่เราเอา mouse ไปกดเลือก ณ ขณะนั้นเลย
- hover หมายถึง สี ของ link จะเป็นสียังไงตอนเราเอา mouse ไปวาง
- text-decoration หมายถึง มีอะไรตบแต่ง link ไหม เช่น จะให้มีเส้นใต้ไหม มีจุดประล้อรอบไหม เป็นต้น
- background-color หมายถึง สีพื้นหลัง (hilight) ของ link