ฟรีโค้ดโบว์ดำไว้อาลัย Black Ribbons ริบบิ้นดำไว้ทุกข์

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

ขั้นตอนติดตั้งโค้ด CSS ริบบิ้นดำไว้ทุกข์สำหรับ Blogger

1. ไปที่ รูปแบบ แล้วคลิก เครื่องมือออกแบบเทมเพลต


1.1 คลิกที่ ขั้นสูง แล้วคลิก เพิ่ม CSS จากนั้นใส่โค้ดด้านล่างนี้ลงไป แล้วคลิก ใช้กับบล็อก เพื่อเป็นการบันทึก แล้วคลิกที่ กลับสู่ Blogger

.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; }


2. ไปที่ แม่แบบ แล้วคลิกเลือก แก้ไข HTML นำโค้ดด้านล่างที่เราต้องการใส่ก่อน </body> แล้วทำการ บันทึกเทมเพลต


โค้ดแสดงผลด้านบนมุมซ้าย: <img class='black-ribbon stick-top stick-left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFxipg-_5DpGuhgiKvi9_iX6L0Ao9kSDw6zxWU79sUBvRBpirC6oXMRQVgosM37YFkxEOZR_1jyWmg2-3FtYseFJZaR8B3XYsx_HX1ClHOE9rzWQbIi9-3YSZF8iz-0j6WbThIkHwTCxm/s1600/108Basic-BlackRibbons.png'/>


โค้ดแสดงผลด้านบนมุมขวา: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFxipg-_5DpGuhgiKvi9_iX6L0Ao9kSDw6zxWU79sUBvRBpirC6oXMRQVgosM37YFkxEOZR_1jyWmg2-3FtYseFJZaR8B3XYsx_HX1ClHOE9rzWQbIi9-3YSZF8iz-0j6WbThIkHwTCxm/s1600/108Basic-BlackRibbons.png" class="black-ribbon stick-top stick-right"/>


โค้ดแสดงผลด้านล่างมุมซ้าย: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFxipg-_5DpGuhgiKvi9_iX6L0Ao9kSDw6zxWU79sUBvRBpirC6oXMRQVgosM37YFkxEOZR_1jyWmg2-3FtYseFJZaR8B3XYsx_HX1ClHOE9rzWQbIi9-3YSZF8iz-0j6WbThIkHwTCxm/s1600/108Basic-BlackRibbons.png" class="black-ribbon stick-bottom stick-left"/>


โค้ดแสดงผลด้านล่างมุมขวา: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFxipg-_5DpGuhgiKvi9_iX6L0Ao9kSDw6zxWU79sUBvRBpirC6oXMRQVgosM37YFkxEOZR_1jyWmg2-3FtYseFJZaR8B3XYsx_HX1ClHOE9rzWQbIi9-3YSZF8iz-0j6WbThIkHwTCxm/s1600/108Basic-BlackRibbons.png" class="black-ribbon stick-bottom stick-right"/>


*** สามารถนำไฟล์รูปภาพด้านล่างนี้ไปเปลี่ยนใช้งานได้ ***



สำหรับคนที่ใช้ WordPress ให้โหลดไฟล์ปลั๊กอินได้ที่: https://goo.gl/3G3tFJ

1. ไปที่ Plugins แล้วคลิก Add New คลิกเลือก Upload Plugin เพื่อทำการอัพโหลดไฟล์ zip ปลั๊กอินที่ได้ดาวน์โหลดมาไว้ก่อนหน้านี้ จากนั้นคลิก Install Now แล้วคลิก Activate Plugin



2. ดูที่แถบเครื่องมือต่าง ๆ ด้านซ้ายมือ คลิกที่แถบเมนู Black Ribbon สามารถติ๊กเลือกตำแหน่งการแสดงผลของริบบิ้นสีดำได้ตามต้องการ แล้วคลิก Save Changes


เครดิต CSS: https://goo.gl/VRkrK7


ไม่มีความคิดเห็น:

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