รูปบล็อคนอก
Photobucket - Video and Image Hosting
Group Blog
 
<<
พฤศจิกายน 2554
 
 12345
6789101112
13141516171819
20212223242526
27282930 
 
4 พฤศจิกายน 2554
 
All Blogs
 
โค้ดพื้นฐาน จากป้ามด 1

ท่านที่ต้องการได้โค้ดเหล่านี้ กรุณาไปที่บล๋็อกของป้ามดนะครับ
บล็อกของป้ามด ; โค้ดของป้ามด
(ขออนุญาตินำมาไว้ในบล๊อกเพื่อสะดวกในการค้นหาครับ)

สำหรับเพื่อน ๆ ที่จะนำโค้ดจากที่นี้ไปใช้ ให้ลบ " * " ออกทุกอันครับ
แต่ เพื่อความสะดวกกรุณาไปที่บล็อกของป้ามดดีกว่าครับ กดที่ โค้ดของป้ามด ด้านบนครับ

โค้ดทั่วไปของ ป้ามด


โค้ดเหล่านี้รวบรวมมาจากเว็บต่างๆที่สอน html ไม่ได้เขียนขึ้นมาเอง
จึงไม่สามารถอธิบายอะไรได้

ผิดพลาดประการใดกรุณาแจ้งด้วยจะขอบพระคุณมาก

ใครมีปัญหาเชิญถามที่บล็อก "ถาม - ตอบ เรื่องบล็อก" หรือทางหลังไมค์เท่านั้นค่ะ

1. code ทุกอันที่จะนำไปใช้ ต้องใช้คำสั่ง copy แล้วไป paste ที่ notepad

( start --> program --> accessories -->notepad )
เลือกดู คำสั่ง format ที่ notepad ห้ามเป็น word wrap เป็นอันขาด เพื่อให้คำสั่งนั้นอยู่ในบรรทัดเดียวกันหมด

2. code ที่นำไปใช้ เมื่อแก้ไขค่า หรือ url (http:XXX)
ห้ามขาดหรือเกิน

3. การหา url ของรูปที่ต้องการคือ คลิกขวา -->เลือก properties ของรูป
จะพบ http: ของรูป นั่นคือ url ของรูปนั้น

ขอขอบคุณคุณ "ป้าติ๋ว" (nature-delight)
ที่ช่วยหาโค้ดตามบล็อกและเว็บต่างๆมาใส่เพิ่มเติมในห้องกล้วยแห่งนี้อยู่เรื่อยๆ



โค้ดทั่วไปของ ป้ามด


ใครจะเริ่มสร้างบล็อก แต่ยังเริ่มไม่ได้ ขอเชิญที่นี่เลยค่ะ

บทที่ 1. ☆ ขั้นตอนการสร้าง Blog
บทที่ 2. ☆ การสร้าง background แบบป้ามด
บทที่ 3. ☆ การใส่รูปลงบล็อก
บทที่ 4. ☆ Color Codes สีที่ใช้ในบล็อก
บทที่ 5. ☆ ป้ามดสอนมือใหม่ใส่เพลง



โค้ดทั่วไปของ ป้ามด



โค้ดทั่วไปของ ป้ามด


<*a href ='//www.bloggang.com/viewdiary.php?id=auntymod&group=12&month=08-2005&date=06&blog=2' target='_blank'><*img src='//www.pantown.com/data/10170/board4/11-20060109172108.jpg'border=0><*/a>







โค้ดทั่วไปของ ป้ามด


โค้ดทั่วไปของ ป้ามด

<*a href ='//www.bloggang.com/viewdiary.php?id=auntymod&group=12&month=08-2005&date=06&blog=2' target='_blank'><*img src='//www.pantown.com/data/10170/board4/11-20060110184217.jpg'border=0><*/a>






โค้ดทั่วไปของ ป้ามด


สัญลักษณ์ที่ใช้สร้างโค้ดคือตัว <* และ > คือ

< แทนตัว <
> แทนตัว >



โค้ดทั่วไปของ ป้ามด



