หมายเหตุ: บางทีเราต้องปรับความกว้างในส่วน #topbar (สำหรับโค้ดชุดที่ 1 และ 2) ตรง width: 160px; เพื่อให้ป้ายแบนเนอร์แสดงผลตามความกว้างและความสูงที่ได้กำหนดไว้ ซึ่งก็ขึ้นอยู่กับเทมเพลตที่เราใช้งานอยู่ด้วย
1. ไปที่ Appearance แล้วคลิกที่ Editor
2. คลิกเลือกไฟล์ Theme Header (header.php) แล้วค้นหาโค้ด </head> จากนั้นใส่โค้ดส่วนแรกก่อน </head> แล้วทำการบันทึกไฟล์
3. คลิกเลือกไฟล์ Theme Footer (footer.php) แล้วค้นหาโค้ด </body> จากนั้นใส่โค้ดส่วนที่สองก่อน </body> แล้วทำการบันทึกไฟล์
1. โค้ดเลื่อนตาม Scrollbar ทางซ้าย
โค้ดส่วนที่ 1: <style type="text/css">#topbar{
position:absolute;
border: 0px solid black;
padding: 0px;
width: 160px;
visibility: hidden;
z-index: 100;
}
</style><script type="text/javascript">
var persistclose=1 // ให้ใส่เป็น 0 หรือไม่ก็ 1 (โดย 0 หมายถึง เมื่อกดปิดแล้ว กด REFRESH กรอบข้อความจะขึ้นมาอีก แต่ถ้า 1 กรอบข้อความจะไม่ขึ้นมาอีกแล้ว)
var startX = 20 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านซ้าย
var startY = 10 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านบน
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
var verticalpos="fromtop"
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
โค้ดส่วนที่ 2: <div visibility: visible;" id="topbar">
<td align="right"> <div > <a href="#" onClick="closebar(); return false"><font color="#FF0000"><strong>Close</strong></font></a> </div> </td>
<a target="_blank" href="ใส่ลิงก์ URL ของแบนเนอร์" rel="nofollow"><img src="ใส่ URL รูปภาพแบนเนอร์" width="160" height="600" /></a></div>
2. โค้ดเลื่อนตาม Scrollbar ทางขวา
โค้ดส่วนที่ 1: <style type="text/css">#topbar{
position:absolute;
border: 0px solid black;
padding: 0px;
width: 160px;
visibility: hidden;
z-index: 100;
}
</style><script type="text/javascript">
var persistclose=1 // ให้ใส่เป็น 0 หรือไม่ก็ 1 (โดย 0 หมายถึง เมื่อกดปิดแล้ว กด REFRESH กรอบข้อความจะขึ้นมาอีก แต่ถ้า 1 กรอบข้อความจะไม่ขึ้นมาอีกแล้ว)
var startX = 1170 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านซ้าย
var startY = 10 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านบน
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
var verticalpos="fromtop"
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
โค้ดส่วนที่ 2: <div visibility: visible;" id="topbar">
<td align="right"> <div > <a href="#" onClick="closebar(); return false"><font color="#FF0000"><strong>Close</strong></font></a> </div> </td>
<a target="_blank" href="ใส่ลิงก์ URL ของแบนเนอร์" rel="nofollow"><img src="ใส่ URL รูปภาพแบนเนอร์" width="160" height="600" /></a></div>
3. โค้ดเลื่อนตาม Scrollbar ทางซ้ายและขวา
โค้ดส่วนที่ 1: <style> .white_content1 {
position: fixed;
left: 29px;
z-index: 1030;
top: 5px;
padding: 2px;
background-color: white;
-webkit-box-shadow: 0 0 20px 4px #000000;
box-shadow: 0 0 0px 0px #000000;
}
.white_content2 {
position: fixed;
right: 29px;
z-index: 1030;
top: 5px;
padding: 2px;
background-color: white;
-webkit-box-shadow: 0 0 20px 4px #000000;
box-shadow: 0 0 0px 0px #000000;
}
</style>
โค้ดส่วนที่ 2: <div class='white_content1' id='light1' style='display: block;'>
<p style="text-align: right;">ปิดโฆษณานี้<a href="javascript:void(0)" onclick="document.getElementById('light1').style.display='none'"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png" width="13" height="13"></a></p>
<a target="_blank" href="ใส่ลิงก์ URL ของแบนเนอร์" rel="nofollow"><img src="ใส่ URL รูปภาพแบนเนอร์" width="160" height="600" /></a></div>
<div class='white_content2' id='light2' style='display: block;'>
<p style="text-align: right;">ปิดโฆษณานี้<a href="javascript:void(0)" onclick="document.getElementById('light2').style.display='none'"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png" width="13" height="13"></a></p>
<a target="_blank" href="ใส่ลิงก์ URL ของแบนเนอร์" rel="nofollow"><img src="ใส่ URL รูปภาพแบนเนอร์" width="160" height="600" /></a></div>
*** ลองนำไปปรับใช้งานกันดูครับ ***
ไม่มีความคิดเห็น:
แสดงความคิดเห็น