แทรกภาพส่วนหัวแทนการระบายสีเมนูโมดูลในjoomla3x position7

แทรกภาพแทนการระบายสีส่วนหัวของโมดูล joomla  สามารถใช้ภาพแทนได้คล้ายๆกับการใช้ code สีระบายส่วนหัวของโมดูล ซึ่งช่วยเพิ่มความสวยงานบนหน้าเว็บ และมีวิธีการแทรกภาพง่ายๆดังนี

แก้ไขไฟล์เว็บไชต์ ด้วย โปรแกรม FTP ได้อธิบายในบทความครั้งก่อน
1.เตรียมภาพ ขนาด 300x60 แนะนำ ให้ใช้ภาพ logo ในjoomla ซึ่งมีอยู่ก่อนแล้ว มาทดสอบกัน

2.แทรก code เรียกภาพ ซึ่งผู้เขียน กำหนดการแทรก ในตำแหน่ง ของเทมเพลต Photostra 7230: background:url("../images/logo.png") repeat scroll 0 0 #766F41; โดยมี code สี เพิ่มนิดหน่อย เพิ่มความส่วยเด่นของโมดูล คัดลอก Code แล้ววางในตำแหน่งนี้ได้เลย

ตรวจสอบ การแสดงผล หน้าเว็บไชต์ของเรา โดยอาจเปลี่ยน เบราว์เซอร์ Google Chrome,Firefox ช่วยสลับการแสดงผล 

หน้าตาเมนูโมดูล joomla3x จะออกมาประมาณนี้ ส่วนภาพใต้ข้อความ สามารถเปลี่ยนได้ตามความต้องการ แต่ควรอยู๋ในโฟล์เดอร์เดียวกันเท่านั้น 

ระบายสีพื้นหลังเปลี่ยนสีข้อความเมนูโมดูลPosition7 Joomla3x

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

ที่มาภาพhttp://www.seesketch.com

โมดูลเมนู สำหรับ เทมเพลต  Protostar joomla3x หรือ  joomla4 คงไม่แตกต่างกันเท่าไรนัก สามารถอัพเกรตได้ตามความต้องการ หน้าตาเว็บไชต์ อยู่สภาพเดิมเมื่อแก้ไข Css โมดูลเมนูส่วนนี้ไปแล้ว ข้อมูลต่างๆ ไม่หายไปไหนแน่นอน!

ไฟล์เว็บไชต์ Joomla3x หลักที่ๆแก้ไขในส่วนนี้ คือ template.css: ผู้เขียนจะแยกส่วนของ การแก้ไข css ให้เข้าใจอย่างแจ่มแจ้ง!

บทความสอนวิธีการ แก้ไข ส่วนหัวโมดูลเมนู : ระบายสีส่วนหัวโมดูล: แก้ไข สีข้อความในโมดูลหรือไตเติลเมนู โดยมีขั้นตอนดังนี้

แก้ไขไฟล์เว็บไชต์ Joomla ด้วย FTP
/domains/ชื่อโดเมน/public_html/templates/protostar/css/template.css

ระบายสีพื้นหลัง ใต้ข้อความ เมนูโมดูลส่วนหัว Position7
แทรก code: บรรทัด 7227:background-color:#990000; คลิก>ปุ่มบันทึกปิด แล้วดูผลที่หน้าเว็บไชต์ของเรา อาจกด F5 สักหนึ่งครั้ง เพื่อดูการเปลี่ยนแปลง

เปลี่ยนสีข้อความ ไตเติลเมนูโมดูล Position7

แทรก code ในบรรทัดถัดไป color: #ffffff !important; ผู้เขียนกำหนด code นี้ให้เป็นสีขาวของข้อความไตเติลเมนูเท่านั้น โดยแทรก code !important; เพื่อให้ ข้อความของบทความทั้งหมดเป็นสีเดิม

เปลี่ยนสีพื้นหลังทั้งหมด ของโมดุล Position7 

ตำแหน่ง code เทมเพลต 2173:background-color: #ffffff; แก้ไข codeสี #ffffff; ตามความต้องการ ผู้เขียนทดสอบให้เป็น สีดำ #000000; 

ทดลองทำดูนะครับ สำหรับบทความ แก้ไข โมดูล joomla3x Position7 กับเทมเพลต Protostar แต่ก่อนการทดลองดังกล่าว สำรองไว้ด้วยครับ กันเหนียวๆ

ตั้งค่า FTPเชื่อมต่อ Dreamweaver เพื่อแก้ไขไฟล์เว็บไชต์ joomla บน Seaver

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

การแก้ไขไฟล์เว็บไชต์ด้วย FTP โดยทั่วไปจะดาวน์โหลดไฟล์เว็บไชต์บน Seaver Hosting ลงมาแก้ไขในเครื่องคอมของเรา แล้วทำการอัพโหลดขึ้นไปทับไฟล์เดิมบน Hosting ก็จะเสร็จการแก้ไข สำหรับเริ่มต้น ตามหลักการพื้นฐาน

