indexheats สำหรับ Discuz 7.0 (ตัวอย่างการใช้ JS Wizard)

Special_kak

SEO Support SEO Support SEO :)

ตัวอย่างดูที่ http://www.i7forums.com/ ระบบนี้ไปดัดแปลงมาจาก indexheats ของ 7.1 ตัวนี้ผมแอบใช้มาเกือบเดือนแล้ว(ไม่มีแจกใน Discuz.net) แล้วถ้าจะให้อธิบายการสร้าง JS Wizard ตั้งแต่เริ่มแรกคงไม่ไหวนะครับ ดังนั้นผมเลยส่งออกเป็นไฟล์มาให้เลย พี่น้องก็แค่นำไป Import เท่านั้นเองนะครับ

ดาวน์โหลดไฟล์ JS Wizard ก่อนครับ


วิธี Import


เมื่อเสร็จแล้วจะได้แบบนี้ครับ


JS Wizard ที่จำเป็นต้องใช้มีทั้งหมด 5 ตัวครับ
- แสดงกระทู้ล่าสุด 10 กระทู้
- แสดงกระทู้และลายละเอียดกระทู้ 1 กระทู้
- แสดงกระทู้ 2 กระทู้ และลายละเอียด
- แสดงรูปภาพ
- แสดงกระทู้ฮอต 1 กระทู้
ตามรูป


การสร้าง Style CSS เปิดไฟล์ css_append.htm ที่อยู่ในสกินของคุณ (/templates/default/css_append.htm)
เพิ่มโค้ดนี้ด้านล่าง

1. #hot2{margin:5px 0 10px;padding:2px 5px;line-height:30px;border:solid {INPUTBORDER};border-width:1px 0;background:{COMMONBG};}
   
2. #hot2 dl{overflow:hidden;}
   
3. #hot2 dt{float:left;width:5em;background:url({IMGDIR}/hot.gif) no-repeat 0 50%;text-indent:2em;font-weight:700;}
   
4. #hot2 dd{margin-left:30px;}
   
5. #hot2 li{padding-left:10px;white-space:nowrap;}
   
6. #hot2 em{margin-left:5px;color:#666;font-size:0.83em;}
   
7. #hot2body{height:30px;overflow:hidden;padding-right:16px;}
   
8. 
   
9. #hot{margin-bottom:20px;}
   
10. #hot h3{margin-bottom:10px;font-size:14px;color:#999;}
    
11. #hot .desc{color:#666;}
    
12. #hot .desc a{color:{HIGHLIGHTLINK};}
    
13. #hot .cite,
    
14. #hot cite,
    
15. #hot cite a{color:#999;}
    
16. #hot dt,
    
17. #hot li{background:url({STYLEIMGDIR}/dot_c.gif) no-repeat 0 50%;position:relative;}
    
18. #hot_img{float:left;padding-right:14px;width:200px;border-right:1px dashed {COMMONBORDER}; }
    
19. #hot_img img{margin-bottom:0em;padding:2px;width:200px;height:150px;border:1px solid {COMMONBORDER};}
    
20. #hot_img h2{position:relative;}
    
21. #hot_img .desc{padding:5px 0;}
    
22. .img #hot_main{float:right;margin-left:-230px;width:100%;}
    
23. .img dl,.img ul{margin-left:230px;}
    
24. #hot dt strong{margin-right:1em;}
    
25. #hot dl{border-top:1px dashed {COMMONBORDER};}
    
26. #hot dt,#hot dd{padding-left:10px;}
    
27. #hot dt{padding-top:8px;background-position:0 15px;}
    
28. #hot dd{padding-bottom:8px;border-bottom:1px dashed {COMMONBORDER};color:#666;}
    
29. #hot ul{padding:8px 0;border-bottom:1px dashed {COMMONBORDER};}
    
30. #hot li{float:left;width:49.5%;line-height:22px;height:22px;text-indent:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    
31. #hot .deloption{position:absolute;right:0;margin:0;border:3px solid {COMMONBORDER};background-color:{COMMONBORDER};}

