Bloggang.com : Jจุ้ย : โค้ดกรอบเลื่อน K.นุช

โค้ดกรอบเลื่อน K.นุช

โค้ดกรอบเลื่อน K.นุช

ข้อความที่ต้องการ

นำไปใช้ทุกครั้ง ต้องลบ " * " ออกทุกอันที่เห็นนะครับ
22 ม.ค.
<*TABLE height=273 cellSpacing=0 cellPadding=0 width=359 align=center background=//i75.photobucket.com/albums/i309/mini-cat/fdinga/dinga06.gif border=0>
<*TBODY>
<*TR>
<*TD noWrap width=10 height=39> <*/TD>
<*TD width=179 height=39> <*/TD>
<*TD noWrap width=170 height=39> <*/TD><*/TR>
<*TR>
<*TD noWrap width=10 height=215> <*/TD>
<*TD width=179 height=215>
<*DIV style="SCROLLBAR-FACE-COLOR: #F4E5D3; SCROLLBAR-HIGHLIGHT-COLOR: #78461C; OVERFLOW: auto; WIDTH: 179px; SCROLLBAR-SHADOW-COLOR: #F4E5D3; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #F4E5D3; SCROLLBAR-ARROW-COLOR: #78461C; SCROLLBAR-DARKSHADOW-COLOR: #78461C; HEIGHT: 215px" align=center>
<*P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>แก้ไขข้อความ<*/FONT><*/P>
<*P style="FONT-SIZE: 12px; COLOR: #998a07" align=center>Text Here<*/FONT><*/P><*/DIV><*/TD>
<*TD noWrap width=170 height=215> <*/TD><*/TR>
<*TR>
<*TD noWrap width=10 height=19> <*/TD>
<*TD width=179 height=19> <*/TD>
<*TD noWrap width=170 height=19/font>> <*/TD><*/TR>
<*/TBODY>
<*/TABLE><*/FONT>
Hight = ความสูง
Widht = ความกว้างนะ

เอาหละ เมื่อได้ตัวเลข พร้อมกับโค้ดแล้วนะ มาดูตรงนี้กัน

