นโยบายการจัดการความรู้ มหาวิทยาลัยสงขลานครินทร์ 1.ให้ใช้เครื่องมือการจัดการความรู้ผลักดัน คุณภาพคน และกระบวนทำงาน 2.ส่งเสริมการแลกเปลี่ยนประสบการณ์การทำงาน จากหน้างาน 3.ส่งเสริมให้มีเวทีเรียนรู้ร่วมกัน
อ่าน: 3436
ความเห็น: 0

ติดแถบริบบิ้นสีดำถวายความอาลัยบนเว็บไซต์ แทนการเปลี่ยนเว็บไซต์เป็นสีขาวดำ [C]

ติดแถบริบบิ้นสีดำถวายความอาลัยบนเว็บไซต์

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

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

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

ดังนั้นจึงขอรวบรวมวิธีการติดแถบริบบิ้นสีดำถวายความอาลัยบนเว็บไซต์ แทนการเปลี่ยนเว็บไซต์เป็นสีขาวดำประเภทต่าง ๆ ซึ่งวิธีดังกล่าวก็ยังคงสามารถแสดงถึงความความอาลัยได้ด้วยเช่นกัน

ก่อนเริ่มต้นทำ จะขออธิบายหลักการทำงานก่อน เพื่อความเข้าใจ คือ

  • Code จะประกอบด้วย 2 ส่วน คือส่วนของ CSS และ HTML จะต้องนำ Code ไปวางในส่วนของ CSS และ HTML ไม่ใช่วางที่เดียวเหมือนกับการทำเว็บไซต์สีขาวดำ
  • จะต้องมีการนำรูปภาพที่เป็นแถบริบบิ้นจำนวน 4 ภาพไปวางในพื้นที่ของเว็บไซต์ที่สามารถทำการเรียกได้ เพื่อกำหนดตำแหน่งที่จะทำการเรียกภาพใน Code HTML ซึ่งสามารถดาวน์โหลดรูปภาพได้จาก black_ribbons.zip (รูปภาพริบบิ้นดำจากเว็บไซต๋ http://nuuneoi.com/blog/blog.php?read_id=884)
     

ขั้นตอนการติดแถบริบบิ้นสีดำบนเว็บไซต์ประเภทต่าง ๆ มีวิธีการดังนี้


1. หากเว็บของเรามี Base ไฟล์ CSS และ HTML 

1.1 ในส่วนของไฟล์ CSS ให้เปิดขึ้นมาแล้วนำ Code ลงไปตามด้านล่าง

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

1.2 ในส่วนของไฟล์ HTML ให้เลือกตำแหน่งที่ต้องการจาก Code ด้านล่าง (เลือกแค่ 1 ตำแหน่ง) แล้วนำไปวางบนสุดหลังเปิด Tag <body>

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

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

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

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

และที่สำคัญอย่าลืมเปลี่ยนพาธของภาพให้เป็นไปตามพาธที่ได้วางภาพไว้ในเว็บไซต์ด้วย อย่างในโค้ดตัวอย่างด้านบนนี้ใส่ภาพไว้ใน /images

 
2. หากเว็บของเราไม่มี Base CSS ให้นำ Code ไปวางในทุกหน้าของไฟล์ HTML

2.1 ใส่ Code CSS ในส่วนของ <head> *ข้อสังเกตจะมีการใช้ tag <style></style> ด้วย

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

2.2 ให้เลือกตำแหน่งที่ต้องการจาก Code ด้านล่าง (เลือกแค่ 1 ตำแหน่ง) แล้วนำไปวางบนสุดหลังเปิด Tag <body>

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

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

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

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

และที่สำคัญอย่าลืมเปลี่ยนพาธของภาพให้เป็นไปตามพาธที่ได้วางภาพไว้ในเว็บไซต์ด้วย อย่างในโค้ดตัวอย่างด้านบนนี้ใส่ภาพไว้ใน /images

 
3. หากเป็นการใช้เว็บไซต์สำเร็จรูป ในที่นี้จะยกตัวอย่าง CMS ที่มีการใช้งานแพร่หลาย คือ joomla และ wordpress

3.1 หากใช้ joomla 1.5
สามารถใช้วิธีการดังข้อที่ 1 โดยนำ Code ไปใส่ไว้ที่ CSS และ HTML ที่เราได้ทำการเรียกใช้ Template นั้น ๆ เป็นค่าเริ่มต้น โดยมีวิธีการดังนี้
1. ไปที่่เมนู Extensions -> Template Manager


2. จากตัวอย่าง Template ที่ใช้คือ JA_Edenite ให้กดคลิกเข้าไป


3. กดที่ Edit CSS


4. ไฟล์ที่จะเพิ่ม Code ชื่อ template.css กดเลือกจากนั้นไปคลิกที่ Edit เพื่อแก้ไข


5. นำ Code ไปใส่ที่ตำแหน่งล่างสุด จากนั้นกดปุ่ม Save


6. จากนั้นจะนำ Code ไปใส่ใน HTML โดยให้กดไปที่เมนู Edit HTML


7. นำ Code ไปใส่ที่ตำแหน่งบนสุดหลังเปิด Tag <body> จากนั้นกดปุ่ม Save


3.2 หากใช้ joomla 2.5/3.x
1. สามารถใช้วิธีการดังข้อที่ 1 โดยนำ Code ไปใส่ไว้ที่ CSS และ HTML ที่เราได้ทำการเรียกใช้ Template นั้น ๆ เป็นค่าเริ่มต้น โดยมีวิธีการดังนี้
1.1 ไปที่เมนู Extensions -> Template Manager


1.2 จากตัวอย่าง Template ที่ใช้คือ Target ให้กดคลิกเข้าไป


1.3 เข้าไปที่ Folder css ไฟล์ที่จะเพิ่ม Code ชื่อ style.css


1.4 นำ Code ไปใส่ที่ตำแหน่งล่างสุด จากนั้นกดปุ่ม Save


1.5 จากนั้นนำ Code ไปใส่ใน HTML โดยจะอยู่ใน Folder php ชื่อไฟล์ index.php


1.6 นำ Code ไปใส่ที่ตำแหน่งบนสุดหลังเปิด Tag <body> จากนั้นกดปุ่ม Save


2. สามารถติดตั้ง Module ที่ใช้สำหรับติดแถบริบบิ้นสีดำคาดตรงมุมของหน้าเว็บไซต์ได้ทันที โดยมีวิธีการดังนี้
2.1 ดาวน์โหลดได้จาก Black Ribbon Joomla Module
2.2 ทำการติดตั้ง Module ให้เสร็จเรียบร้อย
2.3 หลังจากติดตั้ง Module แล้วให้เข้าไปทำการปรับแต่งค่าเพิ่มเติมที่ Extension -> Module Manager-> Black Ribbon Module
2.4 ทำการเลือกตำแหน่งของแถบริบบิ้นที่ต้องการ จากนั้นทำการ Copy Code ในช่อง textarea ที่ต้องการ


2.5 ทำการวาง Code ในช่องหัวข้อที่ 2 Custom HTML


2.6 จากนั้นให้ทำการปรับแต่งค่าเพิ่มเติมทางด้านขวา คือ

Show Title ให้เลือกเป็น Hide ไม่แสดง Title
Position ให้เลือกตำแหน่งที่มีอยู่ใน Template ในที่นี้เลือกเป็น Top
Status ให้เลือกเป็น Published เพื่อใช้งาน Module

 

2.7 จากนั้นปรับในหัวข้อ Menu Assignment จาก No pages เป็น On all pages เพื่อแสดงทุกหน้า


2.8 จากนั้นกดปุ่ม Save หรือ Save & Close

** Black Ribbon Module Version 1.0 เป็น Module ที่ผมพัฒนาเอง โดยนำ Code ที่ทางเว็บไซต์ http://www.ext-joom.com/en เปิดเผยให้ใช้ได้ฟรีตามข้อกำหนด GNU GENERAL PUBLIC LICENSE มาทำการปรับปรุงเพิ่มเติม เพื่อให้สอดคล้องกับการใช้งาน หากท่านนำไปใช้งานแล้วมีข้อผิดพลาด ต้องอภัยมาด้วยครับ

*** อัพเดท มีผู้ทำ Plugin joomla สำหรับติดริบบิ้นดำเอาไว้แล้วเช่นกันอยู่ที่เว็บไซต์ http://www.joomlacorner.com ผู้พัฒนาคือคุณ Akawawuth Tamrareang สามารถดาวน์โหลดได้จากเว็บไซต์ผู้พัฒนาหรือดาวน์โหลดได้จากที่นี่


3.3 หากใช้ wordpress
1. สามารถใช้วิธีการดังข้อที่ 1 โดยนำ Code ไปใส่ไว้ที่ CSS และ HTML ที่เราได้ทำการเรียกใช้ Theme นั้น ๆ เป็นค่าเริ่มต้น โดยมีวิธีการดังนี้
1.1 ไปที่เมนู Appearance -> Editor


1.2 จากตัวอย่าง Theme ที่ใช้คือ Sparkling ไฟล์ CSS ที่จะเพิ่ม Code ชื่อ style.css นำ Code ไปใส่ที่ตำแหน่งล่างสุด จากนั้นกดปุ่ม Update File


1.3 จากนั้นไปคลิกที่ Theme Header (header.php) เพื่อทำการวาง Code สำหรับ HTML โดยจะวางในส่วนของ Tag <body> จากนั้นกดปุ่ม Update File


2. สามารถติดตั้ง plugin ที่ใช้สำหรับติดแถบริบบิ้นสีดำคาดตรงมุมของหน้าเว็บไซต์ได้ทันที  โดยมีวิธีการดังนี้
2.1 ดาวน์โหลดได้จาก Black Ribbon Wordpress Plugin
2.2 ทำการติดตั้ง และ Active plugin
2.3 วิธีการใช้งานให้ไปที่เมนู Black Ribbon เพื่อเลือกตำแหน่งของริบบิ้นดำ


2.4 เลือกได้ตามใจชอบ แล้วกด Save Changes

** ผู้พัฒนา wordpress plugin คุณเนย เว็บไซต์ http://nuuneoi.com/blog/blog.php?read_id=884

ข้อแนะนำเพิ่มเติม
- วิธีการเพิ่ม Code ในไฟล์ CSS และ HTML ของเว็บไซต์สำเร็จรูปเป็นการแก้ไขผ่าน Backend ของระบบก่อนทำการแก้ไขต้องตรวจสอบให้แน่ใจก่อนว่ามีสิทธิ์แก้ไขผ่านเว็บไซต์ได้หรือไม่ หากไม่มีสิทธิ์ในการแก้ไขผ่านเว็บไซต์ ให้ทำการเพิ่มสิทธิ์ของ Folder template ในระบบเสียก่อน
- นอกเหนือจากการเพิ่ม Code CSS และ HTML ผ่านทาง Backend ของระบบแล้ว ยังสามารถเพิ่ม Code ได้ผ่านช่องทางอื่น ๆ เช่น Control Panel ของระบบ Web Hosting ซึ่งสามารถเข้าไปจัดการไฟล์ได้เช่นกัน
- ชื่อไฟล์ CSS ที่ใช้สำหรับปรับแต่งของแต่ละ template ในเว็บไซต์สำเร็จรูปบางครั้งชื่อที่ตั้งอาจจะแตกต่างไปจากนี้ ขึ้นอยู่กับผู้พัฒนา template แต่ส่วนใหญ่จะตั้งชื่อเพื่อสื่อให้ชัดเจน เช่น template.css, theme.css หรือ style.css
- ชื่อไฟล์ที่เอาไว้สำหรับใส่ Code HTML ของเว็บไซต์สำเร็จรูป ถ้าเป็น joomla จะใส่ในไฟล์ชื่อ index.php ส่วนใน wordpress จะใส่ในไฟล์ชื่อ header.php
หากใช้เว็บไซต์สำเร็จรูป เช่น joomla หรือ wordpress แนะนำว่าให้ใช้ plugin หรือ module จะดีกว่าการระบุ Code ในไฟล์เอง เนื่องจากจะต้องมีการะบุที่อยู่ของพาธไฟล์รูปภาพ ซึ่งจะระบุพาธในระบบเว็บไซต์สำเร็จรูปโดยเฉพาะ wordpress จะมีความยุ่งยากซับซ้อนในการเข้าถึงไฟล์รูปภาพที่ทำการ Upload เข้าไป 


ปัญหาที่พบ
- เนื่องจากการแสดงภาพริบบิ้นจะต้องกำหนดทั้งในส่วนของ CSS และ HTML โดยเฉพาะอย่างยิ่ง Code HTML ที่จะต้องนำไปวางในส่วนของ Tag <body> เพื่อทำการเรียกรูปภาพขึ้นแสดง หากเป็นเว็บไซต์หรือระบบที่พัฒนาโดยใช้วิธีการเรียก Master Page จะสะดวกกว่ามาก เพียงแค่นำไปวางไว้ที่หน้าของ Master Page ที่เดียว แต่หากไม่ได้ใช้คุณสมบัติดังกล่าวจะต้องนำไปวางไว้ที่ทุกหน้าของ HTML Page  
- เมื่อทำการทำเรียกหน้าเว็บไซต์หากระบุพาธของรูปภาพไม่ตรง จะไม่แสดงภาพให้เห็น ซึ่งต้องทำการแก้ไขพาธของรูปภาพให้ถูกต้อง

สุดท้ายขอจบการนำเสนอบทความเพียงเท่านี้ หากผิดพลาดประการใด ต้องขออภัยมา ณ ที่นี้ ขอบคุณครับ

 
ที่มา
http://nuuneoi.com/blog/blog.php?read_id=884
http://www.joomlacorner.com/joomla-news/joomlacorner-extensions/939-plugin-blackribbon.html
http://www.ext-joom.com/en

หมวดหมู่บันทึก: เรื่องทั่วไป
คำสำคัญ (keywords): css  html  joomla  module  plugin  wordpress  ริบบิ้น  ในหลวง
สัญญาอนุญาต: ซีซี: แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน Cc-by-nc-sa
สร้าง: 01 พฤศจิกายน 2559 12:17 แก้ไข: 18 สิงหาคม 2560 14:42 [ แจ้งไม่เหมาะสม ]
ดอกไม้
สมาชิกที่ให้กำลังใจ: Ico24 บิวตี้ และ Ico24 โอ๋-อโณ.
สมาชิกที่ให้กำลังใจ
 
Facebook
Twitter
Google

บันทึกอื่นๆ

ความเห็น

ไม่มีความเห็น
คุณต้องทำการเข้าระบบก่อนแสดงความเห็น