โค้ดง่ายๆ ในการติดริบบิ้นให้กับเว็บไซต์ แทนการเปลี่ยนสีเว็บเป็นขาวดำ

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

1.ก่อนอื่นรูปที่จะใช้สามารถ Download ได้จาก black_ribbons.zip  

2.จากนั้น Copy โค้ด CSS ด้านล่างนี้ ไปวางในโปรเจคเรา

.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}

@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }

  
3. เพิ่มโค้ด HTML เข้าไป โดยเลือกมุมใดมุมหนึ่งที่จะติดโค้ด บนขวา/ซ้าย ล่างขวา/ซ้าย

<img src="/images/black_ribbon_top_left.png" class="black-ribbon stick-top stick-left"/>


<img src="/images/black_ribbon_top_right.png" class="black-ribbon stick-top stick-right"/>


<img src="/images/black_ribbon_bottom_left.png" class="black-ribbon stick-bottom stick-left"/>


<img src="/images/black_ribbon_bottom_right.png" class="black-ribbon stick-bottom stick-right"/>

*หมายเหตุ Path รูปอย่าลืมเปลี่ยนกันนะ เดี๋ยวรูปไม่ออก เช่น อัพรูปไว้ที่เว็บ "http://www.mx7.com/i/ee7/8JYbEO.png" ก็เปลี่ยนเป็น src="http://www.mx7.com/i/ee7/8JYbEO.png" ... เท่านี้ก็เรียบร้อย

ที่มาและข้อมูลเพิ่มเติมได้จาก : โค้ดติดแถบริบบิ้นสีดำถวายความอาลัยบนเว็บ แทนการดร็อปสีเว็บเป็นขาวดำ

สำหรับลูกค้าที่ใช้ระบบ Sogoodweb สร้างเว็บไซต์สำเร็จรูป อยู่ เรามีวิธีที่แสนง่ายในการเพิ่มริบบิ้น ดังนี้เลย

1. ลงชื่อเข้าใช้แล้วเข้าไปหน้าจัดการหลังบ้าน จากนั้นเลือกที่เมนู "ปรับแต่งเว็บไซต์" > "วิดเจ็ต" จากนั้น หาตำแหน่งที่จะวาง เช่น วางไว้ในตำแหน่ง Footer ก็เลื่อนลงมาล่างสุดแล้วคลิกปุ่ม "รูปดินสอ" 

2. จากนั้นเลือกปุ่ม "<>" แล้ว Copy โค้ดนี้วางได้เลย จากนั้นกดปุ่ม "OK" เสร็จแล้วคลิกปุ่ม "บันทึกและปิด"

< style >< /style >

3. เท่านี้ก็เรียบร้อยแล้ว