傳統(tǒng)置頂信息只在列表前排顯示,用戶在瀏覽其它頁(yè)面時(shí),就無(wú)法看到置頂信息。為增加置頂信息的曝光度,框分類增加置頂隨機(jī)信息流廣告插件,每頁(yè)第六條信息后隨機(jī)顯示三條置頂信息,讓置頂更有價(jià)值,置頂不只是在前排顯示,而是每頁(yè)都會(huì)展示,瀏覽量更大效果更好,用戶在瀏覽信息時(shí),也會(huì)刷到各種分類的置頂廣告,如招聘、轉(zhuǎn)讓、二手車等。經(jīng)測(cè)試大大增加了用戶購(gòu)買置頂廣告的需求。
注:2025.1版本的程序無(wú)需安裝,已包含本插件。
使用方法:
下載插件,解壓覆蓋上傳到services目錄
電腦版
登錄后臺(tái) - 廣告 - 添加廣告,廣告位選擇“電腦分類信息列表流”,類型設(shè)置為代碼,寬高不用設(shè)置,邊距不用設(shè)置,代碼框中添加如下代碼。
<style>.vsStrmBox{overflow: visible;}.randomtop{background-color: #FFFFEE; position: relative; width:1200px; float: none; clear: both; border-radius: 0px; box-shadow: 0 0px 3px rgb(58 18 18 /15%); padding: 10px 0px;}.randomtop .head{position:absolute; left: 0; top: 0; width:130px; height: 20px; overflow: hidden; border-bottom-right-radius: 15px;} .randomtop .head::before{content: "\20"; background-color: #ed414a; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.8; width: 100%; height: 20px; z-index: 1}.randomtop .head .title{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list .box .title a{color:#c81721;}.randomtop .tips{position:absolute; right: 0; bottom: 0; width:290px; height: 20px; overflow: hidden; border-top-left-radius: 15px;}.randomtop .tips::before{content: "\20"; background-color: #000; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.4; width: 100%; height: 20px; z-index: 1}.randomtop .tips .text{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list{display: flex; flex-wrap:wrap;}.randomtop .list .box{width:33%; font-size: 13px; padding:10px; line-height: 20px; box-sizing: border-box; display: flex; flex-grow:0;}.randomtop .list .box .pic{margin-right:5px;}.randomtop .list .box .pic img{width: 80px; height: 80px; border-radius: 3px;}.randomtop .list .box .text{ flex-grow:0; width:auto; overflow: hidden;}.randomtop .list .box .title{font-weight:bolder; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.randomtop .list .box .content{ height:40px; overflow: hidden;}.randomtop .list .box .state{color:#999; position: relative;}.randomtop .list .box .state span{margin-right:10px;}.randomtop .list .box .state .date::before{content: "\e65f"; font-family: iconfont; margin-right: 3px;}</style>
<div class="randomtop"><div class="head"><div class="title">置頂信息隨機(jī)展示</div></div><div class="list"></div><div class="tips"><div class="text">信息置頂 - 讓您的信息始終保持超高關(guān)注!</div></div></div>
<script type="text/javascript">
$(function(){
var irandomcount=3;
$.ajax({url:"/services/list/?cache="+Math.random(),type:"post",data:{s:"getrandominfo",count:irandomcount},success:function(data){data=JSON.parse(data);for(i=0;i<data["list"].length;i++){var pic="",title="["+data["list"][i]["sortname"]+"]"+data["list"][i]["title"];if(data["list"][i]["pic"].indexOf("noPic")==-1){pic="<div class=\"pic\"><img src=\""+data["list"][i]["pic"]+"\" /></div>";}if(data["list"][i]["price"].indexOf("面議")==-1){title=title+" <span>¥"+data["list"][i]["price"]+"</span>";}$(".randomtop .list").append("<div class=\"box\">"+pic+"<div class=\"text\"><div class=\"title\"><a href=\""+data["list"][i]["link"]+"\" target=\"_blank\">"+title+"</a></div><div class=\"content\">"+data["list"][i]["content"]+"</div><div class=\"state\"><span>"+data["list"][i]["addressname"]+"</span><span class=\"date\">"+data["list"][i]["date"]+"</span></div></div></div>");}},error:function(){}});})</script>
手機(jī)版
登錄后臺(tái) - 廣告 - 添加廣告,廣告位選擇“手機(jī)分類信息列表流”,類型設(shè)置為代碼,寬高不用設(shè)置,邊距不用設(shè)置,代碼框中添加如下代碼。
<style>.vsStrmBox{overflow: visible;}.randomtop{background-color: #FFFFEE; position: relative; float: none; clear: both; border-radius: 0px; box-shadow: 0 0px 3px rgb(58 18 18 /15%); padding: 10px 0px; border-radius: 5px; margin: 0 5px; overflow: hidden;}.randomtop .head{position:absolute; left: 0; top: 0; width:130px; height: 20px; overflow: hidden; border-bottom-right-radius: 15px;} .randomtop .head::before{content: "\20"; background-color: #ed414a; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.8; width: 100%; height: 20px; z-index: 1}.randomtop .head .title{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list .box .title a{color:#c81721;}.randomtop .tips{position:absolute; right: 0; bottom: 0; width:290px; height: 20px; overflow: hidden; border-top-left-radius: 15px;}.randomtop .tips::before{content: "\20"; background-color: #000; display: block; position: absolute; right: 0; bottom: 0; opacity: 0.4; width: 100%; height: 20px; z-index: 1}.randomtop .tips .text{position:absolute; right: 0; bottom: 0; font-size: 12px; z-index: 99; color: #fff; width: 100%; text-align: center; line-height: 20px;}.randomtop .list{}.randomtop .list .box{ border-bottom: 1px solid #efefc2; font-size: 13px; padding:10px; line-height: 20px; box-sizing: border-box; display: flex; flex-grow:0;}.randomtop .list .box:last-of-type{border-bottom: 0px;}.randomtop .list .box .pic{margin-right:5px;}.randomtop .list .box .pic img{width: 80px; height: 80px; border-radius: 3px;}.randomtop .list .box .text{ flex-grow:0; width:auto; overflow: hidden;}.randomtop .list .box .title{font-weight:bolder; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.randomtop .list .box .content{ max-height:40px; overflow: hidden;}.randomtop .list .box .state{color:#999; position: relative;}.randomtop .list .box .state span{margin-right:10px;}.randomtop .list .box .state .date::before{content: "\e65f"; font-family: iconfont; margin-right: 3px;}</style>
<div class="randomtop"><div class="head"><div class="title">置頂信息隨機(jī)展示</div></div><div class="list"></div><div class="tips"><div class="text">信息置頂 - 讓您的信息始終保持超高關(guān)注!</div></div></div>
<script type="text/javascript">
$(function(){
var irandomcount=3;
$.ajax({url:"/services/list/?cache="+Math.random(),type:"post",data:{s:"getrandominfo",count:irandomcount},success:function(data){data=JSON.parse(data);for(i=0;i<data["list"].length;i++){var pic="",title="["+data["list"][i]["sortname"]+"]"+data["list"][i]["title"];if(data["list"][i]["pic"].indexOf("noPic")==-1){pic="<a href=\""+data["list"][i]["link"]+"\"><div class=\"pic\"><img src=\""+data["list"][i]["pic"]+"\" /></div></a>";}if(data["list"][i]["price"].indexOf("面議")==-1){title=title+" <span>¥"+data["list"][i]["price"]+"</span>";}$(".randomtop .list").append("<div class=\"box\">"+pic+"<div class=\"text\"><div class=\"title\"><a href=\""+data["list"][i]["link"]+"\">"+title+"</a></div><a href=\""+data["list"][i]["link"]+"\"><div class=\"content\">"+data["list"][i]["content"]+"</div></a><div class=\"state\"><span>"+data["list"][i]["addressname"]+"</span><span class=\"date\">"+data["list"][i]["date"]+"</span></div></div></div>");}},error:function(){}});})</script>
在后臺(tái) - 設(shè)置中,可以設(shè)置信息流廣告的顯示方式。設(shè)置為循環(huán)顯示,信息列表中就會(huì)一直隨機(jī)顯示置頂內(nèi)容。修改代碼中var irandomcount=3;的數(shù)字,調(diào)整隨機(jī)顯示置頂?shù)臄?shù)量,如:var irandomcount=6;為隨機(jī)顯示6條置頂內(nèi)容。