คัดลอกไปที่คลิปบอร์ด

สร้างไฟล์ indexheats.htm ใส่โค้ดนี้เข้าไป

1. <div id="hot2">
   
2. <dl>
   
3. <dt>Hot:</dt>
   
4. <dd>
   
5. <div id="hot2body"><ul id="hot2body"><li>{eval request('seo_hot_ann_xE5');}</li></ul></div>
   
6. </dd>
   
7. </dl>
   
8. </div>
   
9. <div id="hot" class="s_clear img">
   
10. <h3></h3>
    
11. <div id="hot_main">
    
12. <dl>{eval request('seo_hot2_8D0');}</dl>
    
13. <ul class="s_clear">{eval request('seo_hot10_FX9');}</li></ul>
    
14. </div>
    
15. 
    
16. <div id="hot_img">
    
17. {eval request('seo_hotpic_Q5y');}
    
18. {eval request('seo_hot1_lrq');}
    
19. </div>
    
20. </div>

คัดลอกไปที่คลิปบอร์ด

หรือดาวน์โหลดที่นี่

อัพโหลดไปวางที่ /templates/default/
และอัพโหลดรูปนี้ไปวางที่ images สกินคุณ เช่น templates/discuz_nt/images/dot_c.gif

และรูปนี้

เอาไปวางที่ /images/default/hot.gif
อธิบายโค้ดเพิ่มเติมนะครับ
ผมไม่ขอใช้แบบนี้นะครับ

1. <script type="text/javascript" src="http://localhost/dz/api/javascript.php?key=seo_hot10_FX9"></script>

คัดลอกไปที่คลิปบอร์ด

แต่ผมจะใช้แบบนี้แทน เพราะแบบนี้จะรองรับ SEO

1. [code]{eval request('seo_hot10_FX9');}

คัดลอกไปที่คลิปบอร์ด

แสดงกระทู้ล่าสุด 10 กระทู้

1. {eval request('seo_hot1_lrq');}

คัดลอกไปที่คลิปบอร์ด

แสดงกระทู้และลายละเอียดกระทู้ 1 กระทู้

1. {eval request('seo_hot2_8D0');}

คัดลอกไปที่คลิปบอร์ด

แสดงกระทู้ 2 กระทู้ และลายละเอียด

1. {eval request('seo_hot_ann_xE5');}

คัดลอกไปที่คลิปบอร์ด

แสดงกระทู้ฮอต 1 กระทู้

1. {eval request('seo_hotpic_Q5y');}

คัดลอกไปที่คลิปบอร์ด

แสดงรูปภาพ

ขึ้นตอนการเรียกไฟล์ indexheats.htm มาแสดงที่หน้าแรก
เปิดไฟล์ /templates/default/discuz.htm
หา

1. <!--{if !empty($insenz['vfstatus']) && $insenz['vfpos'] == 'first'}--><script type="text/javascript" src="campaign.php?action=list"></script><!--{/if}-->

คัดลอกไปที่คลิปบอร์ด

วางโค้ดนี้ด้านบนครับ

1. {subtemplate indexheats}

คัดลอกไปที่คลิปบอร์ด

เพิ่มเติมอีกนิดสำหรับการปรับแต่ง JS Wizard
ค่าเริ่มต้นนั้นผมตั้งไว้ที่ All of the open section นั่นคือเรียกทุกกระดานข่าวมาแสดง ส่วนสามารถเลือกปรับแต่งของแต่ละตัวได้ที่ เครื่องมือ » javascript ตัวอย่างดังรูป

numpun

ขอบคุณจ้าาาา

dsiwarsza

ขอบคุณครับๆ

biglovea

ขอบคุณมากครับ

fukureta

รูปเสียอะครับ ไม่เป็นหน้าิวิธี Import

koratdesign

thank มากๆเลยขอรับ