การแก้ไขไฟล์เว็บไชต์ อีกหนึ่งวิธีการ คือ แก้ไข ตัว FTP โดยกำหนดการตั้งค่า เชื่อมต่อ โดยตรงกับ โปรแกรม Dreamweaver ในเครื่องคอมของเรา เพื่อความสะดวกรวดเร็ว แก้ไขไฟล์เว็บ เขียน code เพิ่ม ลบ codeฯลฯ จากนั้นบันทึกเสร็จทันที เป็นการลดขั้นตอน การทำงาน

บทความสอนวิธีการ ตั้งค่า FTP เชื่อมต่อ โปรแกรม Dreamweaver ในเครื่อง pc ของเราเอง โดยมีลำดับง่ายๆดังนี้

1.คลิก> ไอคอล FTP ขึ้นมาตามภาพ คลิก เมนููแก้ไข คลิกแท็บเมนู การตั้งค่า 

2.คลิก> เลื่อนช่อง เมนู Select Page คลิก> เมนู File Editing ตั้งค่าตัวแก้ไขเริ่มต้น เรียงลำดับตามภาพ

3.คลิก >ปุ่ม Ask For action แล้วค้นหา โปรแกรม Dreamweaver ในเครื่องของเรา

4.คลิก> ปุ่ม open
5.คลิก>ปุ่ม ตกลง

6.เชื่อมต่อ FTP เว็บไชต์ของเรา เข้าสู่ Seaver ตามปกติ คลิก>>ไฟล์เว็บไชต์ คลิกขวา้มาท์> เลือกแท็ปเมนูคำสั่ง คลิก> View/Edite ระบบ FTP จะเรียกโปรแกรม Dreamweaver ขึ้นมาใช้งานอัตโนมัติ

เริ่มต้นทดสอบ การใช้งาน FTP เพื่อแก้ไขไฟล์เว็บไชต์ joomla บน Seaver 
7.ก่อนการแก้ไขไฟล์เว็บไชต์ทุกครั้ง ควรสำรองไฟล์เว็บ ลงเครื่องคอมเของเราก่อน กันพลาด จากนั้นทดลองแก้ code เป็นตัวอย่าง คลิก>เมนู File คลิก>เท็ปเมนู Save เพื่อบันทึก 

8.ระบบ  FTP จะส่งการแจ้งเตือน คลิก>ใช่ เป็นอันเสร็จ!

แก้ไขใส่ Codeโฆษณา Ad unit AdsenseในJoomla3xไม่แสดงผล

ป้ายโฆษณาแบบ Code JavaScript หรือ หน่วยโฆษณา Ad unit ผู้ให้บริการโฆษณาเครือข่ายออนไลน์ ดีทีสุดระดับโลก คือ Google Adsense มีผู้มาลงโฆษณาหลั่งไหลใช้บริการจำนวนมาก กับ google adwords หรือ ผู้รับจ้างสร้างป้ายโฆษณาออนไลน์ บนหน้าเว็บไชต์ แบบ  Code JavaScriptหรือ หน่วยโฆษณา Ad unit Adsense

Joomla3x กำลังไป Joomla เบอร์4 แต่ปัจจุบัน อัพเดตล่าสุด Joomla3.8 เวอร์ชั่น PHP 7.2 แต่ยังรองรับ Joomla3.7.5 เวอร์ชั่น PHP 7.1 เพื่อเตรียมความพร้อม 

ตัวอย่าง การสร้าง Code JavaScript-Adsense มีสองแบบคือ อะซิงโครนัส และ ซิงโครนัส แล้วคัดลอก Code ทั้งหมดที่ได้ แทรกในตำแหน่งโมดูลที่เปิดรอไว้ เทมเพลต ของ Joomla! ของเรา

การนำ Code Ad unit Adsense ทุกขนาด แทรกในเทมเพลต Joomla! ทำได้หลายวิธี วิธีแรก คือ ใช้ module Plugin Ads แบบต่างๆ ส่วนเสริม Joomla แจกให้โหลดฟรี ไม่หมดอายุแทรกในตำแหน่งโมดูลเทมเพลตที่ถูกกำหนดให้เท่านั้น  แบบที่สอง คือ ฝัง Code ใน เทมเพลต ใน Joomla ที่ใช้อยู่ซึ่งเป็นเรืองยาก แต่ข้อดี เรียบกลมกลืมกับเว็บไชต์และก็ชอบมากด้วย แบบสุดท้าย คือ ใช้  Editer Joomla!  เครื่องมือเขียนบทความ ที่มีอยู่ก่อนแล้ว ข้อนี้นิยมทำกัน

อัพเกรต Joomla ให้ใหม่ล่าสุด หรือ Joomla 3x แจ้งเตือน หน้าจอแบบนี้  Plugin -TinyMce กำหนดค่าใหม่ สามารถ แทรก Code Adsense ได้100 เปอร์เซนต์

Joomla3x มีระบบป้องกันการแทรก Script ในชุดเครื่องมือ Editer เขียนบทความ โดย กำหนด Script ป้องกันที่ ตัวPlugin - TinyMce เพื่อป้องกันการแทรก Script แปลกปลอม ป้องกันการเจาะระบบ เป็นอีกหนึ่งแนวทางการป้องกัน

แทรก Codeโฆษณา Ad unit AdsenseในJoomla3x ด้วย  Plugin Editer TinyMce ด้วยการ ลบ Script บางตัวออก ให้เหลือตัวเดียว เช่น applet เพื่อเปิดการใช้งาน JavaScript