tgdiscuz โพสต์ 2011-10-7 16:34:34

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

แก้ไขครั้งสุดท้ายโดย tgdiscuz เมื่อ 2011-10-7 16:38

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

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


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


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


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

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


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




6.ทำการ copy โคสไปใส่ในช่องโคสโมดูล<div class="module cl ml">
<ul>

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

8.ในการปรับแต่งโคสแบบรูปภาพก็เหมือนกันแสดงแบบภาพแนวขวาง ไม่ได้แสดงแบบแนวตั้ง เพียงแต่เราใส่โคสนี้ไปตามตำแหน่งเดิม<div class="module cl xld">
<div class="module cl ml">
<ul>

<li style="width: 300px;">
<dl class="cl">        <div align=left>
        <dt><a href="{url}" title="{title}"{target}><b>{title}</a>...</b></dt>
<dd class="m"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}"></a></dd>
        <dd>{summary}</dd></div>
</dl>
</li>

</ul>
</div>
</div>9.กระทู้แสดงออกมาก็จะมีภาพประกอบกับเนื้อเรื่องและคำอธิบาย ในการปรับแต่งความกว้างของพื้นที่ให้เหมาะสมก็ปรับแต่งแบบขั้นตอนที่ 6 ตรง li style ใส่ความกว้างตรงค่า width: 300px ไปเท่านั้น แล้วทำการบันทึกชื่อเทมเพลทใหม่เสีย

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


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

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

nkostaro โพสต์ 2011-10-7 16:51:44

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

MasterTGZ โพสต์ 2011-10-7 16:52:31

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

sm949dz
หน้า: [1]
ดูในรูปแบบกติ: การปรับแต่งการแสดงกระทู้ให้แบบแนวขวาง