สีม่วง คือ ความกว้าง + สูง ของรูป นะคะ
สีน้ำเงิน คือ URL ของรูปที่ฝากไว้
สีเขียว คือ ความกว้าง+สูง ของทั้ง 9 ส่วนที่เราแบ่งไว้
สีฟ้า คือ ความกว้าง+สูง ของ ส่วนที่เราแบ่งไว้ตรงกลาง เพื่อใส่ สกอลล์บาร์
สีส้ม คือ โค้ดสกอล์บาร์ (เปลี่ยนสีกันเองนะจ๊ะ ลองมั่วๆดู ว่าอะไรคืออะไรนะ)
สีแดง คือ ส่วนที่ไว้ใส่ข้อความ
สีชมพู คือ ขนาดตัวอักษร (xxpx) และ โค้ดสีอักษรนะคะ (#xxxxxx)

ได้มาจาก : maew_kk

การเขียนบล็อก IV - เปลี่ยนสีตัวหนังสือและเปลี่ยนสีลิ้ง

บล็อกนี้เว้นช่วงห่างจากบล็อกที่แล้วซะหลายวันเลย ก็เนื่องจากมัวแต่ไปทำเว็บไซต์อีกแห่งหนึ่ง

ตอนนี้เรามาต่อกันด้วยเรื่องการเปลี่ยนสีตัวหนังสือ การเปลี่ยนแบบอักษรและการเปลี่ยนสีลิ้งนะค่ะ
ในการเปลี่ยนสีตัวหนังสือในบล็อกนั้น จะแยกออกเป็น 2 แบบ คือ

1. การเปลี่ยนสีตัวหนังสือตามปกติ ซึ่งมักจะใช้ในเวลาเขียนบล็อกบล็อกใหม่ ซึ่งโค้ดที่ใช้ก็คือ

<*font color=สีตัวหนังสือ>ข้อความที่ต้องการ<*/font>

ตัวอย่าง

<*font color=red>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<*font color=blue>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<*font color=green>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

หรือเราอาจจะใช้โค้ดสีที่เป็นตัวเลขแทนเช่น

<*font color=#0000cc>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<*font color=#ffffcc>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<*font color=#00cc99>ข้อความที่ต้องการ<*/font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

2. การเปลี่ยนสีตัวหนังสือในแบบที่ 2 จะเป็นการเปลี่ยนสีตัวหนังสือทั้งหน้าเว็บพร้อมทั้งเปลี่ยน font ด้วยคะ ใช้โค้ดนี้ค่ะ

<*style>body, ul, li, p{font: normal , รูปแบบของฟอนต์;font-size: ขนาดของตัวหนังสือpt;color: #สีตัวหนังสือ;} <*/style>

มาอธิบายตรงโค้ดสีแดงที่ละส่วนนะค่ะ

รูปแบบของฟอนต์ เป็นรูปแบบของฟอนต์ที่ใช้ในบล็อก อยากรู้ว่าเราใช้ฟอนต์อะไรได้ ก็ดูในเครื่องของเราค่ะ ว่ามีฟอนต์อะไรบ้าง

หมายเหตุ--*ใน การที่เราใช้ฟอนต์แปลกๆ คนที่เข้าชมเว็บเราจะต้องมีฟอนต์นั้นด้วยนะค่ะ ถึงจะมองเห็นฟอนต์ที่เราใช้อยู่ได้ ถ้าไม่มีก็จะมองเห็นเป็นรูปแบบปกติหรือบางทีอาจจะแสดงผลเพี้ยนไปเลย เช่น ตัวหนังสือใหญ่เกินไปค่ะ

ขนาดของตัวหนังสือptจะต้องเป็น pt นะค่ะ เช่น 12pt, 14 pt

สีตัวหนังสือ เราจะใส่เป็นชื่อสีเลยก็ได้เช่น red, blue, yellow หรือ ถ้าเป็นโค้ดสีก็เช่น #9900cc, #000000, #ffffff

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

<*style>A:hover{color:สีเมื่อนำเม้าส์มาวางเหนือลิ้ง;text-decoration: none;position: relative;left: -2px; top: 1;}A:link{color: สีลิ้ง ;text-decoration:none;}A:visited{color: สีของลิ้งที่คลิกแล้ว ;text-decoration:yes;<*/style>

ให้เพื่อนๆ ดูความหมายของสีในส่วนของ hover visited และ Link ตามตัวหนังสือสีแดงเลยนะค่ะ
ส่วนโค้ดที่เป็นตัวหนังสืแดงอีกอันหนึ่งที่เพื่อนๆ เห็นคือ position: relative;left: -2px โค้ดในส่วนนี้จะเป็นการกำหนดให้ลิ้งของเรายุบลงไปเมื่อเลื่อนเม้าไปวางเหนือ ลิ้ง ตรงส่วนนี้เพื่อนๆ จะแก้ไขตัวเลขเป็น -1,-2,-3 หรือถ้าไม่อยากจะให้ลิ้งยุบเลยก็กำหนดให้เป็น 0px ก็ได้ค่ะ

กรอบลายจุด

<*table width=90% style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4"><*tr><*td style="border:2px dotted lightpink;"><*font size="1">เขียนตรงนี้เลย<*/td><*/tr><*/table>

กรอบแบบสแตมป์

พิมพ์ไปเลยตรงนี้

กรอบสีแบบคิกขุ

เต็มที่เลยตรงนี้

กรอบชมพูหวาน ๆ

คำที่ต้องการเขียน

กรอบสีส้มอ่อน

< /table>

กรอบ สีเขียวใบไม้

คำที่ต้องการเขียน

< /table>

กรอบแสตมป์ สีน้ำเงิน

คำที่ต้องการเขียน

พิมพ์ไปเลยตรงนี้

กรอบแสดมป์ 2 สี

พิมพ์ไปเลยตรงนี้

กรอบสีม่วง 4 เส้น

<*table width=90% cellpadding="6" cellspacing="2" style="border:double 5px #9900FF,"><*tr><*td style="border:double 5px #9900FF;">เต็มที่เลยตรงนี้<*/td><*/tr><*/table>

กรอบสีน้ำตาล

พิมพ์ไปเลยตรงนี้

กรอบเส้นประ พื้นเขียว

เขียนตรงนี้เลยจิ

< /td>

กรอบจุด ๆ สีเขียว

เขียนตรงนี้เลยจิ

< /td>

กรอบจุดกลม ๆ สีม่วง

เขียนตรงนี้เลยจิ

< /td>

กรอบชมพู + ใส่พื้นหลัง

เต็มที่เลยตรงนี้

กรอบสีชมพูเส้นปะ + ใส่พื้นหลัง

<*table width=90% style="border:2px dotted hotpink;" cellpadding="4" cellspacing="4"><*tr><*td style="border:2px dotted lightpink;" background=url พื้นในกรอบ> <*font size="2">text here text here<*/div><*/td><*/tr><*/table>

กรอบสีส้ม + พื้นสีส้มลายอิฐ

พิม

กรอบสีขาว + พื้นสีเขียวอิฐ

พิม

กรอบสีม่วง + พื้นทีม่วงลายอิฐ

พิม

หมายเหตุ

background =url รูปภาพ <-- สามารถเปลี่ยน Url ภาพbg ได้ด้วยภาพที่เราต้องการจะใส่ได้เลยค่ะ ลองหัดทำดูนะค่ะ

//www.zalim-code.com/code-table.html

Create Date : 17 ตุลาคม 2554

Last Update : 21 ตุลาคม 2554 13:16:09 น.

0 comments

Counter : 1404 Pageviews.