01. ลักษณะตัวอักษร
02. วิธีใส่รูป
03. วิธีใส่รูปให้เรียงในหน้าเดียวกัน
04. ใส่รูปโดยใช้คำสั่ง filter
05. ใส่รูปในกล่อง comment
06. ใส่ Background
07. เปลี่ยนสี font
08. เปลี่ยนตัวอักษรให้เล็กลงทั้งหน้า
09. ลบกรอบและสีขอบของบล็อก
10. สร้าง link
11. เปลี่ยนรูป cursor
12. แต่งกรอบ comment ให้มีนับข้อความ (คุณกึ่งยิง)
13. เปลี่ยนรูป Bullet
14. เปลี่ยนสี Scroolbar
15. ใส่ google
16. ใส่เพลง
17. ใส่นาฬิกา
18. เปลี่ยนรูปอมยิ้ม (คุณชาเขียว)
19. ลูกเล่นเมื่อเปลี่ยน webpage
20. Fieldset Box
21. ใส่วันและเวลาใน status bar
22. ใส่รูปแทน logo
23. ใส่รูปท้าย Bullet ที่หน้าชื่อ Group blog
23. ขีดเส้นคั่นบทความ
24. แถบข่าวของ นสพ.ผู้จัดการ (คุณ shelling ford)
25. ใส่ scrollbar หน้าบล็อก
26. ใส่ Iframe
27. ใส่ selection box ให้ friend's blog.txt
28. ใส่ข้อความเคลื่อนที่ ที่ task bar
29. ใส่กรอบ (Table) หลายๆแบบให้ข้อความ
30. กรอบ(table) หลายชั้น
31. ใส่แถบสีให้ข้อความ
32. ตัวหนังสือในแถบเรืองแสง
33. กล่อง alert ปรากฏตอนเข้าหน้าบล็อก
34. สร้าง link ให้ส่งข้อความหลังไมค์
35. ทำ Rainbow Link
36. ใส่รูปหรือข้อความให้เคลื่อนที่ (Marquee)
37. ใส่โค้ดให้เป็นรูป ⓐⓑⓒ
38. ใส่โค้ดให้เป็นสัญญลักษณ์ต่างๆ
39. เปลียนชื่อที่ title bar
40. ใส่ background เฉพาะส่วนกลางบล็อก
41. สร้างกรอบด้วย background รูปต่างๆ
42. บทความสวยด้วย blockquote
43. Wrist band เรารักในหลวง
44. โค้ดซ่อนข้อความ



โค้ดทั่วไปของ ป้ามด




กดที่นี่แจก code ตกแต่ง cursor

กดที่นี่แจก code ดาวร่วง

กดที่นี่แจก code เพลง midi ประกอบบล็อก

กดที่นี่แจก code ผีเสื้อแสนสวย



01. ลักษณะตัวอักษร


ลักษณะของตัวอักษร

ใช้โค้ดกำกับด้าหน้า <*> แล้วต้องใส่โค้ดปิดด้านหลังด้วยทุกครั้ง <*/>
ตัวหนา .....<*b>ตัวหนา<*/b> .......ตัวหนา
ตัวเอียง......<*i>ตัวเอียง <*/i> ......ตัวเอียง
เน้นตัวหนังสือ .. <*strong>เน้นตัวหนังสือ<*/strong> ....เน้นตัวหนังสือ
สี ..........<*font color=green>สีเขียว<*/font> .......สีเขียว
ขนาด ...<*font size=?>ข้อความ<*/font> .... ตั้งขนาดได้จาก 1 ถึง 7
จัดข้อความให้อยู่กลางหน้า .....<*center>ใส่ข้อความที่นี่<*/center>

ใส่ข้อความที่นี่


ขนาดของหัวข้อ

<*H1>heading one<*/H1>
<*H2>heading two<*/H2>
<*H3>heading three<*/H3>
<*H4>heading four<*/H4>



02. วิธีใส่รูป


วิธีใส่รูป

การใส่รูปในช่อง comment หรือในช่องรายละเอียดในการสร้างบล็อก แบบจะต้องใช้ link จะต้องมีรูปที่อยู่ในเว็ปเสียก่อน เมื่อต้องการใส่รูปไหนก็คลิกขวาที่รูปนั้น เลือก properties จะเห็น Address (URL)ของรูป ให้ copy เอา url มาใส่แทนตรงที่สีแดง

code


<*img src=http:XXX>
ใส่รูปให้อยู่ตรงกลางหน้า ให้เพิ่ม center ลงไป
<*center><*img src=http:XXX><*/center>


ตัวอย่างเช่น
code

<*center><*img src=//t0.gstatic.com/images?q=tbn:ANd9GcSmKyhJKGHpGxFXOEgTmufh7rjNG_p48BZKF7Pc5-WIVghn8lBf><*/center>


