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

tgdiscuz

จากเดิมกระทู้จะแสดงแบบแนวตั้งยาวลงมา ทำให้จัดไม่ได้ดั่งใจใช่ไหม ทีนี้เรามาปรับแต่ง เทมเพทโมดูล แสดงกระทู้แบบคู่ หรือ แนวขวางกันทำให้ การปรับแต่งหน้า 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 ตามจิตศรัทธาครับ

nkostaro

THANK ขอบคุณมากครับ +1 สำหรับบทความดีๆ

MasterTGZ

ขอบคุณครับ เยี่ยมครับ ^^