ธีมเพลท เพจเติมเงิน สำหรับปลั๊กอิน TMTopup

jomyuthack

#เครดิต ผู้เขียน/ผู้ออกแบบ
ชื่อธีมเพลท : C7 TMTopup v.1.0
รูปแบบโค๊ด : HTML5, CSS3, Twitter Bootstrap
รูปแบบการแสดงผล : Responsive Design (ตอบสนองต่ออุปกรณ์พกพา เช่น i-Pad, Tablet)
ออกแบบโดย : JOMYUTHACK @ Discuzthai.com
อีเมล : pradit_saenkaew@hotmail.com
วันที่ปล่อย : 14 - กรกฎาคม - 2556

#เกริ่นนำ
ปฏิเสธไม่ได้ว่ายุคนี้ สมัยนี้ พวกอุปกรณ์สื่อสารแบบเคลื่อนที่ หรือแบบพกกา นี้กำลังมาแรง จากเมื่อก่อนเล่นเน็ตก็ต้องเล่นผ่านเครื่องคอมพิวเตอร์ตั้งโต๊ะ หรือ ไม่ก็โน๊ตบุ๊ค แต่ทุกวันนี้เปลี่ยนไป อุปกรณ์สื่สารอย่างโทรศัพท์มือถือยุคใหม่ หรือที่เรียกว่า Smart Phone ก็เข้ามามีบทบาทมากขึ้นในการใช้งานระบบต่างๆ ผ่านอินเตอร์เน็ต นอกจากนี้ยังมี iPad, Tablet และด้วยเหตุผลดังกล่าวมานี้ หน้าเพจเติมเงินที่ผมออกแบบ/สร้าง ขึ้นมานี้จึงได้รองรับการแสดงผลบนอุปกรณ์สื่อสาร จากการออกแบบที่เรียกว่า Responsive Design ที่ผมบอกว่ารูปแบบการแสดงผลเป็นแบบ Responsive Design นี้ก็คือมันจะตอบสนองต่ออุปกรณ์พกพา เช่น i-Pad, Tablet โดยทดลอง ค่อยๆ ย่อหน้าบราวเซอร์ (ย่อความกว้าง) ดู มันจะค่อยๆ ปรับสเกลของมันจนถึงระดับหนึ่ง.


#ข้อตกลงในการนำไปใช้งาน
1.ผู้เขียน/ผู้ออกแบบ ไม่รับผิดชอบต่อความเสียหายใดๆ อันจะมีมาภายหลังจากการนำไปใช้.
2.อนุญาตให้ผู้ที่นำไปใช้งานสามารถ ลบ / แก้ไข แถบเครดิตผู้เขียน/ผู้ออกแบบ ได้.

