新闻中心

thinksaas程序在首页底部添加广告详解

作者 / 无忧主机时间 2017-07-12 18:33:33

建站过程中,我们经常会为自己的网站添油加醋，今天无忧主机小编就教会大家如何在自己的网站打广告，以thinksaas程序为例。在访问thinksaas官网时,会发现网站首页的底部有一个固定的div,如图1所示。上面可以根据自己的需求添加一些广告信息和联系方式，放在底部不会影响对页面的整体布局，透明的层样式能够显示也不会影响页面内容的显示，对于网站的访问者来说是非常可以接受的。无忧主机小编研究了一番后，在自己的thinksaas程序中成功模仿了这个功能，为了使网站有更好的体验，无忧主机小编还在这个横幅中设置了一个关闭广告按钮，具体的操作步骤如下： 1、找到用于存放横幅的文件 /app/home/html/footer.html，用notepad++或其他文本编辑器打开，可以看到如下代码

{php doAction('body_foot')}
{php include pubTemplate("footer");}

在这段代码后面添加广告和联系方式的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function removeElement(id){ document.getElementById(id).style.display="none"; }
</script>
</head>
<body>
<style type="text/css">
.footertip{ position: fixed; z-index: 200; float:left; padding: 10px 0; width: 100%;
background-color: #333; background-color: rgba(0,0,0,0.75); color: #FFF;
font-size: 18px; text-align: center; bottom: 0;}		
.hidden-xs { opacity:0.8; }		
.btn-info { color: #fff;background-color: #5bc0de;border-color: #46b8da; }		
.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;
line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;
-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;
-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}
a{ text-decoration: none;}
</style>	
<div class="footertip hidden-xs" id="bar1">在这里写一些广告语，如果有问题可以在"点击联系"出联系站长，如果不喜欢可以点击最后侧的"关闭"。 
<a class="btn btn-info" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=这里填写站长的qq&site=qq&menu=yes">点击联系</a>
<a onclick="removeElement('bar1')">关闭</a>
</div>
</body>
</html>

2、将上面这段代码中的“这里填写站长的qq” 填写好对应的qq号码，广告语也可以自己更改的，改好了保存好上传到空间目录：/app/home/html/ ，这样广告就做好了，效果如图2所示: