เทคนิคแสดงผลแบนเนอร์กิจกรรม ด้วยรูปภาพที่คุณออกแบบเอง

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


ตัวอย่างการแสดงผลแบนเนอร์กิจกรรมที่หน้าเว็บไซต์ (แสดงผลเหนือภาพส่วนหัวและเมนูด้านบน)

 

1. เตรียมรูปภาพแบนเนอร์ 

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

  • ขนาดใหญ่ 1024x170 pixel สำหรับแสดงผลบนหน้าจอ เช่น คอมพิวเตอร์ โน้ตบุ้ค เป็นต้น
     
  • ขนาดกลาง 610x150 pixel สำหรับแสดงผลบนหน้าจอ เช่น Tablets หรือ Smart Phone หน้าจอใหญ่ เป็นต้น
     
  • ขนาดเล็ก 320x120 pixel สำหรับแสดงผลบนหน้าจอมือถือขนาดเล็ก เช่น iPhone 5 เป็นต้น

 นามสกุลของไฟล์รูปภาพที่รองรับ : .jpg , .gif , .png   และขนาดของไฟล์รูป ไม่ควรเกิน 2 MB ต่อ 1 รูป เพื่อไม่ทำให้การแสดงผลหน้าเว็บไซต์โหลดช้าเกินไปค่ะ

 

2. อัพโหลดรูปภาพบนเว็บไซต์

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

 1. สร้างหรือแก้ไขเมนูชนิด "บทความ/สินค้า" จากนั้น คลิก "แก้ไขด้วย Text Editor"ที่ Section พื้นที่เนื้อหาหลัก หรือ Section Text 

 

2. คลิกเครื่องมือ Insert/edit image และคลิกสัญลักษณ์แว่นขยาย ที่ด้านขวาของหัวข้อ Source

3. ปรากฎหน้าต่าง Responsive Filemanager ให้คลิกสัญลักษณ์ Upload และเลือกอัพโหลดภาพแบนเนอร์จากเครื่องคอมพิวเตอร์ของคุณ จนครบทั้ง 3 ภาพ และคลิก Return to files list

 

4. กลับมาที่หน้าต่าง Responsive Filemanager ให้คลิกขวาที่ภาพแบนเนอร์ และเลือก "Show URL" จากนั้น Copy URL ของภาพแบนเนอร์เก็บไว้ (เช่น วางในโปรแกรม Notepad, MS Word ฯลฯ) ทำซ้ำจนครบทั้ง 3 ภาพ

 

 

3. แก้ไขโค้ด HTML และติดตั้งในเว็บไซต์

เบื้องต้น ทาง ReadyPlanet ได้สร้างโค้ดแบนเนอร์กิจกรรมสำเร็จรูปไว้ เว็บมาสเตอร์เพียงนำ URL ของรูปภาพแบนเนอร์ทั้ง 3 ขนาด ที่อัพโหลดตามขั้นตอนในข้อ 2. มาวางในตำแหน่งที่กำหนด (ภายในสัญลักษณ์ " " แทนที่ตัวอักษรสีแดง) ดังตัวอย่างต่อไปนี้

 

โค้ดแบนเนอร์กิจกรรมแบบ Custom

<div id="custom-event-banner"><img class="activity-banner" id="size_320120" src="ใส่ URL ของภาพแบนเนอร์ขนาดเล็ก"/>

<img class="activity-banner" id="size_610150" src="ใส่ URL ของภาพแบนเนอร์ขนาดกลาง"/>

<img class="activity-banner" id="size_1024170" src="ใส่ URL ของภาพแบนเนอร์ขนาดใหญ่"/></div>

<style>

#body-bg {padding: 0 !important;}

#banner-festival {display: none !important;}

#slidemenu-container {position: absolute;top: 42px;}

#custom-event-banner {min-height: 2px;}

