如何添加网站文章文末二维码?给文章文末添加二维码的代码是什么?

    时间: 浏览:1066次  来源:站长在线
导读:在文章文末增加二维码也是网站常见的功能,一般在自己的文章文末添加本站的微信公众号二维码,微信二维码、QQ二维码、QQ群二维码等,那样阅读过本文的网友,如果需要交流的话,可

导读:在文章文末增加二维码也是网站常见的功能,一般在自己的文章文末添加本站的微信公众号二维码,微信二维码、QQ二维码、QQ群二维码等,那样阅读过本文的网友,如果需要交流的话,可以迅速的可以通过QQ、QQ群、微信、微信群来相互交流。

本文就以站长在线使用的mip建站系统为例,来教大家怎么在自己的网站的文章末尾添加两张二维码。

要想实现文末添加二维码,有两个部分需要添加:一个是CSS里面添加该代码的css,一个是在网站模板里面添加html代码。


一、在当前页面的css文件里面添加css:

.wmewm {width:300px; height: 150px;}
.wxewm {width:150px; height: 150px; float:left;clear:left;}
.gzhewm {width:150px; height: 150px; float:right;clear:right;}

自定义.wmewm就是 文末二维码的简写,宽度为300px,高度为150px,当然这个自定义的名称和高度,宽度自己随意。

自定义.wxewm 就是微信二维码的简写,宽度为150px,高度为150px,当然这个自定义的名称和高度,宽度自己随意。

自定义.gzhewm就是公众号二维码的简写,宽度为150px,高度为150px,当然这个自定义的名称和高度,宽度自己随意。

上面的意思就是,一个大的div里面,有两个并排的小div,大的div高是150,宽是300,而两个小的div的宽和高都是150.


二、在网页模板里面添加html代码:

这个文末二维码,实际上也就是一个广告位而已,添加代码的步骤如下:

2.1、后台--插件--广告管理--添加广告

2.2、添加内容是:

2.2.1、名称:文末二维码

2.2.2、别名:wmewm

2.2.3、代码:

<div align="center">
<div class="wmewm" align="center">加入官方2000人QQ群一起交流<div class="wxewm"><mip-img src="HTTPs://WWW.olzz.com/img/qqun.png" alt="2000人QQ群"></mip-img></div>
<div class="gzhewm"><mip-img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></mip-img></div>

</div>
关注官方微信公众号[站长在线]
</div>

2.2.4、复制调用代码{mipjz:ad name='wmewm' /}到文章详情页模板articleDetail.html里面的 {$itemInfo['mipContent']}后面,上一篇下一篇的前面即可。

注:站长在线的diy模板,在模板制作的时候,已经写入了,文末二维码的调用代码了和css代码了,只需要在后台添加这个广告即可。

上面讲的MIP建站系统的代码,如果是传统的dedecmsWordPressphpcms、帝国等非mip的网站的话,把mip-img的标签改成img标签即可,即:

<div align="center">
<div class="wmewm" align="center">加入官方2000人QQ群一起交流<div class="wxewm"><img src="https://www.olzz.com/img/qqun.png" alt="2000人QQ群"></div>
<div class="gzhewm"><img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></div>

</div>
关注官方微信公众号[站长在线]
</div>

这样添加以后,前台的文末就会显示你添加的两张二维码了,当然如果你这是想添加一张文末图片的话,那就简单得多啦!不需要写css规则,直接在模板文件里面添加一张图片的HTML代码即可:

mip的网站代码是:

<div align="center"><mip-img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></mip-img></div>

普通的如WordPress、dedecms、phpcms就是在模板页面里面添加:

<div align="center"><img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></div>

当然,图片还是可以带上链接的,我这里就不带链接了。

正在阅读的你,学会了如何添加网站文章文末二维码了吗?有自己网站的赶快去实践体验一下哦,建站的经验,全部来自于实践,赶快动手吧!欢迎进群,一起交流学习,共同进步!

本文地址:https://www.olzz.com/wenmoerweima.html
码字不易,打个赏呗
站长在线小编感谢你的支持!

猜你喜欢

在浏览器里面自动跳转的JavaScript页面url跳转代码

使用方法:桌面新建一个txt文本文档,将下面代码,复制到文档里面,并重命名为index.html文档即可。代码清单:<script>functionGetRando

2022-03-06  分类:JavaScript代码  浏览:347次


给图片带上链接的html代码

今天我的一个好多年的建站的老朋友,问我:图片如何做成链接?也就是说:怎样给图片带上链接?天啦,这么简单的问题,他怎么问得出口哦!当然了,我们认为简单要死的问题,也许对别人来说,

2021-12-23  分类:HTML代码  浏览:528次


让网站变黑白色(灰色)的css代码

欢迎你来到站长在线代码库,今天发布的是让网站变黑白色,也就是让网站变灰色的css代码:

2021-12-13  分类:CSS代码  浏览:392次


站长在线上线代码库和题库两大栏目,解决重复造轮子和学以致用的问题

今天是2021年的11月9日,站长在线(olzz.com)正式上线代码库和题库两大栏目。代码库是解决重复造轮子的问题,题库解决学以致用的问题。

2021-11-09  分类:本站资讯  浏览:451次


站长在线官方模板mipdiy所有广告位和广告代码

站长在线官方模板mipdiy模板,所有的广告位和广告代码如下:(以模板2021年11月3日更新为准)网站的广告位,其实也是网站的各种功能区,承担的作用,也不可以简单的理解为投放

2021-11-03  分类:建站知识  浏览:664次


黑客数字雨网页代码及特效展示

今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效,今日转载给网友欣赏!先上黑客数字雨的网页特效给大家看看吧!网址是:https://www.olzz.com/demo

2021-10-16  分类:网页特效  浏览:651次


代码编辑软件Sublime Text 4中文版安装使用教程

sublime text 4是一款非常好用的文本代码编辑器、程序员之必备神器!Sublime Text 是个功能强大的代码编辑器,也是HTML和TXT先进的文本编辑器。其主要功能包括:Python的插件,完整的Python API , Goto功能,代码段,代码缩略图,拼写检查,书签,即时项目切换,多选择,多窗口,自定义键绑定,主题方案等。

2021-10-14  分类:办公软件  浏览:935次


站长在线正式发布免费二维码api接口服务,,让网址、文字转换二维码轻松简单

最近站长在线官方模板在进行优化升级,新增了二维码的功能,使用手机扫一扫就能在手机上面阅读了。这大大的方便用户手机阅读,或者使用手机转发当前页面给自己的好友、群里面进行分享。使用

2021-09-06  分类:本站资讯  浏览:1394次


站长在线官方模板mipdiy模板8月26日新增二维码查看本页功能

导读:站长在线官方网站模板mipdiy模板,今日全部上线了二维码的功能,用户可以通过手机扫一扫在手机上面查看,用手机分享给自己的好友的功能。站长在线官方网站是使用MIP建站系统

2021-08-26  分类:本站资讯  浏览:531次


给mip建站系统添加广告和广告位,附本站所有广告位和广告代码

欢迎你来到站长在线(olzz.com)mip建站系统原创建站教程系列,今天分享的是给你的mip建站系统添加广告和广告位。在早起的mipcms的版本中,程序里面是不带广告位的,于

2020-06-23  分类:建站知识  浏览:953次