คำสั่งที่ได้คือ


ถ้ารูปใหญ่เกินไป ให้ใส่ขนาดตัวเลขที่ต้องการลดขนาด โดยกำหนดขนาดลดลงตามสัดส่วนของรูป
<*center><*img src=http:XXX width=400 height=300><*/center>



03. วิธีใส่รูปให้เรียงในหน้าเดียวกัน


วิธีใส่รูปให้เรียงกันลงไปในหน้าเดียวกัน

ให้ copy คำสั่งใส่รูป ไปเรียงๆกันไว้ใน notepad แล้วจัดระยะห่างให้พอดีตามต้องการ จึงค่อยเอา url ของรูปมา paste ลงตรงสีแดง จะใส่กี่รูปก็ได้ไม่จำกัด (ถ้าลิ้งค์มา)

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

เมื่อทำเสร็จหมดเรียบร้อย copy ทั้งหมด ไปใส่ในช่องรายละเอียดตอนสร้างบล็อก

code


<*center><*img src=//ใส่รูป><*/center>

<*center><*img src=//ใส่รูป><*/center>

<*center><*img src=//ใส่รูป><*/center>











04. ใส่รูปโดยใช้คำสั่ง filter


ใส่รูปโดยใช้ filter

code


<*center><*img src=http:XX width="60" height="50" style="filter : Alpha(opacity=100, finishopacity=0, style=1..(2)..(3))"><*/center>


ผลที่ได้ไม่เหมือนของป้ามด ให้ไปดูที่บล็อกของป้ามดอีกครั้งครับ ??

เลือกใช้ 3 style ต่างกันคือ 1, 2 และ 3



05. ใส่รูปในกล่อง comment



ใส่รูปให้กล่อง comment

code

<*style type=text/css>textarea{width:450 ;height:240;background:url(XX );color=blue; font-family : tahoma; ; font-size:20pt; ; <*/style>

ปรับขนาดของกล่อง comment ตามใจชอบ ที่ width และ height หรือให้เท่าขนาดของรูปที่จะนำมาใส่
(ตัวหนังสือสีแดงเปลี่ยนค่าได้หมด)

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



06. ใส่ Background


คำสั่งใส่ background รวบรวมมาจาก การใส่ background

มีหลายคำสั่ง แล้วแต่ลักษณะของรูปที่นำมาใช้

code


1.ใส่ bg แบบ tile
<*style>body{background-image:url(XX );}<*/style>

2.ใส่ bg แบบ fixed ไม่ให้ bg เลื่อนลงตาม scroll bar
<*style>body{background-attachment: fixed;background-image:url(XX );}<*/style>

3.ใส่ 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>

4.ใส่ bg โดยใช้สี
<*style>body{background:color code}><*/style>

5. ใส่ bg โดยไล่เฉดสี (gradient)
<*body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='color code 1', startColorstr='color code 2', gradienttype=0);">

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

เลือกสีได้ที่ ▣ สีที่ใช้ใน blog ▣
เปลี่ยนรายละเอียดที่ต้องการ ตรงข้อความ สีแดง

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



07. เปลี่ยนสี font


เปลี่ยนสี font

เลือกดูสีได้ที่บล็อก ▣ A HREF="//www.bloggang.com/viewdiary.php?id=auntymod&group=12&month=01-2006&date=24">สีที่ใช้ใน blog ▣

ปกติการเปลี่ยนสีของ font จะใช้คำสั่ง
<*font color=code >....<*/font>

แต่ถ้าต้องการเปลี่ยนสีของ font ทั้งหน้า ต้องใช้คำสั่งข้างล่างนี้

Code เปลี่ยนสี font ทั้งหน้า

เปลี่ยนสี font ของ link

บางครั้ง background ที่เราชอบ เราเลือกสีของ font ได้ตามใจชอบ แต่บางรูป สีของ background จะกลืนกับสีของ link ที่ทาง bloggang กำหนดมาให้ จึงควรจะเปลี่ยนสีให้มองเห็นได้ชัด คำสั่งนี้จะมี 3 จังหวะ ไปลองเลือกเอานะคะ ว่าต้องการสีอะไรในจังหวะไหน

Code เปลี่ยนสี font ของ link


เลือกสีได้ที่ ▣ สีที่ใช้ใน blog

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



08. เปลี่ยนตัวอักษรให้เล็กลงทั้งหน้า


