Tips: วิธีติดริบบิ้นสีดำบน Blog (Blogspot)

วันก่อนนี้ผมแชร์วิธีการย้อมเว็บเป็นสีขาวดำกันไปแล้ว วันนี้มาบอกอีกวิธีติดโบว์ดำตรงมุมของเว็บ/Blog กันครับ

เบื้องต้นเลยเราก็ไปที่ Template >> แล้วเลือก Edit html ตามรูปด้านล่าง



หลังจากนั้นเราก็มาปรับแต่ง CSS โดยการกด Ctrl+F พิมพ์คำว่า "]]></b:skin>" แล้วนำโค้ดด้านล่างนี้ไปใส่ไว้ด้านบนตามรูป แล้วกด "Save Template"

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



เมื่อจัดการส่วน CSS เสร็จเรียบร้อย ก็มาส่วนของ HTML กันครับ โดยมีชุดคำสั่งด้านล่างที่สามารถเลือกได้ว่าจะเอาโบว์ดำไปติดมุมไหน ซ้ายบน ขวาบน ซ้ายล่าง หรือขวาล่าง

<!-- Top Left -->
<img src="https://goo.gl/Yl6KNg" class="black-ribbon stick-top stick-left"/>

<!-- Top Right -->
<img src="https://goo.gl/EMCghL" class="black-ribbon stick-top stick-right"/>

<!-- Bottom Left -->
<img src="https://goo.gl/YxzDaS" class="black-ribbon stick-bottom stick-left"/>

<!-- Bottom Right -->
<img src="https://goo.gl/NsuiKq" class="black-ribbon stick-bottom stick-right"/>

โดยผมจะเลือกเป็น "ซ้ายบน" หรือ "Top Left" ครับ

แล้วก็กด Ctrl+F พิมพ์คำว่า "</head>" หลังจากนั้นเอาโค้ดด้านบนนี้ไปกรอกด้านใต้ </head> ดังนี้



กด "Save Template" แล้วผลออกมาจะเป็นดังนี้