indexheats สำหรับ Discuz 7.0 (ตัวอย่างการใช้ JS Wizard)
แก้ไขล่าสุด Special_kak เมื่อ 2009-10-2 12:15http://www.i7forums.com/attachments/month_0910/091002115700d95d35c4b5ae5b.gif
SEO Support SEO Support SEO :)
ตัวอย่างดูที่ http://www.i7forums.com/ ระบบนี้ไปดัดแปลงมาจาก indexheats ของ 7.1 ตัวนี้ผมแอบใช้มาเกือบเดือนแล้ว(ไม่มีแจกใน Discuz.net) แล้วถ้าจะให้อธิบายการสร้าง JS Wizard ตั้งแต่เริ่มแรกคงไม่ไหวนะครับ ดังนั้นผมเลยส่งออกเป็นไฟล์มาให้เลย พี่น้องก็แค่นำไป Import เท่านั้นเองนะครับ
ดาวน์โหลดไฟล์ JS Wizard ก่อนครับ
วิธี Import
http://www.i7forums.com/attachments/month_0910/091002114331bad807333e8128.gif
เมื่อเสร็จแล้วจะได้แบบนี้ครับ
http://www.i7forums.com/attachments/month_0910/09100211437008513efaa65517.gif
JS Wizard ที่จำเป็นต้องใช้มีทั้งหมด 5 ตัวครับ
- แสดงกระทู้ล่าสุด 10 กระทู้
- แสดงกระทู้และลายละเอียดกระทู้ 1 กระทู้
- แสดงกระทู้ 2 กระทู้ และลายละเอียด
- แสดงรูปภาพ
- แสดงกระทู้ฮอต 1 กระทู้
ตามรูป
http://www.i7forums.com/attachments/month_0910/0910021157ffcbb951d87442b1.gif
การสร้าง Style CSS เปิดไฟล์ css_append.htm ที่อยู่ในสกินของคุณ (/templates/default/css_append.htm)
เพิ่มโค้ดนี้ด้านล่าง#hot2{margin:5px 0 10px;padding:2px 5px;line-height:30px;border:solid {INPUTBORDER};border-width:1px 0;background:{COMMONBG};}
#hot2 dl{overflow:hidden;}
#hot2 dt{float:left;width:5em;background:url({IMGDIR}/hot.gif) no-repeat 0 50%;text-indent:2em;font-weight:700;}
#hot2 dd{margin-left:30px;}
#hot2 li{padding-left:10px;white-space:nowrap;}
#hot2 em{margin-left:5px;color:#666;font-size:0.83em;}
#hot2body{height:30px;overflow:hidden;padding-right:16px;}
#hot{margin-bottom:20px;}
#hot h3{margin-bottom:10px;font-size:14px;color:#999;}
#hot .desc{color:#666;}
#hot .desc a{color:{HIGHLIGHTLINK};}
#hot .cite,
#hot cite,
#hot cite a{color:#999;}
#hot dt,
#hot li{background:url({STYLEIMGDIR}/dot_c.gif) no-repeat 0 50%;position:relative;}
#hot_img{float:left;padding-right:14px;width:200px;border-right:1px dashed {COMMONBORDER}; }
#hot_img img{margin-bottom:0em;padding:2px;width:200px;height:150px;border:1px solid {COMMONBORDER};}
#hot_img h2{position:relative;}
#hot_img .desc{padding:5px 0;}
.img #hot_main{float:right;margin-left:-230px;width:100%;}
.img dl,.img ul{margin-left:230px;}
#hot dt strong{margin-right:1em;}
#hot dl{border-top:1px dashed {COMMONBORDER};}
#hot dt,#hot dd{padding-left:10px;}
#hot dt{padding-top:8px;background-position:0 15px;}
#hot dd{padding-bottom:8px;border-bottom:1px dashed {COMMONBORDER};color:#666;}
#hot ul{padding:8px 0;border-bottom:1px dashed {COMMONBORDER};}
#hot li{float:left;width:49.5%;line-height:22px;height:22px;text-indent:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#hot .deloption{position:absolute;right:0;margin:0;border:3px solid {COMMONBORDER};background-color:{COMMONBORDER};}สร้างไฟล์ indexheats.htm ใส่โค้ดนี้เข้าไป<div id="hot2">
<dl>
<dt>Hot:</dt>
<dd>
<div id="hot2body"><ul id="hot2body"><li>{eval request('seo_hot_ann_xE5');}</li></ul></div>
</dd>
</dl>
</div>
<div id="hot" class="s_clear img">
<h3></h3>
<div id="hot_main">
<dl>{eval request('seo_hot2_8D0');}</dl>
<ul class="s_clear">{eval request('seo_hot10_FX9');}</li></ul>
</div>
<div id="hot_img">
{eval request('seo_hotpic_Q5y');}
{eval request('seo_hot1_lrq');}
</div>
</div>หรือดาวน์โหลดที่นี่
อัพโหลดไปวางที่ /templates/default/
และอัพโหลดรูปนี้ไปวางที่ images สกินคุณ เช่น templates/discuz_nt/images/dot_c.gif
http://www.i7forums.com/templates/discuz_nt/images/dot_c.gif
และรูปนี้
http://www.i7forums.com/images/default/hot.gif
เอาไปวางที่ /images/default/hot.gif
อธิบายโค้ดเพิ่มเติมนะครับ
ผมไม่ขอใช้แบบนี้นะครับ<script type="text/javascript" src="http://localhost/dz/api/javascript.php?key=seo_hot10_FX9"></script>แต่ผมจะใช้แบบนี้แทน เพราะแบบนี้จะรองรับ SEO{eval request('seo_hot10_FX9');}แสดงกระทู้ล่าสุด 10 กระทู้{eval request('seo_hot1_lrq');}แสดงกระทู้และลายละเอียดกระทู้ 1 กระทู้{eval request('seo_hot2_8D0');}แสดงกระทู้ 2 กระทู้ และลายละเอียด{eval request('seo_hot_ann_xE5');}แสดงกระทู้ฮอต 1 กระทู้{eval request('seo_hotpic_Q5y');}แสดงรูปภาพ
ขึ้นตอนการเรียกไฟล์ indexheats.htm มาแสดงที่หน้าแรก
เปิดไฟล์ /templates/default/discuz.htm
หา<!--{if !empty($insenz['vfstatus']) && $insenz['vfpos'] == 'first'}--><script type="text/javascript" src="campaign.php?action=list"></script><!--{/if}-->วางโค้ดนี้ด้านบนครับ{subtemplate indexheats}เพิ่มเติมอีกนิดสำหรับการปรับแต่ง JS Wizard
ค่าเริ่มต้นนั้นผมตั้งไว้ที่ All of the open section นั่นคือเรียกทุกกระดานข่าวมาแสดง ส่วนสามารถเลือกปรับแต่งของแต่ละตัวได้ที่ เครื่องมือ » javascript ตัวอย่างดังรูป
http://www.i7forums.com/attachments/month_0910/0910021157173cfb586161119f.gif ขอบคุณจ้าาาา ขอบคุณครับๆ ขอบคุณมากครับ รูปเสียอะครับ ไม่เป็นหน้าิวิธี Import thank มากๆเลยขอรับ
หน้า:
[1]