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

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

第一步驟:

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

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

調用代碼:

<div id="hot2" style="display:none" align="left">
<div class="ad_text" id="ad_text_div">
<table summary="Text Ad" cellpadding="0" cellspacing="1" >
<tr>
<td width="100%">
<div id="ad_text_1" align="left">
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="hot1" style="display:none">
<style type="text/css">
/* Powered by Vover! Team 5d6d'libingyan'fans */
#ad_text_div{
margin:0px auto 0px;
padding:0px 0px;
width:960px; /*這裡依據貴站主體表格寬度更改,一般為960px,如果是全屏風格,大概95%左右*/
}
#hot {
margin-bottom: 20px;
}
#hot h3 {
margin-bottom: 10px;
font-size: 14px;
color: #999;
}
#hot .desc {
color: #666;
}
#hot .desc a {
color: #09C;
}
#hot .cite,#hot cite,#hot cite a {
color: #999;
}
#hot dt,#hot li {
background: url(http://homepage8.seed.net.tw/web@5/n7197/1106302023f4ca5db9ae64b640.gif) no-repeat 0 50%;
position: relative;
}
#hot_img {
float: left;
padding-right: 14px;
width: 200px;
border-right: 1px dashed #E6E7E1;
}
#hot_img img {
margin-bottom: 1em;
padding: 2px;
width: 200px;
height: 150px;
border: 1px solid #E6E7E1;
}
#hot_img h2 {
position: relative;
}
.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 #E6E7E1;
}
#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 #E6E7E1;
color: #666;
}
#hot ul {
padding: 8px 0;
border-bottom: 1px dashed #E6E7E1;
}
#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 #f5f5f5;
background-color: #f5f5f5;
}
.sidebar,#infoside,#sidebar_img {
display: none!important;
}
.with_side .main,.with_side .content {
margin-left: 0px!important;
}
#ad_text_div{
margin:0px auto 0px;
padding:0px 0px;
}
/* Powered by dzcode! Team 5d6d'libingyan'fans */
</style>
<div id="hot" class="s_clear img">
<h3>
論壇熱點
</h3>
<div id="hot_main">
<div id="hot_girl">
</div>
<ul class="s_clear">
[node]
<li>
<a href="{link}">
{subject_nolink}
</a>
</li>
[/node]
</ul>
</div>
<div id="hot_img">
</div>
</div>
</div>
<script>
if (document.getElementById("ad_text_1") != null) {
document.getElementById("ad_text_1").innerHTML = $("hot1").innerHTML;
}
if (document.getElementById("ad_text") != null) {
document.getElementById("ad_text").innerHTML = $("hot2").innerHTML;
}
</script>

複製代碼

第二步驟:

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

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

調用代碼:

<div id="hot_img_1" style="display:none">
[node]
<a href="{link}"><img src="{imgattach}" width="204" height="154" width="224" onclick="zoom(this, this.src)" alt="{subject_full}" /></a>
<h2>
熱圖推薦:<a href="{link}" class="lightlink">{subject_nolink}</a>
</h2>
<p class="desc">
{message}
<a href="{link}" class="lightlink">查看全文</a>
</p>
<cite>
{author} 發表於 {dateline}
</cite>
[/node]
</div>
<script>
if (document.getElementById("hot_img") != null) {
document.getElementById("hot_img").innerHTML = $("hot_img_1").innerHTML;
}
</script>