เปลี่ยนตัวอักษรให้เล็กลงทั้งหน้าเว็บ

<*style>p b font {font:bold 15px Verdana,Tahoma;}<*/style>

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



09. ลบกรอบและสีขอบของบล็อก


ลบกรอบและสีขอบของบล็อก

หน้าตาออกมาแบบของบล็อกป้ามดนี่ละค่ะ

code

<*style>table {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}<*/style>


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



10. สร้าง link


สร้าง link

สร้างชื่อของ link

<*a href =url ของเว็บที่ต้องการ link target=_blank>สีที่ ๑ <*/a>

เช่น

code


<*a href =//www.bloggang.com/viewdiary.php?id=auntymod&group=2&month=04-2005&date=15&blog=8 target=_blank>Guestbook <*/a>

จะออกมาแบบนี้
Guestbook

สร้างรูปให้ link โดยใส่คำสั่งสั่งรูปต่อท้ายเข้าไป ในตัวอย่าง เอา url ของบล็อกที่เป็น guestbook ใส่คู่กับรูป guestbook ที่เราต้องการ
code


<*a href =http ของเว็บที่ต้องการ target=_blank><*img src=url ของรูปที่ใส่เป็น link border=0<*/a>




11. เปลี่ยนรูป cursor


เปลี่ยนรูป cursor

หา save รูป cursor ที่ต้องการมาใส่ในบล็อกของเรา (หรือจะเอารูป cursor ไป upload ที่เว็บอื่น) แล้วเอา URL มาใส่ของรูปมาใส่ในคำสั่งข้างล่าง

<*body style="cursor:url(ใส่ URL ของรูป)">

คำสั่งที่ใส่ใน body



12. แต่งกรอบ comment ให้มีนับข้อความ (คุณกึ่งยิง)


แต่งกรอบ comment และให้นับข้อความ

เปลี่ยนสีกรอบกล่อง comment พร้อมตกแต่งเขียนข้อความที่กรอบเล็ก (คุณกึ่งยิง)

code


<*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:สีของกรอบใหญ่ solid 1px; padding:4"> <*legend align=center(left)(right)<*/font>style="border: สีของกรอบเล็กsolid 1px; padding:2; background: none">คห.ที่' + i + ' ';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}<*/script>


copy code ไปใส่ไว้ที่ช่อง script



13. เปลี่ยนรูป Bullet


เปลี่ยนรูป Bullet

Bullet คือรูปจุดกลมๆที่แสดงอยู่หน้า Group Blog

code


<*style>ul{list-style: ;list-style-image: url(http:ของ รูป bullet);}<*/style>


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



14. เปลี่ยนสี Scroolbar


เปลี่ยนสี scroll bar

ให้เปลี่ยนสีเองตามใจชอบที่ชื่อ โค้ดสี (ตัวอักษรสีแดง)

code

