โค้ด HTML ที่นำมาแจกนี้ สามารถนำไปใช้กับระบบของ Blogger หรือเว็บไซต์อื่น ๆ ที่ไม่มี Base CSS นะครับ ส่วนตัวผมทดสอบใช้งานกับ Blogger แล้วไม่มีปัญหาใด ๆ ใช้งานได้ปกติ
โค้ดจะมีด้วยกัน 3 ชุด สามารถเลือกอย่างใดอย่างหนึ่งไปใช้งานตามความเหมาะสมของเว็บไซต์คุณได้เลย
หมายเหตุ: ขนาดป้ายโฆษณา 160x600 สามารถเปลี่ยนขนาดของป้ายได้ ให้ค้นหาโค้ด width="160 และ height="600 เปลี่ยนที่ตัวเลข 160 และ 600 เป็นความกว้างความสูงตามที่เราต้องการ
1. คลิกไปที่ แม่แบบ แล้วคลิก แก้ไข HTML
2. ค้นหาโค้ด </body> วางโค้ดแบนเนอร์ก่อน </body> แล้วคลิก บันทึกเทมเพลต
1. โค้ดเลื่อนตาม Scrollbar ทางซ้าย
<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;
}
</style>
<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 height='13' src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png' width='13'/></a></p>
<a href="ใส่ลิงก์ URL ของแบนเนอร์" target="_blank"><img width="160" border="0" height="600" src="ใส่ URL รูปภาพแบนเนอร์" style="padding-bottom: 0px; padding-right: 0px; border-bottom-width: 0px; margin-bottom: -6px;"></a>
</div>
2. โค้ดเลื่อนตาม Scrollbar ทางขวา
<style>
.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>
<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 height='13' src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png' width='13'/></a></p>
<a href="ใส่ลิงก์ URL ของแบนเนอร์" target="_blank"><img width="160" border="0" height="600" src="ใส่ URL รูปภาพแบนเนอร์" style="padding-bottom: 0px; padding-right: 0px; border-bottom-width: 0px; margin-bottom: -6px;"></a>
</div>
3. โค้ดเลื่อนตาม Scrollbar ทางซ้ายและขวา
<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>
<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 height='13' src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png' width='13'/></a></p>
<a href="ใส่ลิงก์ URL ของแบนเนอร์" target="_blank"><img width="160" border="0" height="600" src="ใส่ URL รูปภาพแบนเนอร์" style="padding-bottom: 0px; padding-right: 0px; border-bottom-width: 0px; margin-bottom: -6px;"></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 height='13' src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-window-close-icon.png' width='13'/></a></p>
<a href="ใส่ลิงก์ URL ของแบนเนอร์" target="_blank"><img width="160" border="0" height="600" src="ใส่ URL รูปภาพแบนเนอร์" style="padding-bottom: 0px; padding-right: 0px; border-bottom-width: 0px; margin-bottom: -6px;"></a>
</div>
*** ลองนำไปปรับใช้งานกันดูครับ ***
ไม่มีความคิดเห็น:
แสดงความคิดเห็น