新聞中心

thinksaas程序在首頁底部添加廣告詳解

作者 / 無憂主機(jī) 時(shí)間 2017-07-12 18:33:33

建站過程中,我們經(jīng)常會(huì)為自己的網(wǎng)站添油加醋，今天無憂主機(jī)小編就教會(huì)大家如何在自己的網(wǎng)站打廣告，以thinksaas程序?yàn)槔?。在訪問thinksaas官網(wǎng)時(shí),會(huì)發(fā)現(xiàn)網(wǎng)站首頁的底部有一個(gè)固定的div,如圖1所示。上面可以根據(jù)自己的需求添加一些廣告信息和聯(lián)系方式，放在底部不會(huì)影響對(duì)頁面的整體布局，透明的層樣式能夠顯示也不會(huì)影響頁面內(nèi)容的顯示，對(duì)于網(wǎng)站的訪問者來說是非?？梢越邮艿?。無憂主機(jī)小編研究了一番后，在自己的thinksaas程序中成功模仿了這個(gè)功能，為了使網(wǎng)站有更好的體驗(yàn)，無憂主機(jī)小編還在這個(gè)橫幅中設(shè)置了一個(gè)關(guān)閉廣告按鈕，具體的操作步驟如下： 1、找到用于存放橫幅的文件 /app/home/html/footer.html，用notepad++或其他文本編輯器打開，可以看到如下代碼

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

在這段代碼后面添加廣告和聯(lián)系方式的代碼如下：

<!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">在這里寫一些廣告語，如果有問題可以在"點(diǎn)擊聯(lián)系"出聯(lián)系站長，如果不喜歡可以點(diǎn)擊最后側(cè)的"關(guān)閉"。 
<a class="btn btn-info" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=這里填寫站長的qq&site=qq&menu=yes">點(diǎn)擊聯(lián)系</a>
<a onclick="removeElement('bar1')">關(guān)閉</a>
</div>
</body>
</html>

2、將上面這段代碼中的“這里填寫站長的qq” 填寫好對(duì)應(yīng)的qq號(hào)碼，廣告語也可以自己更改的，改好了保存好上傳到空間目錄：/app/home/html/ ，這樣廣告就做好了，效果如圖2所示: