免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 超美觀!!!調用論壇熱點-首頁或主題列表頁三格列式

總共為三步驟-*皆為添增主題列表

sshot-2.jpg
2012-5-10 18:11


第一步驟:

工具 » 數據調用
添加主題列表

所在版塊:全部的開放版塊
顯示數據條數:8
標題最大字節數:50
鏈接打開位置:在當前窗口打開 或 在新窗口打開
主題排序方式: 240 小時內瀏覽次數倒序排序
其餘為默認

調用代碼:
  1. <div id="hot2" style="display:none" align="left">
  2.         <div class="ad_text" id="ad_text_div">
  3.                 <table summary="Text Ad" cellpadding="0" cellspacing="1" >
  4.                         <tr>
  5.                                 <td width="100%">
  6.                                         <div id="ad_text_1" align="left">
  7.                                         </div>
  8.                                 </td>
  9.                         </tr>
  10.                 </table>
  11.         </div>
  12. </div>
  13. <div id="hot1" style="display:none">
  14. <style type="text/css">
  15. /* Powered by Vover! Team 5d6d'libingyan'fans */
  16. #ad_text_div{
  17.                 margin:0px auto 0px;
  18.                 padding:0px 0px;
  19.                 width:960px; /*這裡依據貴站主體表格寬度更改,一般為960px,如果是全屏風格,大概95%左右*/
  20. }

  21. #hot {
  22.         margin-bottom: 20px;
  23. }
  24. #hot h3 {
  25.         margin-bottom: 10px;
  26.         font-size: 14px;
  27.         color: #999;
  28. }
  29. #hot .desc {
  30.         color: #666;
  31. }
  32. #hot .desc a {
  33.         color: #09C;
  34. }
  35. #hot .cite,#hot cite,#hot cite a {
  36.         color: #999;
  37. }
  38. #hot dt,#hot li {
  39.         background: url(http://homepage8.seed.net.tw/web@5/n7197/1106302023f4ca5db9ae64b640.gif) no-repeat 0 50%;
  40.         position: relative;
  41. }
  42. #hot_img {
  43.         float: left;
  44.         padding-right: 14px;
  45.         width: 200px;
  46.         border-right: 1px dashed #E6E7E1;
  47. }
  48. #hot_img img {
  49.         margin-bottom: 1em;
  50.         padding: 2px;
  51.         width: 200px;
  52.         height: 150px;
  53.         border: 1px solid #E6E7E1;
  54. }
  55. #hot_img h2 {
  56.         position: relative;
  57. }
  58. .desc {
  59.         padding: 5px 0;
  60. }
  61. .img #hot_main {
  62.         float: right;
  63.         margin-left: -230px;
  64.         width: 100%;
  65. }
  66. .img dl,.img ul {
  67.         margin-left: 230px;
  68. }
  69. #hot dt strong {
  70.         margin-right: 1em;
  71. }
  72. #hot dl {
  73.         border-top: 1px dashed #E6E7E1;
  74. }
  75. #hot dt,#hot dd {
  76.         padding-left: 10px;
  77. }
  78. #hot dt {
  79.         padding-top: 8px;
  80.         background-position: 0 15px;
  81. }
  82. #hot dd {
  83.         padding-bottom: 8px;
  84.         border-bottom: 1px dashed #E6E7E1;
  85.         color: #666;
  86. }
  87. #hot ul {
  88.         padding: 8px 0;
  89.         border-bottom: 1px dashed #E6E7E1;
  90. }
  91. #hot li {
  92.         float: left;
  93.         width: 49.5%;
  94.         line-height: 22px;
  95.         height: 22px;
  96.         text-indent: 10px;
  97.         white-space: nowrap;
  98.         overflow: hidden;
  99.         text-overflow: ellipsis;
  100. }
  101. #hot .deloption {
  102.         position: absolute;
  103.         right: 0;
  104.         margin: 0;
  105.         border: 3px solid #f5f5f5;
  106.         background-color: #f5f5f5;
  107. }
  108. .sidebar,#infoside,#sidebar_img {
  109.         display: none!important;
  110. }
  111. .with_side .main,.with_side .content {
  112.         margin-left: 0px!important;
  113. }
  114. #ad_text_div{
  115.          margin:0px auto 0px;
  116.          padding:0px 0px;
  117. }

  118. /* Powered by dzcode! Team 5d6d'libingyan'fans */
  119. </style>
  120.         <div id="hot" class="s_clear img">
  121.                 <h3>
  122.                         論壇熱點
  123.                 </h3>
  124.                 <div id="hot_main">
  125.                         <div id="hot_girl">
  126.                         </div>
  127.                         <ul class="s_clear">
  128.                                 [node]
  129.                                 <li>
  130.                                         <a href="{link}">
  131.                                                 {subject_nolink}
  132.                                         </a>
  133.                                 </li>
  134.                                 [/node]
  135.                         </ul>
  136.                 </div>
  137.                 <div id="hot_img">
  138.                 </div>
  139.         </div>
  140. </div>
  141. <script>
  142.         if (document.getElementById("ad_text_1") != null) {
  143.                 document.getElementById("ad_text_1").innerHTML = $("hot1").innerHTML;
  144.         }

  145.         if (document.getElementById("ad_text") != null) {

  146.                 document.getElementById("ad_text").innerHTML = $("hot2").innerHTML;

  147.         }
  148. </script>
複製代碼
第二步驟:

工具 » 數據調用
添加主題列表

所在版塊:全部的開放版塊
顯示數據條數:1
標題最大字節數:20
主題簡短內容最大字節數:64
鏈接打開位置:在當前窗口打開 或 在新窗口打開
主題排序方式: 1680 小時內瀏覽次數倒序排序
其餘為默認

調用代碼:
  1. <div id="hot_img_1" style="display:none">
  2.         [node]
  3. <a href="{link}"><img src="{imgattach}" width="204" height="154" width="224" onclick="zoom(this, this.src)" alt="{subject_full}" /></a>
  4.         <h2>
  5.                 熱圖推薦:<a href="{link}" class="lightlink">{subject_nolink}</a>
  6.         </h2>
  7.         <p class="desc">
  8.                 {message}
  9.                 <a href="{link}" class="lightlink">查看全文</a>
  10.         </p>
  11.         <cite>
  12.                 {author} 發表於 {dateline}
  13.         </cite>
  14.         [/node]
  15. </div>
  16. <script>
  17.         if (document.getElementById("hot_img") != null) {
  18.                 document.getElementById("hot_img").innerHTML = $("hot_img_1").innerHTML;
  19.         }
  20. </script>
複製代碼
第三步驟:

工具 » 數據調用
添加主題列表

所在版塊:全部的開放版塊
顯示數據條數:2
標題最大字節數:50
主題簡短內容最大字節數:210
鏈接打開位置:在當前窗口打開 或 在新窗口打開
主題排序方式: 8760 小時內瀏覽次數倒序排序
其餘為默認

調用代碼:
  1. <div id="hot_boy" style="display:none">
  2.         [node]
  3.         <dl>
  4.                 <dt>
  5.                         <strong>
  6.                                 <a href="{link}" class="lightlink">{subject_nolink}</a>
  7.                         </strong>
  8.                         <cite>
  9.                                 {author}
  10.                         </cite>
  11.                 </dt>
  12.                 <dd class="desc">
  13.                         {message}
  14.                         <a href="{link}" class="lightlink">查看全文</a>
  15.                 </dd>
  16.         </dl>
  17.         [/node]
  18. </div>
  19. <script>
  20.         if (document.getElementById("hot_girl") != null) {
  21.                 document.getElementById("hot_girl").innerHTML = $("hot_boy").innerHTML;
  22.         }
  23. </script>
複製代碼
全局 - 啟用邊欄: 選擇"是"
界面 » 界面設置 - 首頁或主題列表頁都可
將新建的三個主題列表打勾可用 - 顯示順序 : 可依步驟 其實應該沒差

謝分享~~
14df4ccd4c8fc8.gif
2012-5-10 18:41

TOP

回復 1# n7197


    謝謝 你

TOP

繼續學習

TOP

曾经用过....挺不错的

TOP

返回列表