วิธีคาดแถบริบบิ้นลงในบล็อก || Blogspot Corner Ribbon | Kaosuaylunla Diary

วิธีคาดแถบริบบิ้นลงในบล็อก || Blogspot Corner Ribbon

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


เข้าไปที่ Template กดปุ่ม Edit HTML คลิกในหน้าต่างโค้ดหาข้อความ </head> ตามภาพด้านล่าง

รายละเอียดโค้ดริบบิ้น:
<script type="text/javascript"> document.write("<div id='ribbon'></div>");const t="In Memory Of...",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>

วิธีใช้โค้ด:
Copy โค้ดไปใส่ไว้หลัง </head>
1. ใส่ข้อความที่ต้องการแทนคำว่า In Memory Of... โดยให้อยู่ในเครื่องหมายคำพูด "..."
2. สีพื้นหลังเซทไว้เป็นสีดำ แต่ถ้าต้องการเปลี่ยนให้หาโค้ดสีมาใส่ในเครื่องหมายคำพูดแทน #000 ได้
3. สีตัวอักษรเซทไว้เป็นสีขาว แต่ถ้าต้องการเปลี่ยนให้หาโค้ดสีมาใส่ในเครื่องหมายคำพูดแทน #fffได้
วิธีหาโค้ดสีที่ต้องการ ลองเสิชคำว่า color code ในกูเกิ้ลดูนะ

ลองใช้กันดูนะคะ
ได้ไม่ได้ยังไงมาคอมเม้นบอกกันได้เลย หวังว่าบล็อกนี้จะมีประโยชน์บ้างม่มากก็น้อยค่ะ

0 comments:

แสดงความคิดเห็น

อ่านจบแล้วอยากฝากคอมเม้นอะไรบ้าง?