Skip to main content
 首页 » zblog教程 » we media

We Media自媒体主题 - 广告设置

2016年07月31日2390

主题广告分为五大块:头部广告、文章正文上方广告、文章正文底部广告、相关文章上方广告、任意JS广告。

制作广告前先了解下Bootstrap简单知识,便于后期容易上手。Boostrap是一个优秀的框架,我们只要了解以下几点就够了:

1、栅格:总共将页面划分为12格,意思是一行12格。class规则是col-xs-*(*是数字,移动端属性),col-sm-*(PC端属性),如col-xs-12指满屏的移动端广告,col-sm-4指占4格的PC端广告。这样就容易理解,如果要做2个图片广告,PC端的代码就是:

<div class="col-sm-6"><a href="链接地址" target="_blank"><img scr="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-6"><a href="链接地址" target="_blank"><img scr="图片地址" class="img-responsive" alt=""></a></div>

2、排版:文字class为text-primarytext-successtext-infotext-warningtext-danger,颜色对应为深蓝、绿色、浅蓝、橙色、红色(这里颜色有点失真);text-center是居中属性;

3、图片自适应:class="img-responsive";新窗口:target="_blank";rel="nofollow"不传权重;alt=""图片描述;

了解以上这三点其实就够用了,接下来将每个广告位置会出现的情况罗列下来,小白也会操作。

一、头部广告

1、PC端图片广告

1.jpg

<!--PC端-->
<!--一图横屏广告-->
<div class="col-sm-12"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<!--两图广告-->
<div class="col-sm-6"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-6"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<!--三图广告-->
<div class="col-sm-4"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-4"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-4"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<!--四图广告-->
<div class="col-sm-3"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-3"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-3"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-3"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<!--六图广告-->
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<!--不规则广告-->
<div class="col-sm-4"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-8"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>

首先应该明确自己想做什么样的广告,然后根据本篇教程进行选择。

以上例子广告位置显示出来是满了的情况,如果只插入下面一句代码,那么头部广告左侧有广告,占4格,右侧会留白:

<div class="col-sm-4"><a href="http://链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>

图片尺寸:一图横屏≥1110px;二图≥540px;三图≥350px;四图≥255px;六图≥160px;所有图片建议高度一致,建议≥90px。图片加属性class="img-responsive"可实现自适应,没有加,溢出部分会自动隐藏。不管是图片广告还是文字广告会自动居中。

如果我想插入联盟广告怎么办?道理是一样的。但有的联盟广告自身会有样式,需要进行微调,举例如下:

<div class="col-sm-6" style="margin-top:0"><script type="text/javascript">var sogou_ad_id=633186;var sogou_ad_height=90;var sogou_ad_width=580;</script><script type="text/javascript" src="http://images.sohu.com/cs/jsfile/js/c.js"></script></div>
<div class="col-sm-6"><a href="链接地址" target="_blank" rel="nofollow"><img src="https://www.gridsmedia.com/zb_users/upload/2016/07/201607301469867196938010.jpg" class="img-responsive" alt=""></a></div>

上面例子是各占6格栅格的2图广告,左边是搜狗联盟广告,右边是自己的图片广告。插入后发现,搜狗联盟广告自带margin-top:10px样式,所以这里进行微调加入style="margin-top:0",百度联盟广告没试过。

看了联盟广告尺寸不知道如何下手?联盟广告尺寸以搜狗广告为例能用的有如下几种120*90,160*90,200*90,580*90,640*90,728*90,760*90,950*90,960*90,自定义尺寸。

PS:格子宽度:col-sm-1:65px;col-sm-2:160px;col-sm-3:255px;col-sm-4:350px;col- sm-5:445px;col-sm-6:540px;col-sm-7:635px;col-sm-8:730px;col-sm- 9:825px;col-sm-10:920px;col-sm-11:1015px;col-sm-12:1110px。

那么我们就可以选择联盟广告略大于栅格尺寸来做广告,为什么要略大于,因为溢出可以隐藏,而小了会留白。譬如我们要做两个广告,那就选580*90的尺寸,对应就是col-sm-6,代码如下:

<div class="col-sm-6">580*90联盟广告代码</div><div class="col-sm-6">580*90联盟广告代码</div>

如我们想做不规则尺寸广告,选了160*90,刚好对应col-sm-2,那么就得选col-sm-10相近尺寸,950*90。代码如下:

<div class="col-sm-10">950*90联盟广告代码</div><div class="col-sm-2">160*90联盟广告代码</div>

2、PC端文字广告/混合广告

未标题-1.jpg

图片广告能理解了,文字广告就很容易懂了,以上效果代码如下:

<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-danger">文字广告一</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-primary">文字广告二</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-success">文字广告三</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-info">文字广告四</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-warning">文字广告五</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank">文字广告六</a></div>

文字广告根据自己的文字多少选择占几格,注意美观即可。

我广告比较多,想做图片加文字广告怎么办?如下图:

2.jpg

