1.Code.35.ที่ใช้ในการแต่งบล๊อก
เราได้รวบรวม Code ที่ใช้ในการแต่งบล๊อกที่เราเคย ใช้เป็นประจำจากบล๊อก คุณกึ่งยิง ป้ามด บล๊อกคุณไหม และจากเพื่อนๆ ในบล๊อกแนะนำบ้าง แล้วเราก็เอามาปรับใช้ในบล๊อกของเรา ถ้าจะเป็นประโยชน์บ้างก็ยินดี ลิงค์ไปไว้ใช้
เพื่อสะดวกกับการนำไปใช้จึงต้องปรับปรุงแก้ไขเสมอๆ
คราวนี้ก็ต้องแก้ไขอีกครั้ง
ถ้ามีปัญหาในการนำไปใช้กรุณาบอกด้วย
ก่อนนำโค๊ดไปใช้ ต้องลบ จุด* ออกทุกจุด
fieldset box
fieldset box
fieldset box มีหลายแบบ เรียงลำดับตามความง่าย 1 Code กล่อง
2 แบบ Title
3 ใส่กรอบสีแดง
4 ขยายได้ตามข้อความ
<*center><*table style="border: 1px solid #FF0000;"cellpadding="5" cellspacing="10"><*tr> <*td><*center>
ใส่รายละเอียดที่ <*/center><*/td><*/tr><*/table><*/center>
|
5 กรอบเส้นคู่
. <*TABLE width="200" bgcolor="#FFF0cc"><*tr> <*td align="center" height="60" style="border- color:#688E23; border-width:6px; border-style:double;"> <*FONT color="#688E23" size="3"> .ใส่ข้อความ <*/FONT><*/td><*/tr><*/TABLE>
|
*ถ้าเราต้องการใส่กรอบให้รูป เราลบสีข้อความออก <*FONT color="#FFB6C1 " size="3">ใส่ข้อความ<*/FONT> ออกไป
นอกจากกรอบเส้นคู่ border-style:double แล้ว เราสามารถเลือกกรอบต่อไปนี้ได้อีก -ชนิดของกรอบ dotted, dashed, solid, groove, ridge, inset, outset, double
//////////
|
|
การใส่แบกกราวBGในบล๊อก
การใส่ BG.มีหลายแบบมีโค๊ดเฉพาะแบบนั้นเช่น -ใส่แบบมีรูป แบบมีรูปอยู่กับที่หรือแบบเคลื่อนที่ -ใส่รูป อยู่มุมซ้าย หรือตรงกลาง หรือมุมขวา จะให้อยู่มุมบน หรือมุมล่างก็ได้ -ใส่แบบสีๆ
วิธีนำไปวางได้สองวิธี -วิธีแรกนำไปวางที่ Script area วิธีนี้มีผลทุกบล๊อก ถ้าไม่ต้องการให้มีผลทุกบล๊อกต้องลบออก -วธีที่สองใส่ที่ช่องรายละเอียดพร้อมกับการเขียนบล๊อกใหม่ มีผลเฉพาะบล๊อกนั้นบล๊อกเดียว ถ้าเขียนบล๊อกใหม่ก็เปลี่ยนแบกกราวใหม่
การใส่รูปเป็น BG ในบล๊อค ตามที่เราต้องการ เช่นใส่ตรงกลาง,ใส่บน,บนซ้าย,บนขวา, หรือใส่มุมล่าง,ล่างซ้าย,ล่างขวาเป็นต้น
ใส่สี แบบ Code สี #FFB6C1 และแบบชื่อของสีเช่น red,green ป็นต้น
color="#FFB6C1"size="3" color="red"size="3"
ส่วนขนาด size="3" เป็นขนาดของ font ที่เราจะให้ ตัวหนังสือเล็กหรือใหญ่
left bottom ส่วนที่กำหนดมุมในการวางรูป
top - แถวบน
left top - :ซ้ายบน
right top - ขวาบน
center bottom - กลางล่าง
right bottom - ขวาล่าง
right bottom - ซ้ายล่าง
center - แถวกลาง
bottom - แถวล่าง
right - มุมขวา
left - มุมซ้าย
1ใส่แบบธรรมดา
2.ใส่ bg แบบ fixed
3 bg แบบเลื่อนตามสกอบาร์
4.ใส่ bg ภาพเดียวทั้งหน้า+สี attachment
5 ใส่บีจี แบบมุมposition ไม่เลื่อน
Left bottom เราสามารถเปลี่ยนได้ จะเปลี่ยนเป็น :: right top / left top / center / right bottom /left bottom
6.ใส่ bg โดยใช้สีอย่างเดียว
7 code ที่ทำให้ background+สี เคลื่อนตามเม้าท์
///////
8 code ใส่ BG โดยไล่เฉดสี (gradient)
9 Codeลบกรอบขาว
Code ที่เกี่ยวข้อง 1 Code mouse hi5,Blog,myspaces,diary
มี 2 แบบ
2 Code โลโก หรือHead blog
เข้าไปที่ปรับแต่งบล๊อก เลือกใส่ช่อง ตั้งชื่อ Slogan ของ Blog
โค๊ด <*p align=center><*img src="ใส่ภาพHead blog/"><*/p>
ก่อนนำไปวางลบจุด ดอกจัน * ออกก่อน
3.ใส่รูปเรียงแบบมีสกอร์
4.ใส่กรอบให้รูปเล็กเรียง
5 ใส่รูปให้ TOP
6.สกอบาร์ อยากใส่สีอะไรที่โค๊ดสี# มี 2 แบบ
7 ทำข้อความมีสีเหลือบ
8ใส่ข้อความ,ใส่โค๊ดสี หรือใส่รูปวิ่ง
<*marquee width="600"scrollamount="3"scrolldelay="80"><*font color="#F5F5DC" style="font-size:24px">**ใส่ข้อความที่เราต้องการ ใส่ข้อความที่เราต้องการ **<*/font><*/marquee>
9 border แบบต่างๆ
style:solid , style: double, style:dashed style: ridge ,style: groove
10. Bullet คือรูปจุดกลมๆที่แสดงอยู่หน้าGroupblog
Code <*style>ul{list-style: ;list-style-image: url(http:ของ รูป bullet);}<*/style>
11. ใส่สี+ใส่รูป หน้าชื่อ group blog
ความจริงรูปพวกนั้นไม่ใช่ bullet สังเกตดูจะเห็น bullet เดิมยังมีอยู่ วิธีทำคือ เข้าไปจัดการที่ group blog แล้วกดเปลี่ยนชื่อของ group blog นั้น
ใส่รูปเข้าไปข้างหน้า ใช้คำสั่งนี้ได้เลย <*img src=URLของรูป border=0>
ใส่ สีอะไร ก็ใส่คำสั่งสีเข้าไปข้างหน้าข้อความ <*font color="#ff69b4"size="3">ใส่ข้อความ<*/font>
12. เปลี่ยนรูปอมยิ้ม (log in) ท้ายชื่อ
ข้อนี้ไปเอามาจากบล็อกของคุณ ชาเขียว หารูปที่ต้องการมาแทนอมยิ้มอันเก่า แล้วใส่ url ของรูปเข้าไป
Code
<*script>iLength = document.images.length; for(i=0;i<*iLength;i++) if(document.images [i].src=="https://www.bloggang.com/images/smile.gif") {document.images[i].src="https://ของรูปที่ต้องการ"}<*/script>
copy code ไปใส่ในช่อง script
13. Code Wrist Band เรารักในหลวง
script ของ wrist band เพื่อนๆส่งมาให้ป้ามดจาก https://thaiblogger.org
Code มุมซ้าย <*script type="text/javascript" src="https://thaiblogger.org/webbands/weloveourking_left.js"><*/script>
Code มุมขวา <*script type="text/javascript" src="https://thaiblogger.org/webbands/weloveourking_right.js"><*/script>
นำโค้ดใส่ที่ช่อง script เป็นรูป wristband เรารักในหลวงคาดที่หัวมุมบล็อกด้านบน ให้เลือกซ้าย และขวา
*******
โค้ดใส่กรอบ+รูปให้กล่องเม้นท์
<*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>
|
โค้ด ให้ข้อความหรือรูปภาพ ที่คอมเม้นท์ อยู่ตรงกลาง
<*style>div.comment{text-align: center;}<*/style>
******
14. สร้าง link
<*a href =URLของเว็บที่ต้องการ///// target=_blank><*img src=URL///ของรูปที่ทำลิงค์//// link border=0<*/a>
สร้างรูปให้ link โดยใส่คำสั่งรูปต่อท้ายเข้าไป
15. สร้างรูป-อักษร เคลื่อนที่
Code 1
ใส่รูปหรือข้อความให้เคลื่อนที่ (Marquee) การเคลื่อนที่มีหลายแบบ เปลี่ยนทิศทางการเคลื่อนที่ ที่ direction และเปลี่ยนความเร็วที่ scrollamount
<*marquee>ใส่ข้อความวิ่งตรงนี้<*/marquee>
Code 2 ***
<*marquee direction=right scrollamount=1> ใส่ข้อความตรงนี้ <*/marquee>
Code 3
<*marquee><*img src=ใส่รูป><*/marquee>
Code 4
<*marquee direction=right scrollamount=1> <*img src=ใสรูป><*/marquee>
Code Code ใส่ข้อความหรือรูปวิ่งๆ5
<*marquee direction=right scrollamount=2> <*img src="https://images.antifluff.com/download.php?file=q25gm4ny2yj1tymuyqiw.gif"> ยินดีต้อนรับทุกท่าน<*/marquee>
Code 6
<*marquee direction=up style="filter:wave(add=0,lightstrength=75, phase=1, strength=1,freq=2);color:#4682B4"><*center> ใส่ข้อความหรือรูปที่นี่ ใส่ข้อความหรือรูปที่นี่ ใส่ข้อความหรือรูปที่นี่ ใส่ข้อความหรือรูปที่นี่<*/marquee>
**********
Code 7
<*marquee width=350 height=250 direction=up scrollamount=1><*center>ใส่ข้อความ และรูปที่นี<*/center><*/marquee>
*scrollamount=1 มีระดับความเร็วตามตัวเลข 1.2.3.4.ฯ วิ่งช้าสุดคือ1 น้อย ค้อยเร็วขี้นๆ ตามตัวเลข 2-3-4 ที่เพิ่มขึ้น
17. วิธีคัดลอกรูปจากที่อื่นมาใส่อัลบั้มหรือไว้ใช้
1.) การนำ URL รูปมาทำเป็น background มาใส่ในช่อง background image URL
1.1 จะไปหา URL ได้จากไหน ง่ายๆ ถ้าเพื่อนๆ เล่นอินเตอร์เน็ตแล้วไปเจอรูปที่ถูกใจ ก็คลิกขวาที่ที่รูปนั้น แล้วเลือก Properties แล้วก๊อปปี้ URL ใน Properties ก่อนออกคลิกที่ save ก่อน นำมาใส่ที่โค๊ด
<*img src="//////////"> 1.2 จากนั้น Copy URL ค่ะ <*img src="https://hi5.kapook.com/images_bg/images_05.jpg">
1.3 เมื่อได้ URL แล้วก็นำมามาที่ Background Image URL เท่านี้ก็เสร็จแล้วค่ะ
18.โค๊ดรูปกล่องคอมเม้น:-ดังนี้
แล้วนำไปวางที่ Script area
<*style type=text/css>textarea{width:413;height:376;background:url ("////URLของรูป/////");color=blue;font-family:KodchiangUPC; font-size:17pt;}<*/style>
19. Code กรอบที่นำมาจากคุณParadijs
โค๊ดที่เรายังไม่มี และนำมาจากบล๊อกคุณไหม
1
กรอบใส่รูป
<*table border="0"cellspacing="2" cellpadding="2" width="" align="center"style="border: 1px ridge#A0522D"><*tbody><*tr><*td align="center" valign="middle" style="border:1px ridge #FFA6D1"><*img src=" ////////"border="0"><*/td><*/tr><*/tbody><*/table>
|
2
เพื่อป้องกันหน้าบล็อคยืด จากการที่เพื่อนๆ ใส่รูป ใน Comment ใหญ่เกินไป ใส่โค้ดนี้ ไว้ที่ Script Area ค่ะ
<*style>div.comment{overflow: auto; width: 380px; height: auto;}<*/style>
|
3.โค้ดทำกรอบให้กับ Group Blog, All Blogs, Friends' blogs, Links, และ Emotions
<*style>li a {display: block;padding: 5px 5px 5px 5px;border: 1px ใส่ชนิดของกรอบ ใส่โค้ดสีกรอบ;background- image:url(ใส่ URLรูป);text-decoration: none;width: 180px;}<*/style>
<*style>li a:hover {display: block;padding: 5px 5px 5px 5px;border: 1px ใส่ชนิดของกรอบ ใส่โค้ดสีกรอบ;background- image:url(ใส่ URLรูป);text-decoration: none;width: 180px;} <*/style>
<*style>fieldset{border: 3px ใส่ชนิดของกรอบ;padding: 5px 5px 5px 5px;border-color : ใส่โค้ดสีกรอบ;}<*/style> <*tr><*td><*/tr><*/table>
|
20.กรอบรอบนอกของบล๊อก
<*script language="JavaScript1.2"> if (document.all) document.body.style.cssText="border:15 inset green" <*/script>
|
นำไปใส่ที่Script area
|
////////////////ต่อจากตอนที่ 1////////////////
21.นำโค๊ดมาให้ทดลองทำ
กรอบตัวอย่างสามารถทำเองได้
|
|
Code กรอบทำเอง
<*table border="2"cellspacing="16"cellpadding="10"width="100%"align="center"style="background-image: url('///๑////')"><*tbody><*tr><*td align="center"valign="middle"style="background-image: url('//////๒////')"><*table border="1"cellspacing="5"cellpadding="5"width="100%"align="center"style="background-image:url('////๓//////')"><*tbody><*tr><*td align="center"valign="middle">
ใส่ข้อความ
<*/td><*/tr><*/tbody><*/table><*/td><*/tr><*/tbody><*/table><*/font>
รูปที่นำมาใส่ มี ๓ รูป
รูปที่('///๑////') - รูปกรอบเช่นรูปวิบๆ แบบ gif 'https://6.share.photo.xuite.net/lam1112/1699a0d/4212433/168698940_x.jpg'
รูปที่('//////๒////') - รูปเช่นรูปเพชร 'https://g.udn.com.tw/community/img/PSN_PHOTO/winnie777777/f_4817975_1.gif'
รูปที่('////๓//////') - รูปสีพื้นเป็นแบกกราว 'https://www.colourlovers.com/img/DEFFB3/228/161/Minty.png'
22.วิธีลดขนาดรูป gif
ใส่ขนาดตัวเลขที่ต้องการเพื่อลดขนาดรูป โดยกำหนดขนาดลดลงตามสัดส่วนของรูป
<*center><*img src=http:XXX width=400 height=300><*/center>
23.Codeป้องกันไม่ให้มีกรอบสีน้ำเงินที่รูป
<*style>img {border:none;}<*/style>
โค้ดนี้จะมีผลกับทุกๆรูป
ต่อไปเมื่อเราใส่โค้ด หริอใส่รูป ก็ไม่ต้อง ใส่ border=0 อีกต่อไป
ใช้แค่ <*img src=//////////.>
24.โค้ด ที่ทำให้ข้อความหรือรูปภาพ ที่เพื่อนๆคอมเม้นท์ ให้อยู่ตรงกลาง
<*style>div.comment{text-align: center;}<*/style>
นำไปวางที่ Script area
|
25.โค๊ดใส่ข้อความพร้อมรูป 1-9 จากบล๊อกคุณพีช
1 .โค้ดใส่ข้อความกำกับภาพ
โค้ด.... <*img src="http:รูป" alt="...ข้อความ..."/>
|
2. โค๊ดด้านซ้ายของรูป
<*img src="http:รูปภาพ" align=right hspace=10> ข้อความ <*br clear=right>
|
3.ใส่ข้อความกำกับด้านซ้ายบรรทัดบนของรูปภาพ
<*img src="http:รูปภาพ" align="top"> ข้อความที่ต้องการ
|
4.ใส่ข้อความด้านขวาของรูป
<*img src="http: รูปภาพ" align=left hspace="10" vspace="10"/> ใส่ข้อความ <*br clear=left> |
5. ภาพอยู่ด้านขวา และมีรูปอยู่ใต้ข้อความภาพด้านซ้าย
โค้ด...... <*img src="https://xxxxxxx" align=right hspace=10>
ใส่ข้อความ
<*img src='https://xxxxxxx'> <*br clear=right>
|
6.ภาพด้ายซ้ายหนึ่งรูป และด้านขวาสองรูป โดยมีข้อความระหว่างกลาง
<*src="https://xxxxxxx" align=left hspace=10> <*img src='https://xxxxxxx'>
ใส่ข้อความ
<*img src='https://xxxxxxx'> <*br clear=left> |
7.โค้ดใส่ข้อความกำกับทางด้านขวาบรรทัดล่างของรูป
<*img src="http:รูปภาพ" align="bottom">
<*img src='https://xxxxxxx'> <*br clear=right>
|
8. ใส่ข้อความด้านขวา
<*img src="http:รูปภาพ" align="left"> ข้อความ <*br clear="left"> |
9 .ใส่ข้อความทางด้านซ้ายของรูป
โค้ด....... <*img src="http:รูปภาพ" align=right>
|
ใส่ไว้ที่ต่างๆ
Left= จัดภาพไว้ด้านซ้ายของตัวหนังสือ(ตัวหนังสืออยู่ขวา)
Right= จัดภาพไว้ด้านขวาของตัวหนังสือ(ตัวหนังสืออยู่ซ้าย)
Top = ตัวหนังสืออยู่บรรทัดบนของภาพ
Middle= ตัวหนังสืออยู่บรรทัดกลางของภาพ
Bottom = ตัวหนังสืออยู่บรรทัดล่างของภาพ
hspace สำหรับระยะห่างแนวนอน และ vspace สำหรับระยะห่างแนวตั้ง |
ขอแสดงความยินดี กับเพื่อนด้วยค่ะ
|
Code <*TABLE width="250" bgcolor="#FFF0cc"><*tr> <*td align="center" height="60" style="border- color:#688E23; border-width:6px; border-style:double;"> <*FONT color="#688E23" size="3"> <*img src="https://i123.photobucket.com/albums/o301/ myicon-2007/mcom141.gif"align= left hspace=10> ขอแสดงความยินดีกับเพื่อนด้วยค่ะ <*br clear=right> <*/FONT><*/td><*/tr><*/TABLE>
<*TABLE width="250" bgcolor="#FFF0cc"><*tr> <*td align="center" height="60" style="border- color:#688E23; border-width:6px; border-style:double;"> <*FONT color="#688E23" size="3"> <*img src="https://i123.photobucket.com/albums/o301/ myicon-2007/mcom141.gif"align="center"> ขอแสดงความยินดี กับเพื่อนด้วยค่ะ <*br clear=right> <*/FONT><*/td><*/tr><*/TABLE>
26.วิธีเปลี่ยน Title ของ Bloggang
<*script>window.document.title="ใส่ข้อความที่ Title ของ Bloggang ตามใจชอบ.";<*/script>
นำไปวางที่ Script area
|
27.โค้ด Blockquote
จัดข้อความยาวๆให้สวยงาม อ่านได้ง่ายๆโดยจัด ระยะเว้นวรรคหน้าหลังให้เท่าๆกัน
<*blockquote>ใส่รายละเอียดที่นี่<*/blockquote>
|
28.Code เปลี่ยนสี font ของ link
<*style>A:hover{color:#F5F5DC;text-decoration: none;position: relative;left: 4px; top:4;}A:link{color:#20B2AA;text-decoration:none;}A:visited{color: #CD5C5C;text-decoration:none;<*/style>
|
ขอบคุณโค๊ดจากคุณกึ่งยิง, ป้ามด ,คุณ Paradijs,คุณsomjadean100 เราได้แก้ไข เพิ่มข้อมูล และปรับปรุงเพื่อให้อ่านเข้าใจง่าย และดูดี หวังว่าเพื่อนที่นำไปไว้ใช้มีอะไรจะแนะนำก็ยินดี
ยินดีให้ลิงค์ไปที่บล๊อกของคุณ https://www.bloggang.com/mainblog.php?id=chomporn&month=19-08-2011&group=23&gblog=76
Create Date : 19 สิงหาคม 2554 |
|
17 comments |
Last Update : 8 เมษายน 2561 17:09:09 น. |
Counter : 7119 Pageviews. |
|
|
|
ขอแปะไว้ก่อนนะคะ รู้สึกไม่ค่อยสบาย
ว่าจะทานยา แล้วขอตัวไปนอนก่อนค่ะ
ยายเก๋าดูแลสุขภาพตัวเองด้วยนะคะ
ราตรีสวัสดิ์ค่า หลับฝันดีนะคะ