วิธีติดแถบริบบิ้นสีดำตามมุมในเว็บ Blogger ของเรา เพื่อไว้อาลัยแด่ในหลวง

วิธีติดแถบริบบิ้นสีดำตามมุมในเว็บ Blogger ของเรา เพื่อไว้อาลัยแด่ในหลวง

1. ให้เราเอาโค๊ต CSS ตามด้านล่างไปใส่ใน Blogger ของเรา ส่วนใครที่ใส่ไม่เป็นให้เข้าไปทำตามนี้ลิงค์นี้ http://www.duckdaydream.com/2016/10/Blogger-CSS-Grayscale.html ทำตามข้อ 1 ถึงข้อ 2 แล้วเพิ่มโค้ดด้านล่างนี้ลงไป เมื่อเพิ่มเสร็จให้กด ใช้กับบล็อก

.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

3. มันก็จะปรากฎหน้าโค้ดมาให้ จากนั้นให้เราคลิกตรงไหนก็ได้ในส่วนของโค้ด จากนั้นให้กด Ctrl+F

4. ด้านบนขวาในส่วนของโค้ดก็จะปรากฎช่องสี่เหลื่ยมขึ้นมาให้เรา พิมพ์ว่า </body> แล้วกด Enter มันก็จะทำการค้นหาคำว่า </body> เมื่อเจอแล้วให้นำโค้ดด้านล่างไปใส่ก่อนคำว่า </body>

***โค้ดให้เลือกไปอย่างใดอย่างหนึ่งว่าเราจะนำไปติดตรงมุมไหนของเว็บเรา

<!-- Top Left -->
<img src="http://image.coolz-server.com/s/VgJDQdCt" class="black-ribbon stick-top stick-left"/>

<!-- Top Right -->
<img src="http://image.coolz-server.com/s/v6pge483" class="black-ribbon stick-top stick-right"/>

<!-- Bottom Left -->
<img src="http://image.coolz-server.com/s/r42sKwuS" class="black-ribbon stick-bottom stick-left"/>

<!-- Bottom Right -->
<img src="http://image.coolz-server.com/s/65mTkCod" class="black-ribbon stick-bottom stick-right"/>

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

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

          เมื่อนำโค้ดไปใส่ก่อน </body> ก็จะได้ตามรูปด้านล่าง 

5. จากนั้นก็ให้กด บันทึกเทมเพลต ก็เป็นอันเสร็จ เราก็จะได้แถบริบบิ้นสีดำตามมุมที่ต้องการในเว็บ Blogger ของเราแล้ว :)

-------------------------------------

ปล. ขอขอบคุณโค้ด CSS & HTML + รูปแถบริบบิ้นสีดำ จากเว็บ Nuuneoi