<div class="col-sm-6"><a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-6"><a href="链接地址" target="_blank" rel="nofollow"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-danger">文字广告一</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-primary">文字广告二</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-success">文字广告三</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-info">文字广告四</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-warning">文字广告五</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank">文字广告六</a></div>

以上例子是两排,第一排图片,每个占6格,第二排文字每个占2格。形成规则就得占满12格,不然会错位。

那如果我只有1张图片,只占6格,另一边后期再加,底下加文字那不是会错位了?解决办法也容易,把另一边也写上栅格,留空即可,如下:

<div class="col-sm-6"><a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-6"></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-danger">文字广告一</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-primary">文字广告二</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-success">文字广告三</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-info">文字广告四</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank" class="text-warning">文字广告五</a></div>
<div class="col-sm-2"><a href="链接地址" target="_blank">文字广告六</a></div>

PC端同时也建议加入col-xs-6或col-xs-12,PC窗口缩小后也能排列美观。如下PC显示1行2图,PC缩小后显示1行1图:

<div class="col-sm-6 col-xs-12"><a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-sm-6 col-xs-12"><a href="链接地址" target="_blank" rel="nofollow"><img src="图片地址" class="img-responsive" alt=""></a></div>

3、移动端广告

理解了PC端,移动端就简单了,移动端属性是col-xs-*,另外移动端是根据平板手机自适应,那么就不建议像PC做那么多小图广告,一般情况做2图,1图广告就可以。考虑到平板尺寸因素,2图的图片尺寸建议≥360px,1图的图片尺寸建议≥720px,高度建议≥100px。

333.jpg

<div class="col-xs-12"><a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>
<div class="col-xs-12"><a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a></div>

4、按钮说明

总开关关闭不显示广告,开启才支持后面两个按钮,首页独特性指首页模板只有第1页显示,第2页开始不显示,这样可以增加搜索引擎对首页辨识度,全站指404除外的其他页面。

二、文章正文上方广告

66666.jpg

可以做成图片广告、文字广告等形式。文字广告几种情况如下:

<!--联盟文字广告-->
<div class="row text-center">联盟文字广告</div>
<!--文字广告-->
<div class="row text-center">
  <div class="col-sm-3"><a href="链接地址" targer="_blank" class="text-info">文字广告一</a></div>
  <div class="col-sm-3"><a href="链接地址" targer="_blank" class="text-danger">文字广告二</a></div>
  <div class="col-sm-3"><a href="链接地址" targer="_blank">文字广告三</a></div>
  <div class="col-sm-3"><a href="链接地址" targer="_blank">文字广告四</a></div>
</div>
<!--文章内图片广告居左-->
<div style="float:left;margin:20px 20px 10px 0"><a href="链接地址" targer="_blank"><img src="图片地址" alt=""></a></div>
<!--文章内图片广告居右-->
<div style="float:right;margin:20px 0 10px 20px"><a href="链接地址" targer="_blank"><img src="图片地址" alt=""></a></div>

文章内图片广告可以居左居右,居左float:left,居右float:right,加入margin是外补边距。margin规则是上右下左,如margin:40px 30px 20px 10px意思是距离上边40px,右边30px,下边20px,左边10px。另外图片尺寸不建议太大。

三、文章正文底部广告

一般是图片或联盟广告。这里只举个特殊的例子,部分用户做自媒体网站想要加入类似下面的效果。代码如下:

4444.jpg

<!--PC端-->
<div class="single-copyright">
  <div class="row">
    <div class="col-sm-2"><img src="http://网站域名/zb_users/theme/we_media/include/qrcode.jpg" class="img-responsive" alt=""></div>
    <div class="col-sm-10 text-left">网格传媒(www.gridsmedia.com)获取TMT行业新鲜资讯和智能硬件产品深度评测,请在微信公众账号中搜索<span class="text-danger">「zblog」</span>或者<span class="text-danger">「zblogcn」</span>,或用手机扫描左方二维码,即可获得每日精华内容推送和最优搜索体验,并参与编辑活动。</div>
  </div>
</div>
<!--移动端-->
<div class="single-copyright">
  <div class="row">
    <div class="col-xs-4"><img src="http://网站域名/zb_users/theme/we_media/include/qrcode.jpg" class="img-responsive" alt=""></div>
    <div class="col-xs-8 text-left">微信公众号搜索<span class="text-danger">zblog</span>,获得每日精华内容推送。</div>
  </div>
</div>

将以上代码网站域名换成自己的域名,文字内容换成自己想要的,移动端文字建议少些美观。文字颜色属性将text-danger替换成自己想要的。

如果是联盟广告,直接插入JS,不用像上面在写栅格

自己的图片广告,一样不加栅格。如下:

<a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a>

四、相关文章上方广告

一般是联盟广告,直接插入JS,不用像上面在写栅格,不赘述。

自己的图片广告,一样不加栅格。如下:

<a href="链接地址" target="_blank"><img src="图片地址" class="img-responsive" alt=""></a>

五、任意JS广告

一般是漂浮广告,悬浮广告或弹窗广告,直接插入JS,不用像上面在写栅格,不赘述。

微信