Bloggang.com : KiRaRi : Basic Code

Basic Code

มารวมโค้ดที่ใช้บ่อยๆแบบเบสิกๆดีกว่า
ขอบคุณโค้ดส่วนนี้จาก ป้ากล้วย, คุณดอกหญ้าเมืองเลย และคุณยายกุ๊กไก่ค่ะ

อย่าลืมเอาเครื่องหมายนี้[ * ] ออกก่อนนะคะ

1. ใส่ bg แบบ fixed ไม่ให้เลื่อนลงตาม scroll bar

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

2. วางภาพมุมบล็อกให้อยู่มุมขวาล่าง

<*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:right bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style>

3. วางภาพมุมบล็อกให้อยู่มุมซ้ายบน
<*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:left top;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style>

4. วางภาพมุมบล็อกให้อยู่มุมซ้ายล่าง

<*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:left bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style>

5. คลิกดูภาพขนาดจริง (เมื่อคลิกจะแยกออกไปแสดงอีกหน้าเว็บเพจ)
<*a href="URL ของภาพ" target=_blank><*img src=URL ของภาพ width='ความกว้างที่จะแสดง'height='ความสูงที่จะแสดง' border=0><*/a>

6. ใส่รูปที่หัวบล็อก
วางใน Scrip Area
<*script>document.images[0].src = "urlรูปที่ต้องการใส่"

7. ใส่เฮดได หรือภาพบนสุดของหน้าเว็บ
ใส่ที่ slogan

<*img src='url ของรูปที่ใส่'border=0>
ถ้าอยากจะให้รูปอยู่ตรงกลาง ต้องใช้โค้ดข้างล่างนี้เพิ่ม
<*img src="images/spacer.gif" width="x"
height="10"*>
ใส่ต่อกันเลยและเปลี่ยนขนาดตรง x ไปเรื่อยๆ จนได้ขนาดที่ต้องการ ตามตัวอย่างข้างล่างนี้
เช่น <*img src='urlของรูปที่ใส่'border=0>
<*img src="images/spacer.gif" width="100" height="10">

8. ใส่รูปเฮดบล็อกแบบกำหนดความยาว

<*center><*img src="http:… ภาพเฮดบล็อก " width="1224" height="140" /><*/center>

9. cursor/เมาส์
<*body style="cursor:url( URLรูป.ani )">

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

(ใส่ในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น) โค้ด=
<*style>table {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}<*/style>

11. คลิ๊ก MOUSE ขวาแล้วไม่มีอะไรขึ้นมาเลย
<*script type="text/javascript" src ="//www.geocities.com/paradijs.bloggang/mouse.js"> <*/script>

12. เปลี่ยน Now Here
ใส่ในช่อง slogan
<*script>iLength = document.images.length; for(i=0;i<*/script>

13. เปลี่ยนจุดหน้าหัวข้อ bullet
(ใส่ในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น) โค้ด=
<*style>ul{list-style: ;list-style-image: url(รูปที่ต้องการ);}<*/style>

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

15. เปลี่ยนรูปอมยิ้ม (log in) ท้ายชื่อ
ใส่ไว้ที่ช่อง script
<*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>

16. ทำลิงค์ที่เปิดในหน้าเดียวกัน
<*a href="ใส่..//..ของเวป">เขียนข้อความ<*/a>

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

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

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

20. Code ทำให้ตัวหนังสือห่าง
<*style>p{letter-spacing:2px;}<*/style>

<*style>body, ul, li, p{letter-spacing:2px;}<*/style>

Create Date : 28 เมษายน 2552

Last Update : 9 สิงหาคม 2554 17:20:17 น.

0 comments

Counter : 998 Pageviews.