#ไฟล์ธีมเพลทประกอบด้วย
1.โฟลเดอร์
1.1 โฟลเดอร์ css (เป็นโฟลเดอร์สำหรับเก็บไฟล์ css ทั้งหมด เพื่อนๆ คนไหน อยากปรับแต่งก็เข้าไปลองๆ แกะ-งม-ดำน้ำ ดูปะการัง เอ๊ย ดูโค๊ด กันได้)
1.2 โฟลเดอร์ img (โฟลเดอร์รูปภาพต่างๆ และภาพ glyphicons)
1.3 โฟลเดอร์ js  (เป็นโฟลเดอร์สำหรับไฟล์ js ทั้งหมด เพื่อนๆ คนไหน อยากปรับแต่งก็เข้าไปลองๆ แกะ-งม-ดำน้ำ ดูปะการัง เอ๊ย ดูโค๊ด กันได้)
2. ไฟล์ HTML
2.1.ไฟล์ welcome-page.html เป็นไเพจสำหรับกำหนดเงื่อนไขการใช้งาน (ปุ่ม "ไม่ยอมรับข้อตกลง" มีทั้งในไฟล์ welcome-page.html และในไฟล์ refill-page.html ให้เพื่อนๆ กำหนดให้ลิงค์ไปหน้าไหนก็ได้ แต่ผมแนะนำให้เรียกไปยังหน้า index ของ Discuz Board ซึ่งผมใส่ลิงค์ไว้เป็น #999 หากจะใส่ลิงค์ให้ใส่เป็น ตัวอย่าง http://www.google.com อย่าลืมใส่ http:// ด้วย, ส่วนปุ่ม "ยอมรับ" ผมกำหนดลิงค์ไปที่ไฟล์ refill-page.html (เพจเติมเงิน) หากเพื่อนๆ ต้องการใช้ธีมรูปแบบอื่น ธีมที่ 2 หรือ ที่ 3 ก็เข้าไปเปลี่ยนลิงค์เอง หรือเปลี่ยนชื่อไฟล์แทนก็ได้)
2.2.ไฟล์ refill-page.html เป็นเพจสำหรับกรอกข้อมูลบัตรเพื่อเติมเงิน
2.3.ไฟล์ refill-page-a1.html เป็นเพจสำหรับกรอกข้อมูลบัตรเพื่อเติมเงิน รูปแบบที่ 1 (รูปแบบที่ผมกำหนดเริ่มต้น)
2.4.ไฟล์ refill-page-a2.html เป็นเพจสำหรับกรอกข้อมูลบัตรเพื่อเติมเงิน รูปแบบที่ 2
2.5.ไฟล์ refill-page-a3.html เป็นเพจสำหรับกรอกข้อมูลบัตรเพื่อเติมเงิน รูปแบบที่ 3

#วิธีการนำไปใช้งาน
1.เข้าไปแก้ไข/เพิ่มเติม เงื่อนไขข้อตกลงการใช้งานที่ไฟล์ welcome-page.html เงื่อนไขข้อตกลงการใช้งาน มีทั้งในไฟล์ welcome-page.html และไฟล์ refill-page.html ด้วย อย่าลิมเข้าไปแก้ทั้ง 2 ไฟล์ด้วย (มีแท็กคอมเม้นต์ในโค๊ดอ่านง่าย)
2.เข้าไปแก้ไขหมายเลข uid ของ TMTopup ของเพื่อนๆ ในไฟล์ refill-page.html (สำคัญอย่าลืมแก้ ทั้ง 1.ในส่วนหัว และ 2.ในส่วนท้าย ของเพจ uid ตัวอย่างที่ผมใส่ไว้เป็น ?uid=9999)
3.อัพโหลดไฟล์ขึ้นเซิร์ฟเวอร์ (แนะนำสร้างไดเรคทอรี่ย่อยต่างหากใน Discuz Root)
3.นำไป DIY โดยใช้ 3.1 กล่อง iFrame (โดยเรียก iFrame มาที่ไฟล์ welcome-page.html หรือจะเรียกไปหน้า refill-page.html ซึ่งเป็นหน้าเติมเงินเลยก็ๆได้)
หรือ 3.2 จะเปิดไฟล์แกะ / คัดลอกเอาโค๊ดมาวางเพื่อ DIY ในกล่อง HTML Block ก็ได้ สุดแล้วแตจะเลือก

#เครดิตเพิ่มเติม :
Twitter Bootstrap : http://twitter.github.io/bootstrap/
Glyphicons http://glyphicons.com/

*** ผิดพลาดประการใด ผม JOMYUTHACK (จอมยุทธแฮกค์) @ Duscuzthai ข้อน้อมรับแต่เพียงผู้เดียว
***  แต่หากจะมีคำ ติ-ชม แนะนำ บ้าง ก็จะเป็นสิ่งที่ดียิ่ง สำหรับผม.

#ภาพตัวอย่าง

ภาพตัวอย่างขนาดจอปกติ

ภาพตัวอย่างขนาดจออุปกรณ์เคลื่อนที่ iPad, Tablet

#ดาวน์โหลดธีม


ลิงค์สำรอง (ก๊อปลิงค์ด้านล่างไปวาง)
http://ge.tt/62pzwhl/v/0?c


#ดาวน์โหลดภาพตัวอย่างทั้งหมด
http://ge.tt/1C2fwhl/v/0?c

jomyuthack

ที่ผมบอกว่ารูปแบบการแสดงผลเป็นแบบ Responsive Design (ตอบสนองต่ออุปกรณ์พกพา เช่น i-Pad, Tablet) ให้เพื่อนสมาชิกลอง ค่อยๆ ย่อหน้าบราวเซอร์ (ย่อความกว้าง) ดู มันจะค่อยๆ ปรับสเกลของมันจนถึงระดับหนึ่ง

notkii

มาอย่างสวย 5555

StaFF_PiRcH

ข้อสองโดนใจ ! กด Like + คะแนนไปเลย !!

pskclub

แล้วจะเอาไปใช้งานจริงยังไงอะครับ
เพราะอันนี้เป็นธีมแล้วสคริปหลักอะครับใช้อันไหน

jomyuthack

ใครที่จะเอาไปใช้งานให้เข้าไปโหลดเอาปลั๊กอิน TMTopup
ที่ http://www.discuzthai.com/thread-37480-1-1.html
แล้วมาติดตั้งเสร็จแล้วให้เข้าไป DIY เลือก iFrame หรือ HTML Block ก็สุดแล้วแต่จะเลือกครับ

Pet2Pro

ชอบๆๆๆ !!!

cyber2friends

ผมคิดว่าตัวอักษรบางส่วนใหญ่ไปนะครับ
แต่โดยรวม สวยครับ +1

[E]x[P]

สวยดี แต่ผมไม่ได้ใช่ฮาาๆๆๆ

[E]x[P]

คงไม่ละครับโดน TMTOP ระงับหลายรอบละเงินก็เอาออกมาไม่ได้ ฮาๆๆ