很多朋友都喜欢125×125的广告位或者更小尺寸的格子广告位，现在125×125的广告位越来越成为主流，很多博客上都可以看到这样的广告，即紧凑得体又显得美观大方，不管是125×125的广告位还是类似的更小尺寸的广告暂且统称为格子广告，现在就来看看如何制作像125×125这样的格子广告吧：

1. 使用插件：

   • Ad Buttons[强烈推荐]

     Ad Buttons的功能很强大，功能包括：

     广告计时、起止日期设定；
     显示次数设定：
     点击次数设定；
     自定义广告数量；
     广告超链接链接属性自定义设置支持nofollow设置（对PR有好处）；
     广告显示页面自定义设置；
     后台统计功能；

     还可以关联Google Adsense账户和支持Geo targeting[需安装额外安装IP数据库]，即可以对特定语言设置显示还是隐藏；投放Adsense广告时还可以自定义广告样式，并且可以设置Ad Buttons广告账户来投放Ad Buttons上的广告赚钱。

     很好很强大的一个广告插件，很推荐使用。

     WordPress调取代码：

     暂不列出，将单独介绍，请见

   • WP125

     功能一般，支持广告计时，但只能是30的整倍数，或者手动停止，无法设置起始时间；
     支持邮件提醒；
     广告显示方式可以设置成随机显示；

     WordPress调取代码：

     < ?php wp125_write_ads(); ?>

   • Kadom Ads Management

     功能一般，可以说很弱，唯一的亮点是自定义广告尺寸(不仅仅是125×125，还可以自定义成468×60)可以在后台自定义广告的CSS样式；不推荐使用。

     WordPress调取代码：

     < ?php display_kd_ads( $id, $nb_columns, $margin, $url_image, $show_empty, $advertise_here); ?>

     如：

     <?php display_kd_ads(1, 2, 4, ”, true, false); ?>

2. 使用css样式：

   如果怕使用插件影响速度的话那么使用CSS是最好的选择了，使用CSS样式分为使用多种独立图片和一张独立图片来完成，使用多张独立图片就是传统意义的CSS样式，一张独立图片其实就是CSS的一个map属性罢了，所以分两部分来说吧：

   • CSS样式

     首先，找到主题文件下的style.css为广告设置好CSS样式，如：

     .125_ads {
     padding:15px 0 9px 1px;
     }
     .125_ads li.ad{
     background:0;
     list-style:none;
     float:left;
     padding-left:4px;
     padding-bottom:4px;
     height:133px;
     width:133px;
     display:block;
     overflow:hidden;
     margin:0;
     }
     .125_ads li.ad img{
     background:#fff;
     padding:2px;
     border:1px solid #717171;
     }
     .125_ads .tip{
     text-align:right;
     }

     然后找到sidebar.php，插入如下代码：

     <div>
     <h3>Ad – Google</h3>
     <ul>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     <li><a rel=”external nofollow” href=”广告目标地址”><img src=”图片地址” alt=”ALT信息” width=”125″ height=”125″ /></a></li>
     </ul>
     </div>

     效果如下图所示：

     

     想增加或减少只要调整一下代码即可。

   • HTML?map标签：

     首先直接为广告定义个css样式，然后在想要显示广告的位置，以Wordpress的侧边，打开sidebar.php，在定义好的样式中插入下面的代码即可：

     <map name=”Avatar-ad”>
     <area href=”目标地址” rel=”external nofollow” target=”_blank” shape=”rect” coords=”0,0,125,125″ alt=”alt信息” title=”title信息”>
     <area href=”目标地址” rel=”external nofollow” target=”_blank” shape=”rect” coords=”0,125,125,250″ alt=”alt信息” title=”title信息”>
     <area href=”目标地址” rel=”external nofollow” target=”_blank” shape=”rect” coords=”125,0,250,125″ alt=”alt信息” title=”title信息”>
     <area href=”目标地址” rel=”external nofollow” target=”_blank” shape=”rect” coords=”125,125,250,250″ alt=”alt信息” title=”title信息”>
     </map><img src=”图片地址” usemap=”#Avatar-ad” border=”0″ height=”250″ width=”250″>

     效果如图：

     

     说明：其中coords=”x1,y1,x2,y2″，定义的是一个矩形的热区，坐标(x1,y1)和 (x2,y2)定义的分别是矩形的两个对角顶点，如果坐标多了就可以定义多边形；上面的效果是制作四个125×125的格子广告位，这四个125×125的图片被继承在一张边长为250px的图片上，如果想设置更多的广告位，可以自行增加，每个area代表一个广告位，coords定义对应广告位的热区，效果请看本站头部的小格子广告。

     使用map属性的缺点是不够灵活，每次更换广告都要重新修改图片，显得有些死板。

写在最后，一般放置125×125广告位的条件是你的网站必需要有适当的流量，没流量放着125×125广告没什么意义，放在那里不但占用空间而且也不会有人过来购买；当然这里不仅是制作125×125的广告位还可制作你喜欢的尺寸，如30×30国外很早就有这种形式的广告了，如：

只要网站内容好，流量大，放置什么样的广告都是次要的。希望本文对你有帮助，谢谢阅读。