<*style type="text/css">body {scrollbar-arrow-color: #000000;scrollbar-highlight-color:#000000; scrollbar-base-color:#C4A2A2;scrollbar-dark-shadow-color: #000000;scrollbar-track-color:#C4A2A2;}<*/style>


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



15. ใส่ google


ใส่ Search Google

code


<*!-- Search Google -->
<*center>
<*FORM method=GET action="//www.google.com/search"TARGET=_blank>
<*input type=hidden name=ie value=tis-620>
<*input type=hidden name=oe value=tis-620>
<*A HREF="//www.google.co.th/">
<*IMG SRC="//www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle">
<*INPUT TYPE=text name=q size=25 maxlength=255 value="">
<*INPUT type=submit name=btnG VALUE="Google Search"><*/FORM><*/center>


copy code ไปใส่ที่ช่องแนะนำตัว ใน profile หรือ slogan



16. ใส่เพลง


ใส่เพลง

ดูอย่างละเอียดที่ ▣ป้ามดสอนมือใหม่ใส่เพลง

ควรแปลงเพลงให้มีขนาดเล็กๆเพื่อที่จะสะดวกแก่การ upload และ link มาเปิดในบล็อก ส่วนมากป้ามดจะแปลงเป็น .wma ใช้โปรแกรมง่ายๆ คือ goldwave หรือใครจะใช้ nero ก็ได้ ส่วน swf.ใช้ macromedia flash mx

ถ้าต้องการคุณภาพเสียงดีๆก็อย่าแปลงให้เล็กเกินไปนัก แต่ก็จะเปลืองที่หน่อย web host ที่นิยมแขวนเพลงก็คือ geocities หรือจะลองใช้ Google หา free webhost

ส่วน midi เป็นเพลงขนาดเล็ก เหมาะจะเอามาใช้มาก เว็ปที่แขวนได้ง่ายๆก็ pantip หรือ pantown นี่แหละ เราจะใส่ url (http:)ของเพลง ที่ตัวสีแดงนะคะ ค่าอื่นๆไปลองตั้งเอาเอง เช่น
autostart : ถ้าต้องการเพลงเปิดเองพร้อมเว็บใช้ true ถ้าใช้ false เพลงจะเล่นเมื่อกดปุ่มที่ console
loop: false คือต้องการให้เพลงเล่นครั้งเดียวโดยไม่ต้องวน ค่า true คือจะเล่นวนตลอดไป

มีรูป console ให้เปิดปิดได้ ใช้สำหรับไฟล์ที่เป็น wma, wav, mp3

code


<*embed src=url ของเพลง autostart=trueloop=false height=45 width=170><*/embed>


ไม่มี รูป console สำหรับไฟล์ midi , wma, wav, mp3

code

<*BGSOUND balance=0 src=url ของเพลง volume=-600 loop=0>



ไม่มี รูป console สำหรับไฟล์ swf

code


<*embed pluginspage=//www.macromedia.com/go/getflashplayer src=url ของเพลง swf width=1 height=1 type=application/x-shockwave-flash quality=high><*/embed>



คำสั่งที่ใส่ใน slogan หรือ profile จะแสดงผลทุกบล็อก
คำสั่งที่ใส่ที่ช่องรายละเอียดตอนสร้างบล็อก จะแสดงเฉพาะที่บล็อกนั้น



17. ใส่นาฬิกา


ใส่นาฬิกา

จากนาฬิกา

code


<*embed src="//www.clocklink.com/Clocks/5001-Blue.swf?TimeZone=GMT0700&DateFormat=DD-mm-YYYY" width="220" height="20" wmode="transparent" type="application/x-shockwave-flash">




code


<*embed src="//www.clocklink.com/clocks/0001-Blue.swf?TimeZone=GMT0700" width="200" height="200" wmode="transparent" type="application/x-shockwave-flash">



มี 6 สี (Blue, Green, Red, Orange, Yellow, Gray)

code


<*embed src="//www.clocklink.com/clocks/5002-Pink.swf?TimeZone=GMT0700" width="240" height="20" wmode="transparent" type="application/x-shockwave-flash">



พื้นใส ตัวเลขมี 9 สี (Blue, Green, Red, Orange, Yellow, Gray, Pink, Purple, White)

code


<*embed src="//www.clocklink.com/clocks/0005-Red.swf?TimeZone=GMT0700" width="200" height="200" wmode="transparent" type="application/x-shockwave-flash">




เข็มมี 6 สี (Blue, Green, Red, Orange, Yellow, Gray,)

copy code ไปใส่ในช่อง slogan หรือช่องแนะนำตัวที่ profile



18. เปลี่ยนรูปอมยิ้ม (คุณชาเขียว)


เปลี่ยนรูปอมยิ้ม (log in) ท้ายชื่อ

ข้อนี้ไปเอามาจากบล็อกของคุณ ชาเขียว หารูปที่ต้องการมาแทนอมยิ้มอันเก่า แล้วใส่ url ของรูปเข้าไป

code


<*script>iLength = document.images.length; for(i=0;i<*iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/smile.gif") {document.images[i].src="//ของรูปที่ต้องการ"}<*/script>

copy code ไปใส่ในช่อง script



19. ลูกเล่นเมื่อเปลี่ยน webpage


ลูกเล่นเมื่อเปลี่ยน webpage

code


<*="Page-Enter" content="RevealTrans (Duration=3, Transition=23)"><*="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">


copy code ไปใส่ไว้ที่ช่อง slogan หรือ script



20. Fieldset Box


Fieldset Box

fieldset box คือกรอบที่เห็นใส่ code อยู่นี้ สามารถเปลี่ยนค่าได้ตามใจชอบที่ข้อความสีแดง

มีหลายแบบ เรียงลำดับตามความง่าย

code


<*fieldset>ใส่รายละเอียดที่นี่<*/fieldset>



code


<*fieldset>Title<*/legend>ใส่รายละเอียดที่นี่<*/fieldset>



code


<*fieldset style="border:1px solid #FF0000; padding:10;"><*legend align="left"><*font color="#FF0000">Title<*/font><*/legend><*font color="#FF0000"><*p align="center (left, right)">ใส่รายละเอียดที่นี่




21. ใส่วันและเวลาใน status bar


ใส่วันที่และเวลาที่ status bar

code


<*SCRIPT language="JavaScript">
<*!--function runClock() {theTime = window.setTimeout("runClock()", 1000);var today = new Date();var display = today.toLocaleString();window.status = display;}runClock();--><*/SCRIPT>


copy code ไปใส่ไว้ในช่อง script



22. ใส่รูปแทน logo


ใส่รูป bloggang logo

ใช้คำสั่งนี้เมื่อต้องการเปลี่ยนรูปของ โลโก้

code

<*script>document.images[1].src="http:ของรูป logo"; document.images[1].width =0 ; document.images[1].height =0<*/script>



ถ้าไม่ต้องการให้มีรูปอะไรเลย ใช้รูปว่างเปล่านี้ใส่แทนรูปโลโก้

code

<*script>document.images[1].src="images/spacer.gif"; document.images[1].width =0 ; document.images[1].height =0<*/script>



copy code ไปใส่ไว้ที่ช่อง script



23. ใส่รูปท้าย Bullet ที่หน้าชื่อ Group blog


ใส่รูปท้าย bullet ที่หน้าชื่อ group blog

ความจริงรูปพวกนั้นไม่ใช่ bullet สังเกตดูจะเห็น bullet เดิมยังมีอยู่

วิธีทำคือ เข้าไปจัดการที่ group blog แล้วกดเปลี่ยนชื่อของ group blog นั้น
พอจะใส่ชื่อใหม่ก็ให้ใส่รูปเข้าไปข้างหน้า ใช้คำสั่งนี้ได้เลย

code

<*img src=MMM border=0>


และถ้าต้องการให้ข้อความเป็นสีอะไร ก็ใส่คำสั่งสีเข้าไปข้างหน้าข้อความ

code

<*font color=??> ข้อความ <*/font>




24. แถบข่าวของ นสพ.ผู้จัดการ (คุณ shelling ford)


แถบข่าว นสพ.ผู้จัดการ

code


<*iframe frameborder=0 height=19 name=result scrolling=no src="//www.manager.co.th/Home/NewsAlert.asp" width=80%><*/iframe>



copy code ไปใส่ไว้ที่ slogan



25. ใส่ scrollbar หน้าบล็อก


กล่อง scroll bar หน้าบล็อก

ให้เปลี่ยนสีและขนาดของกล่องเองตามใจชอบที่ข้อความสีแดง

code


<*DIV align=left style=' color: #000000; background-color: #CCCCFF; border: solid 2px black; width: l200px; height: 100px; overflow: scroll; '>
ใส่รูปและข้อความที่นี่<*/DIV>




When I was just a little girl,
I asked my mother, "What will I be
Will I be pretty
Will I be rich"
Here's what she said to me

"Que sera, sera,
Whatever will be, will be;
The future's not ours to see.
Que sera, sera,
What will be, will be."

Now I have Children of my own.
They ask their mother, "What will I be?"
Will I be handsome?
Will I be rich?"
I tell them tenderly:

"Que sera, sera,
Whatever will be, will be;
The future's not ours to see.
Que sera, sera,
What will be, will be.
Que Sera, Sera!




28. ใส่ข้อความเคลื่อนที่ ที่ task bar


ใส่ข้อความเลื่อนที่ taskbar

ใส่ข้อความที่ตัวอักษรสีแดง

code


<*SCRIPT language=JavaScript>
<*!--
ScrollSpeed = 100; // milliseconds between scrolls
ScrollChars = 1; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = "*'^'~*-.,_,.-* ใส่ข้อความที่นี่ *-.,_,.-*~'^'*";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<*!-- end -->
<*/SCRIPT>


copy code ไปใส่ในช่อง script



29. ใส่กรอบ (Table) หลายๆแบบให้ข้อความ


ใส่กรอบ (Table) หลายๆแบบให้ข้อความ

ต้องการกรอบแบบไหนก็เปลี่ยนรายละเอียดได้ 3 ตำแหน่ง คือ
ความหน้าของกรอบ 2px
ชนิดของกรอบ dotted, dashed,solid, groove, ridge, inset, outset, double
สีของกรอบ red

code


<*center><*table style="border: 1px solid color code;"cellpadding="5" cellspacing="10"<*tr><*td><*center>
ใส่รายละเอียดที่นี่<*/center>
<*/td><*/tr><*/table><*/center>





30. กรอบ(table) หลายชั้น


ใส่กรอบ (Table) หลายๆชั้น

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

โค้ดที่เขียนไว้ เป็นคำสั่งของกรอบ 3 ชั้น เรียงในลักษณะ และสีต่างๆ
โดยเลือกสี, แบบ, ความหนา (px) และขนาดของ cell spacing ได้ตามใจชอบ

code


<*center><*table style="border: 5px double #FF66CC;" cellspacing=2><*tr><*td><*table style="border: 2px solid #FF99CC;"cellspacing=5><*tr><*td><*table style="border: 2px dotted #FFCCCC;" cellspacing=20><*tr><*td align=center>ใส่รูปหรือข้อความที่นี่<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table><*/center>



ใส่รูปหรือข้อความที่นี่


เลือกสีได้ที่

สีที่ใช้ใน blog

ถ้าต้องการให้มี bg สีใหม่ตรงกลาง ใช้คำสั่งนี้

code


<*center><*table style="border: 5px double #FF66CC;" cellspacing=2><*tr><*td><*table style="border: 2px solid #FF99CC;"cellspacing=5><*tr><*td><*table style="background:#000000 url();border: 2px dotted #FFCCCC;" cellspacing=20><*tr><*td align=center>ใส่รูปหรือข้อความที่นี่<*/td><*/tr><*/table><*/td><*/tr><*/table><*/td><*/tr><*/table><*/center>



ใส่รูปหรือข้อความที่นี่




31. ใส่แถบสีให้ข้อความ


ใส่แถบสีให้ข้อความ
เลือกสีของ background และ font ตามใจชอบ ขนาดของแถบสีจะเปลี่ยนตามขนาดของข้อความ

code


<*p style="background:#000000;align=center"><*font face="Arial"size=2><*font color=#FFFFFF>
MMMMMM
MMMM
MMMM
MMMMMMMMM

<*/font><*/font><*/p>




MMMMMM
MMMM
MMMM
MMMMMMMMM



code นี้ใช้ได้ทุกที่




27. ใส่ selection box ให้ friend's blog.txt


ใส่ selection box ให้ friend's blog

การทำ selection จะทำให้รายชื่อของ links กระชับขึ้น
ถ้าต้องการใส่ friend's blog ก็ให้ใส่ http ของ mainblog ของเพื่อนๆเข้าไป

ก็อปปี้คำสั่งทั้งหมดได้จากกล่อง scrool bar อย่าลืม ลบ " * " ออกให้หมดด้วยนะครับ

code

<*select onchange="if (this.options[this.selectedIndex].value != 'null') { window(this.options[this.selectedIndex].value,'new','toolbar=no,location=yes,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes') }" style="background:aliceblue; width:165; color:royalblue; border:0; AutoSize:false;"><*option value="null">Friends' bloggang <*/option><*option value='//www.bloggang.com/mainblog.php?id=nature-delight'>ป้าติ๋ว<*/option><*option value='//www.bloggang.com/mainblog.php?id=dada'>ย่าดา<*/option><*option value='//www................'>name<*/option><*option value='//www.................'>name<*/option><*/select>



จะออกมาอย่างนี้

Create Date : 04 พฤศจิกายน 2554
Last Update : 4 พฤศจิกายน 2554 19:45:42 น. 1 comments
Counter : 3323 Pageviews.

 
มาขอศึกษา และนำไปใช้ ขอบคุณนะค่ะ


โดย: ตาลเหลือง วันที่: 4 พฤศจิกายน 2554 เวลา:12:28:43 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Jจุ้ย
Location :


[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 3 คน [?]




ข่าวจากหนังสือพิมพ์ผู้จัดการ


facebookฝากข้อความได้ครับ
Google

ฟังวิทยุออนไลครับ
ฟังวิทยุออนไลน์ กดที่รูปครับ




หลับฝันดี
๑ หลับคืนนี้ฝันดีนะที่รัก...
หลับตาพักหลับตาฝันถึงวันใหม่...
หลับคืนนี้คนดีฝันถึงใคร...
รู้บ้างไหมฉันตั้งใจฝันถึงเธอ...


Friends' blogs
[Add Jจุ้ย's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.