@media screen and (max-width: 610px) {#custom-event-banner {margin-bottom: -42px;}

</style>


 

ตัวอย่าง URL ของรูปภาพแบนเนอร์ที่ได้จากการอัพโหลดใน ข้อ 2.

  • URL ของภาพแบนเนอร์ขนาดใหญ่ : /images/editor/banner1024x170.jpg
     
  • URL ของภาพแบนเนอร์ขนาดกลาง : /images/editor/banner610x150.jpg
     
  • URL ของภาพแบนเนอร์ขนาดเล็ก : /images/editor/banner320x120.jpg

 

ตัวอย่างโค้ดแบนเนอร์กิจกรรมแบบ Custom ที่ใส่ URL รูปภาพแบนเนอร์แล้ว

<div id="custom-event-banner"><img class="activity-banner" id="size_320120" src="/images/editor/banner320x120.jpg"/>

<img class="activity-banner" id="size_610150" src="/images/editor/banner610x150.jpg"/>

<img class="activity-banner" id="size_1024170" src="/images/editor/banner1024x170.jpg"/></div>

<style>

#body-bg {padding: 0 !important;}

#banner-festival {display: none !important;}

#slidemenu-container {position: absolute;top: 42px;}

#custom-event-banner {min-height: 2px;}

@media screen and (max-width: 610px) {#custom-event-banner {margin-bottom: -42px;}

</style>


 

จากนั้น Copy Code แบนเนอร์กิจกรรมแบบ Custom ที่ใส่ URL รูปภาพแบนเนอร์แล้ว นำไปติดตั้งในเว็บไซต์ ที่เมนู "ตั้งค่า" คลิกเมนู "โค้ดและสคริปต์" และวางโค้ดในส่วน "ภายใต้ <head>" และคลิก บันทึก ค่ะ

 

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

   

 

 หมายเหตุ

1. หากเว็บมาสเตอร์มีการเปิดใช้งานแบนเนอร์กิจกรรม (ที่ภายใต้เมนูตั้งค่า > ทั่วไป) และมีการวางโค้ดแบนเนอร์เองตามขั้นตอนข้างต้นด้วย ระบบจะเลือกแบนเนอร์แบบโค้ดมาแสดงผลเป็นหลักค่ะ

2. กรณีไม่สะดวกตกแต่งรูปภาพครบทั้ง 3 ขนาด เว็บมาสเตอร์อาจสร้างภาพแบนเนอร์ขนาดใหญ่เพียงภาพเดียว จากนั้นนำ URL ของแบนเนอร์ขนาดใหญ่ มาวางในโค้ดที่ตำแหน่งของแบนเนอร์ขนาดกลางและขนาดเล็กได้ แบนเนอร์จะแสดงผลในหน้าจอทุกขนาดเช่นกัน (หากใส่ URL ภาพแบนเนอร์ไม่ครบทั้ง 3 ตำแหน่ง ภาพแบนเนอร์กิจกรรมจะไม่แสดงผลที่หน้าเว็บไซต์จริงค่ะ)




VelaEasy Tips

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์พร้อมใช้ VelaEasy
แนะนำขนาดรูปภาพสำหรับใส่ในเว็บไซต์ VelaEasy
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
เทคนิคการจัดการเมนูด้านบนที่สวยและดี
จัดการข้อมูลเมนูด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
เทคนิคการสร้างลิงก์ไปยังตำแหน่งที่ต้องการ ด้วยเครื่องมือ Anchor
แนะนำวิธีหากลืมรหัสผ่านเข้าสู่หน้าแก้ไขเว็บไซต์สำเร็จรูป VelaEasy
วิธีติดตั้งโค้ดนับจำนวนผู้เข้าชมเว็บไซต์
การติดตั้ง Facebook Page Plugin (Like Box) ในระบบ VelaEasy
วิธีแสดงผล VDO ในเว็บไซต์ VelaEasy
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์ระบบ VelaEasy กับทาง Google
วิธีติดตั้งโค้ด Google Analytics ในระบบ VelaEasy
ติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงค์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก
วิธีการแก้ปัญหา hotmail ไม่ได้รับอีเมลแจ้งรหัสผ่าน article