网站建设

互推联盟最新自适应iframe代码,欢迎调用!

Jager · 4月7日 · 2014年 · 2267次已读

最新消息:已制作JS调用版本,对SEO更加友好!请移步获取通用JS调用代码=>

Ps:使用方法依然如下,不会用的可以继续往下看看~~

2014年03月15日推出的第一版互推联盟通用iframe代码,有以下三个遗留问题:

① 由于分类tab按钮没有做自适应CSS,所以只能用于宽度大于750px的页面,不少博友留言说页面太小无法调用;

② 成员链接点开之后,标题会被强行重写成“互推联盟成员网站”,且地址栏一直是玛思阁博客网址,感觉点击就是给玛思阁增加PV。。。(实际上,还真没有....),但我还是会听从意见,此次一并改善!

③ 手机访问调用页面无内容(已在手机主题中添加相关模板,此问题已解决)。


 一、完美自适应

问题 ①:今天我花了个把小时仔细看了下CSS,并在网站开发同事的协助下,终于搞定了!已调用iframe的博友不用做任何修改!

iframe代码依然如下,任意宽度页面均可调用(当然,太窄了也不美观嘛,宽度大于620px最佳):

<iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

PS:此代码已失效!

二、链接跳转

 

问题②:互推联盟页面是用嗨酷哥的酷站导航源码做的,他对每个博客链接都用了一个go跳转的中间页,应该是为了避免SEO权重的流失吧! 想想也是,总不能把这么多外链丢到我的博客,就算对调用iframe的博客可能也会有所影响,毕竟不是友情链接!所以这个跳转机制还是有必要的!

经过测试,最后拿掉了原始的中间跳转页面,自己重新做了个外链的跳转机制,类似于anylink插件,将所有外链输出为如下形式:

https://zhang.ge/bokehutui.php?http://www.site.cn

点击后直接跳至目标链接,而不会强行重写网站标题,测试了下,链接打开速度都所提高了!

 

四、调用方法

直接将上面的iframe代码插入页面模板相应位置即可!还可以根据需要加上边框线之类的样式。

下面具体说一下Wordpress是如何添加的:

① 将主题下的页面模板page.php复制一份,并重命名一下(比如:htlm.php)(如果有留言板的博友,可以直接复制一份留言板即可),将以下内容加到顶部,如果已存在,直接修改冒号后的名称即可:

<?php
/*
Template Name: 互推联盟
*/
?>

② 在页面你想引用的位置插入上面的iframe代码,如果你的主题是定义了边框线的,也可以将此代码放入对应DIV里面,比如知更鸟就可以将代码放到<div class="entry_box_s_l"></div>之间,从而加上边框(请参考文章最后的实例代码)。

③ 建立新页面,输入页面名称,如“互推联盟”,并修改别名为拼音或英文,然后如下图在右侧页面模板下拉选择【互推联盟】,保存即可。

互推联盟最新自适应iframe代码,欢迎调用!

Ps:此页面宽度可以自适应拉伸,当然你也可以根据实际大小将width:100%改成你需要的宽度(建议大于620px)

五、成功案例:

已升级为荣誉站点,所有调用代码制作页面的博客将会得到升级!

Ps:请至 https://zhang.ge/alliance 查看荣誉站点名单。

附:知更鸟主题实例参考代码

 

下面我给出一个知更鸟的实例页面代码,供大家参考:

Ps:知更鸟主题的博客可以直接复制保存为php文件丢到主题目录,然后新建页面选择互推联盟模版即可。

<?php
/*
Template Name: 互推联盟
*/
?>
<?php get_header(); ?>
<div id="map_box">
<div id="map_l">
<div class="browse">现在位置: <a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> >互推联盟</div>
</div>
<div id="map_r">
<div id="feed"><a href="<?php bloginfo('rss2_url'); ?>" target="_blank" title="RSS">RSS</a></div>
</div>
</div>
<div class="clear"></div>
<div class="entry_box_s_l">
<iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div class="clear"></div>
</div>
<div class="entry_sb_l">
<i class="lb"></i>
<i class="rb"></i>
</div>
<?php get_footer(); ?>

最后,有任何问题都可以留言反馈,多谢大家支持!

73 条回应