Discuz Thai

 ลืมรหัสผ่าน
 สมัครสมาชิก

ข้อตกลงการใช้งานกระดานข่าวดิสคัสไทย DiscuzThai Agreement (English Version) ประกาศดิสคัสไทย - ทำเนียบดิสคัสภาษาไทย

Discuz! X3.5 Thai R20231001 Rev.8 (NEW) [วิดีโอช่วยสอน] อัปเกรด Discuz! X3.4 เป็น X3.5 Discord ของ Discuz! Thai Community อย่างเป็นทางการ

Discuz! X3.4 Thai R20220811 (REV.75) สิ้นสุดการสนับสนุน Discuz! X3.4 ภาษาไทยตั้งแต่วันนี้เป็นต้นไป (ขอแนะนำให้อัปเกรดเป็น X3.5 แทน)

ค้นหา
แท็กยอดนิยม: ดิสคัสภาษาไทย Discuz Thai
ดู: 5555|ตอบกลับ: 2

[X1.5] การปรับแต่งการแสดงกระทู้ให้แบบแนวขวาง

[คัดลอกลิงก์]
tgdiscuz โพสต์ 2011-10-7 16:34:34 |โหมดอ่าน
แก้ไขครั้งสุดท้ายโดย tgdiscuz เมื่อ 2011-10-7 16:38

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

รูปแบบที่แสดงแบบแนวขวาง


1.ทำการเลือกเฟรมที่ต้องการ


2.ทำการเข้า DIY จากนั้นใช้โมดูลแบบ โมดูล ---> กระทู้ ---> กระทู้ล่าสุด


3.จากนั้นทำการลากวางลงในเฟรมที่เราตั้งใว้ และเลือกรูปแบบ

4.แล้วเลือกรูปแบบเทมเพท


5.จากนั้นไปที่แถบ เทมเพลทโมดูล




6.ทำการ copy โคสไปใส่ในช่องโคสโมดูล
  1. <div class="module cl ml">
  2. <ul>
  3. [loop]
  4. <li style="width: 280px;">
  5. <dl class="cl">
  6. <div align=left><img src=img2011/li.png align=left><a href="{url}" title="{title}"{target}>{title}</a>... ({views})
  7. </div></dl></li>[/loop]
  8. </ul>
  9. </div>
คัดลอกไปที่คลิปบอร์ด
หมายเหตุ
ในการปรับแต่งค่า li style จะเป็นความกว้างของพื้นที่ตัวอักษรสามารถปรับแต่งได้ตามความเหมาะสม
  1. <li style="width: 280px;">
คัดลอกไปที่คลิปบอร์ด
และโคสรูปภาพไอค่อนด้านหน้าอันนี้กำหนดเองได้
  1. <img src=img2011/li.png align=left>
คัดลอกไปที่คลิปบอร์ด
7.จากนั้นทำการบันทึกชื่อเทมเพลทใหม่เสียแล้วทำการกดปุ่ม "อับเดท" เท่านี้กระทู้ก็จะเรียงแนวขวางทำให้ประหยัดพื้นที่แสดงกระทู้และปรับแต่งได้ดั่งใจ

8.ในการปรับแต่งโคสแบบรูปภาพก็เหมือนกันแสดงแบบภาพแนวขวาง ไม่ได้แสดงแบบแนวตั้ง เพียงแต่เราใส่โคสนี้ไปตามตำแหน่งเดิม
  1. <div class="module cl xld">
  2. <div class="module cl ml">
  3. <ul>
  4. [loop]
  5. <li style="width: 300px;">
  6. <dl class="cl">        <div align=left>
  7.         <dt><a href="{url}" title="{title}"{target}><b>{title}</a>...</b></dt>
  8. <dd class="m"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}"></a></dd>
  9.         <dd>{summary}</dd></div>
  10. </dl>
  11. </li>
  12. [/loop]
  13. </ul>
  14. </div>
  15. </div>
คัดลอกไปที่คลิปบอร์ด
9.กระทู้แสดงออกมาก็จะมีภาพประกอบกับเนื้อเรื่องและคำอธิบาย ในการปรับแต่งความกว้างของพื้นที่ให้เหมาะสมก็ปรับแต่งแบบขั้นตอนที่ 6 ตรง li style ใส่ความกว้างตรงค่า width: 300px ไปเท่านั้น แล้วทำการบันทึกชื่อเทมเพลทใหม่เสีย

ตัวอย่างการแสดงกระทู้แบบภาพประกอบเนื้อเรื่องและคำอธิบาย แบบแนวขวาง


ขอปัญญาเกิดแด่ท่าน
by thaigraph.com

ปล.ถ้าบทความนี้มีประโยชน์ต่อท่าน โปรดแสดงน้ำใจให้คะแนน และ money ตามจิตศรัทธาครับ

ขออภัย! โพสต์นี้มีไฟล์แนบหรือรูปภาพที่ไม่ได้รับอนุญาตให้คุณเข้าถึง

คุณจำเป็นต้อง ลงชื่อเข้าใช้ เพื่อดาวน์โหลดหรือดูไฟล์แนบนี้ คุณยังไม่มีบัญชีใช่ไหม? สมัครสมาชิก

x

คะแนน

จำนวนผู้เข้าร่วม 3จิตพิศัย +3 ย่อ เหตุผล
GoSai + 1 เนื้อหาดีมีสาระ.
ZeroBlack + 1
nkostaro + 1

ดูบันทึกคะแนน

nkostaro โพสต์ 2011-10-7 16:51:44
THANK ขอบคุณมากครับ +1 สำหรับบทความดีๆ
MasterTGZ โพสต์ 2011-10-7 16:52:31
ขอบคุณครับ เยี่ยมครับ ^^

ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

รายละเอียดเครดิต

รายชื่อผู้กระทำผิด|Archiver|ดิสคัส ไทย Follow us: Become a fan on facebook. Follow us on Twitter.

GMT+7, 2024-3-28 20:48

Powered by Discuz! X3.4, Rev.66

Copyright © 2001-2021 Tencent Cloud. Licensed

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้