侧边栏滑动广告代码(附后台设置代码)

今天撸友small跟我要碎碎念侧边栏滚动广告的代码,扒皮是不够的,CSS+JS+后台设置,这才是王道的选择!

长话短说,下面就把整个的广告位代码简单地解析一下。

一、javascript代码

把最主要的JS代码先抽出来给大家瞧瞧,其实代码很简陋:

//侧边广告   
function adscroll(obj){    
    jQuery(obj).find("ul:first").animate({     /*找到第一个ul,其包含的子级层为目标并添加属性*/
        marginTop:"-100px"    /*向上外边距-100个像素,也就是向上移动100px,视你设置的广告位的高度而定*/
    },500,function(){    /*移动的时间长度*/
        jQuery(this).css({marginTop:"0px"}).find("li:first").appendTo(this);    /*附加样式*/
        });    
}    
jQuery(document).ready(function(){        
    setInterval('adscroll(".notice")',5000)    
    /*对应侧边广告最外层DIV的ID或CLASS,参考下方结构,停留时间为5秒*/
});   

大神就不用听解释啦,短短几行,随意更换方向、大小,不在话下。

其中第4行marginTop 可以任意修改为Left、Down、Right,相应样式修改即可,滚动时间(第5行)和停留时间(第10行)也可以自行设置,一般停留时间在3~5秒,滚动时间视广告位高度而定。对应模块的级别要对应好,也就是第3、6、10行各个属性的层级关系,如div布置所示。

二、div布置代码以及层级关系

注意你的广告位的代码应该有如下的结构:

<?php if (get_option('swt_notice') == 'Display') { ?>   
<div class="notice"><ul>   
<li><?php echo stripslashes(get_option('swt_noticecode1')); ?></li>   
<li><?php echo stripslashes(get_option('swt_noticecode2')); ?></li>   
<li><?php echo stripslashes(get_option('swt_noticecode3')); ?></li>   
<li><?php echo stripslashes(get_option('swt_noticecode4')); ?></li>   
</ul></div>   
<?php { echo ''; } ?><?php } else { } ?>  

碎碎念的侧边栏广告添加设置的是从后台设置代码,所以添加了判断函数,如果不需要,可以自行剔除,删除掉第1、8行即可,更加简洁。

最外层级别为notice这是最主要的JS对应的层,接下来是ul、li,可以自行添加class,编写相应的css style来渲染更丰富的效果,之前碎碎念也添加过,不过过于复杂,就剔除了。

三、后台设置添加代码

javascript和div都布置好了,接下来就是后台设置代码了,如果你不需要后台设置,这一步可以跳过去。
假如你的主题支持自行修改后台设置代码,有themeoption.php之类的php文件存在于你的主题根目录下或者includes文件夹中,就可以打开它来进行更自由的编辑。

碎碎念的Tinylove的后台设置文件在includes/themeoptions.php,Mystyle主题也一样,打开这个文件夹,找到第268行,其他主题自行判断,添加以下代码:

//广告设置   
    array(  "type" => "close"),   
    array(  "name" => "博客广告设置",   
            "type" => "section"),   
    array(  "type" => "open"),   
  
    array(  "name" => "是否显示四格广告",   
            "desc" => "默认不显示",   
            "id" => $shortname."_notice",   
            "type" => "select",   
            "std" => "Display",   
            "options" => array("Hide", "Display")),   
  
    array(  "name" => "输入四格广告代码1(支持HTML140*140)<br/>",   
            "desc" => "",   
            "id" => $shortname."_noticecode1",   
            "type" => "textarea",   
            "std" => ""),   
  
    array(  "name" => "输入四格广告代码2(支持HTML140*140)<br/>",   
            "desc" => "",   
            "id" => $shortname."_noticecode2",   
            "type" => "textarea",   
            "std" => ""),   
  
    array(  "name" => "输入四格广告代码3(支持HTML140*140)<br/>",   
            "desc" => "",   
            "id" => $shortname."_noticecode3",   
            "type" => "textarea",   
            "std" => ""),   
  
    array(  "name" => "输入四格广告代码4(支持HTML140*140)<br/>",   
            "desc" => "",   
            "id" => $shortname."_noticecode4",   
            "type" => "textarea",   
            "std" => ""),  

保存,即可。

再次打开后台设置,你会发现多了四个广告代码输入框,还有一个广告显示开关,是不是很周到啊?输入图像或者文字,test一下吧!

四、前端样式代码CSS

结构和内容都布置好了,就差给它穿件华丽的衣服了,来来来,样式撸起来!

.notice{height: 100px;overflow:hidden;margin-bottom: 10px;}   
.notice ul{}   
.notice ul li{width:100%;height: 100px;color: #222;font-size: 14px;line-height: 20px;overflow:hidden;margin:0 2% 8px 2%;}   
.notice ul li img{width:98%;height: 100px;padding: 0px;overflow:hidden;}  

只是最基本的样式了,需要添加炫目的效果,那就看各位看官的发挥啦~
提一下,由于广告栏我只考虑图片广告,文字广告暂时不意淫,所以,样式上也是只考虑纯图片的广告,如果需要添加图文混杂或者文字广告,请大家自行调试哟。此外,由于不同主题的各个相关样式不同,建议在本地调试满意后再添加到你自己的站点正式投入使用,因不当使用代码导致的错位、突出、显示不全、脑抽、晕眩,本站不负任何道德与法律责任,如出现口吐白沫、倒地不起,请立马呼叫120!o(╯□╰)o

对本段代码有任何改进建议,使用问题,请在本文下方留言,卤煮不一定回复你,但是你不留言,我就不回复你,(⊙o⊙)…

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/wordpress/siderbar-ad/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!