ยินดีต้อนรับสู่ Joomla-Webmaster blogspot

วันอาทิตย์ที่ 24 พฤษภาคม พ.ศ. 2552

วิธีใส่โค้ด Iframe ในโมดูลของ Joomla

วิธีใส่โค้ด Iframe ในโมดูลของ Joomla


บางครั้งหากเราต้องการจะใส่โค้ด HTML ที่เป็น Iframeในโมดูลของ Joomla แต่สิ่งที่พบ คือ Joomla มักจะลบโค้ดของเราออกเสมอ เช่น ตัวอย่างโค้ดนี้...

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>


ปกติน่าจะแสดงแบบนี้:


แต่ Joomla! ถ้าเราใส่โค้ดนี้ในโมดูลโดยตรงเลย: (ตามรูปด้านล่าง)

Insert Iframe code in Joomla module-01


พอเราคลิกปุ่ม update ปุ๊บ เกิดอะไรขึ้นหว่า!! เอ...โค้ดหายไปไหนเนี่ย!!! ไม่มีอะไรเกิดขึ้นเลย แถมโค้ดยังถูกลบไปอีกด้วย

Insert Iframe code in Joomla module-02


ไม่ต้องตกใจครับ จริงๆแล้วอันนี้ไม่ใช่ปัญหาหรอกครับ ปกติแล้ว WYSIWYG Editor ใน Joomla มักจะลบโค้ดบางประเภททิ้งเพื่อความปลอดภัยของระบบน่ะครับ(หากใครอยากรู้รายละเอียดว่าโค้ดไหนอะไรยังไงบ้าง ลองอ่านที่นี่กันดูครับ Joomla Filtering Options)

แล้วตกลงเราสามารถใส่โค้ดที่เป็น Iframe ในโมดูลได้หรือเปล่าเนี่ย?

ได้แน่นอนครับ ลองมาดูกันครับ ว่าทำอย่างไร



การจะใส่โค้ด iframe ในโมดูลนั้น ตอนจะสร้างโมดูลใหม่ เราต้องเลือกเป็น wrapper ครับ ไม่ใช่ custom HTML

- ไปที่หน้า Admin => Extensions=>Modules Manager=>คลิกที่ New แล้วเลือก Wrapper

Insert Iframe code in Joomla module-03


- ลองดู Parameters ต่างๆ ตามรูปครับ:
Insert Iframe code in Joomla module-04


- ถ้าใครไม่รู้ว่าต้องใส่อะไรบ้าง ลองไปดูโค้ด iframe ที่คุณต้องการนำมาใส่ครับ:
<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>


- ทีนี้ก็กรอกเลย
Insert Iframe code in Joomla module-05


  • Module Class Suffix -ปล่อยว่างไว้ก็ได้ (ถ้าใครต้องการอ่านเพิ่ิมเติมเกี่ยวกับmodule class suffix ก็คลิกที่นี่เลย)

  • URL - แล้วแต่โค้ดiframeของคุณนะครับ

  • Scroll Bars - แล้วแต่โค้ดiframeของคุณนะครับ

  • Width - แล้วแต่โค้ดiframeของคุณนะครับ

  • Height - แล้วแต่โค้ดiframeของคุณนะครับ

  • Auto Height - เลือก Yes หรือ No ตรงนี้ไม่มีผล

  • Auto Add - เลือก Yes

  • Target Name - ชื่อของ Iframe - (เอาไว้สำหรับทำลิงก์ให้เปิดในหน้าต่างiframe ครับ ใครอยากรู้ว่า คือ อะไร ก็ลองดูที่นี่ ตัวอย่างการใช้ iframe name)


- หลังจากกรอกค่า parameters ต่่างๆ แล้วก็เซพ แล้ว Publish เลยครับ

- กลับมาดูที่หน้าเว็บเราจะเห็นโมดูล iframe ที่ต้องการแล้ว :)

Insert Iframe code in Joomla module-06






เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...


วันอาทิตย์ที่ 3 พฤษภาคม พ.ศ. 2552

