ข้ามไปที่เนื้อหาหลัก

วิธีติดแถบริบบิ้นสีดำตามมุมในเว็บ 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


ความคิดเห็น

BANGKOK GLOBAL SOFTWARE กล่าวว่า
ติดตั้ง [Earthchie] ทำให้เว็บกลับมามีสี ก็ได้นะครับ
Duck Daydream กล่าวว่า
ขอบคุณที่แนะนำมาครับ :)
ใต้หล้า กล่าวว่า
คุมโค๊ดไม่ได้เลย จะเอาโค๊ดไปลง ต้องมาเขียนทีละตัว -*-
ช่าย ต้องพพิม เราพิมไม่เก่งอยู่ด้วย แก้หน่อยครับ
Duck Daydream กล่าวว่า
โทษทีครับ แก้ไขให้แล้วครับผม :)
Duck Daydream กล่าวว่า
โทษทีครับ แก้ไขให้แล้วครับผม :)
เวอร์ชั่นมือถือไม่เห็นขึ้นเลยครับ
Duck Daydream กล่าวว่า
ลองดูอีกทีครับว่าใส่ Code ถูกป่าว เว็บนี้ลองในมือถือก็ได้ปกติครับ Code เดียวกัน

โพสต์ยอดนิยมจากบล็อกนี้

แจกไฟล์ Swatch Thaitone 2.0 (ไทยโทน) ใช้ได้กับทุกโปรแกรมของ Adobe

แจกไฟล์ Swatch Thaitone 2.0 ใช้ได้ทุกโปรแกรมของ Adobe
    Thaitone 2.0.ase คือไฟล์เพื่ม Swatch ในทุกโปรแกรมของตระกูล Adobe เช่น Adobe Photoshop, Adobe illustrator เป็นต้น ให้สามารถเพิ่มสี Thaitone ใน Swatch Library เพื่อให้การเลือกใช้สี Thaitone ในการออกแบบได้ง่ายยิ่งขึ้น ใน Swatch Library Thaitone จะประกอบไปด้วย ชื่อเรียกสีไทยในภาษาอังกฤษ (ทับศัพท์ภาษาไทย) พร้อมรหัสสี

โหลด : http://www.mediafire.com/file/4lz64vuv6if69l9/ThaitoneSwatch.zip ที่มา : https://web.facebook.com/thaitonecolor/posts/1046425482167365

ปล. โปรดอ่านเงื่อนไขการใช้งานตามไฟล์แนบ (License Agreement)
Copyright © Pairoj Pittayamatee

[ สีไทยโทน ] โปสเตอร์ชื่อเรียกสี และเปอร์เซ็นต์ค่าสี "ไทยโทน" 153 สี

พอดีไปเจอมาครับ ที่แรกก็หาอยู่นาน อยากได้ที่แบบว่าภาพชัดๆ หาอยู่ตั้งนานก็ไม่เจออันที่ภาพชัดๆเลย วันนี้โชคดีพอเข้าไป Facebook ThaiTone เจอเค้าปล่อยเป็นของขวัญปีใหม่พอดี ก็เลยเอามาแบ่งบันกันครับ แต่อันนี้โหลดมาแล้วมีไฟล์ .PDF และ .AI ให้ด้วย ชัดแจ๋วแน่นอนครับ โหลดได้ตามลิงค์ด้านล่างเลย 
โหลด : สีไทยโทน [ ThaiTone ] > http://www.mediafire.com/download/b969jnpk4o4gkto/THAITONE.zip
ที่มา : https://www.facebook.com/thaitonecolor/posts/633633936779857

jRaja (VAJA 6.0 Home Edition) โปรแกรมแปลงข้อความภาษาไทย ให้เป็นเสียงพูดภาษาไทย

พอดีกะว่าจะทำคลิปลงยูทูบแต่ไม่อยากใช้เสียงตัวเองพูดฮ่าๆ ที่แรกกะจะใช้ Google Translate แต่มันค่อนข้างยุ่งยากนิดหนึ่งเพราะต้องอัดเสียงจากคอม มันบันทึกออกมาเป็นไฟล์เสียงเลยไม่ได้ ก็เลยค้นไปค้นมาก็เจอ โปรแกรมที่ชื่อว่า jRaja VAJA มันอ่านว่า เจรจา วาจา เป็นโปรแกรมของ NECTEC ที่เขาพัฒนาขึ้นมา เป็นโปรแกรมฟรี ความพิเคษของโปรแกรม jRaja VAJA นี้ก็คือสามารถบันทึกเป็นไฟล์เสียง .wav ออกมาใช้ได้เลย และก็ปรับความเร็วของการพูดได้ สนใจสามารถโหลดโปรแกรม jRaja VAJA ได้ตามลิงค์ด้านล่างเลยครับ
โหลดโปรแกรม : jRaja (VAJA 6.0 Home Edition)

รหัส : http://www.duckdaydream.com
เว็บของผู้พัฒนา : http://vaja.nectec.or.th