เมื่อโพสที่แล้วผมได้มีการเรียกเชิญนักพัฒนา หรือ เจ้าของเว็บไซต์ต่าง ๆ ร่วมกันใส่ code เพื่อปรับโทนสีบนหน้าเว็บไซต์ของตนเองให้เป็นโทนสีเทาเพื่อเป็นการไวอาลัยแก่ “พระบาทสมเด็จพระเจ้าอยู่หัวในพระบรมโกศ” ( รัชกาลที่ ๙ )
แต่วันนี้ผมได้นำทางเรียกอีกทางนึงสำหรับ เว็บไซต์ที่จำเป็นต้องมีสีสันต์อยู่ภายเว็บไซต์อยู่ โดยวันนี้ผมจะมาแจก code สำหรับสร้าง ริบบิ้น ตรงมุมบนขวามือ ( แบบเว็บนี้ ) แทนการเปลี่ยนสีเว็บไซต์ทั้งเว็บเป็นโทนสีเทา ดังนี้ครับ
|
1 2 3 |
<script type="text/javascript"> document.write("<div id='ribbon'></div>");const t="ขอเป็นข้ารองพระบาททุกชาติไป",r=document.getElementById("ribbon");r.innerHTML=t,r.style.backgroundColor="#000",r.style.boxShadow="0px 0px 10px rgba(0,0,0, 0.5)",r.style.color="#fff",r.style.padding="10px",r.style.position="fixed",r.style.top="50px",r.style.left="-55px",r.style.textAlign="center",r.style.width="250px",r.style.zIndex=999999,r.style.transform="rotate(-45deg)"; </script> |
หรือ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> document.write("<div id='ribbon'></div>"); const text = "ขอเป็นข้ารองพระบาททุกชาติไป"; const ribbon = document.getElementById('ribbon'); ribbon.innerHTML = text; ribbon.style.backgroundColor = "#000"; ribbon.style.boxShadow = "0px 0px 10px rgba(0,0,0, 0.5)"; ribbon.style.color = "#fff"; ribbon.style.padding = "10px"; ribbon.style.position = "fixed"; ribbon.style.top = "50px"; ribbon.style.left = "-55px"; ribbon.style.textAlign = "center"; ribbon.style.width = "250px"; ribbon.style.zIndex = 999999; ribbon.style.transform = "rotate(-45deg)"; </script> |
โดยในนำ code ดังกล่าวไปวางไว้ในส่วนของ <head></head> ครับ
โดยในนำ code ดังกล่าวไปวางไว้ต่อท้ายของ <body></body> ครับ
ปล. คุณสามารถที่จะเปลี่ยนข้อความในริบบิ้นได้ โดยการแก้ไขข้อความ const t=”ขอเป็นข้ารองพระบาททุกชาติไป“ ไปเป็นอย่างอื่นตามที่ต้องการได้นะครับ เช่น const t=”ฉันเกิดในรัชกาลที่ ๙” ก็ย่อมได้ครับ
ปล2. แต่ข้อความอย่ายาวไปนะครับเดียวจะเลยริบบิ้นเอาเสียเปล่า ๆ