กา่รทำไฟฟ้าด้วย Adobe Photoshop

กา่รทำไฟฟ้าด้วย Adobe Photoshop


เมื่อราวๆ เดือนก่อน ผมได้มีโอกาสออกแบบโปสเตอร์งานแข่งขันโอเทลโล่ชิงแชมป์ประเทศไทย ประจำปี 2552 ซึ่งทำด้วย Adobe Photoshop ครับ


Sosuco Thailand Othello Championship2009 Poster


หลายๆ คนน่าจะชอบนะครับ แต่ก็คงมีหลายคนอยากรู้ว่าทำไฟฟ้าแบบในโปสเตอร์ด้วย Photoshop นี่มันทำยังไงกันครับ ลองมาดูวิธีทำกันเลย...

ขั้นตอนที่ 1: สร้างไฟล์ใหม่ (ขนาดไหนก็ได้ครับ)ด้วย Adobe Photoshop จากนั้น กดปุ่ม 'D' ที่คีย์บอร์ด เพื่อรีเซตสี foreground และ background ใหม่(ให้เป็นดำกับขาว ตามรูป)
How to Do Electric Effect by Photoshop 01


ขั้นตอนที่ 2: เลือก=> Filterแล้วก็เลือกRender=>Clouds 1 ครั้งครับ

How to Do Electric Effect by Photoshop 02


ถ้าทำถูกต้องจะได้ผลตามรูปด้านล่าง:

How to Do Electric Effect by Photoshop 03


ขั้นตอนที่ 3: ให้เลือก=> Filter แล้วเลือก Renderคลิกที่Difference Cloudsครับ

How to Do Electric Effect by Photoshop 04


จะได้ตามรูป:

How to Do Electric Effect by Photoshop 05


ขั้นตอนที่ 4: กดปุ่ม CTRL+I (ไอ) เพื่อกลับสี (Invert)

จะได้ตามรูป:

How to Do Electric Effect by Photoshop 06


ขั้นตอนที่ 5: กดปุ่ม CTRL+L(แอล) จากนั้นให้เลื่อนลูกศรตัวกลางไปทางขวาครับ

How to Do Electric Effect by Photoshop 07


ขั้นตอนที่ 6: ตอนนี้ก็ใกล้จะเสร็จแล้วนะครับ ให้ปรับสีเอาตามชอบใจเลย โดยกดปุ่มCTRL+U (ติ๊กที่ Colorize ด้วย) ก็ปรับสีจนกว่าจะได้ตามชอบนะครับ (ผมขอสีน้ำเงินละกัน)

How to Do Electric Effect by Photoshop 08


ขั้นตอนที่ 7: หลังจากปรับสีจนชอบใจแล้ว ก็เซพครับ แนะนำให้เซพเป็นไฟล์ PSD นะครับ ตอนนี้เราก็ได้Effect เป็นไฟฟ้าตามต้องการแล้ว

ขั้นตอนที่ 8: คราวนี้พอจะนำไปใช้ครับ...
  • เปิดไฟล์ไฟฟ้าที่เราทำก่อน

  • ลบสีดำทิ้งครับ(สามารถทำได้โดยเลือก Select=> Color Range... =>ให้คลิกที่สีดำ แล้วก็กดปุ่ม Delete ที่คีย์บอร์ด)

  • ที่เลเยอร์ไฟฟ้าของเรา ตรง Blending Mode: ใ้ห้ปรับเป็น Screen ครับ

  • จากนั้นก็พร้อมใช้งานแล้ว เปิดไฟล์รูปที่อยากใส่ไฟฟ้า แล้วลากเอาเลเยอร์ไฟฟ้าไปไว้ด้านบนเลเยอร์รูปที่ต้องการนะครับ :)

  • ปรับแต่งตามชอบใจ
  • เสร็จแล้วครับ



How to Do Electric Effect by Photoshop 09





เว็บมาสเตอร์เว็บไซต์ไทยโอเทลโล่

อ่านต่อ...


 
Copyright © 2008-2015 joomla-webmaster.blogspot.com - All rights reserved