Member Zone

ยินดีต้อนรับสู่เว็บ ครูสำลีดอทคอม

คลิปวีดีโอน้องไดมอนด์

หนังสือครูสำลี

book-banner

mksiteservice235x100

ครูสำลีบน Facebook

Krusamlee QR Code

qrcode

mksiteservice235x200

สถิติเว็บ-Web Statistic

  • Current Active Users1
  • Active Guests1
  • Active Registered0
  • Unique Visits Today102
  • Unique Visits Yesterday67
  • Visits This Week510
  • Visits Previous Week567
  • Total Articles207
  • New Articles This Week0

 

Faq-banner

( 2 Votes ) 

จุดประสงค์ :

- เพื่อเป็นการประกาศ / โฆษณา / ทำ banner ต่างๆลงเว็บไซต์ของเรา

คำเตือน :

- ควรสำรองข้อมูลไฟล์ที่เราจะทำการแก้ไขไว้ทุกครั้ง กันพลาด

- บทความนี้ ผมทดลองด้วยตัวเองโดยทดสอบกับ joomla 2.5 ใช้ได้ไม่มีปัญหา


ตัวอย่าง :

floating-ss

 

เริ่มกันเลย :


1. นำโค้ดด้านล่างนี้ไปไว้ใต้แท็ก <head> ในไฟล์ index.php ของเท็มเพลทที่เราใช้อยู่

 

<style type="text/css">

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: yellow;
width: 400px;
visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

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;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
    barheight=document.getElementById("topbar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    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 - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
        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. นำภาพปุ่ม close.png ไปไว้ที่เว็บเราตามเส้นทางนี้  images/ close.png โดยดาวน์โหลดปุ่มได้จากที่นี่
http://www.krusamlee.com/home/images/close.png
(หมายเหตุ..ท่านสามารถหาภาพอื่นๆแทนได้ ตามความชอบของท่าน)

 

3. นำโค้ดด้านล่างนี้ไปไว้ใต้แท็ก <body> ในไฟล์ index.php ของเท็มเพลทที่เราใช้อยู่<div id="topbar">
<a href="/home/" onClick="closebar(); return false"><img src="/home/ images/close.png " border="0" /></a></br>
ใส่ข้อความของคุณที่ต้องการประกาศลงตรงนี้
</div>

 4. เป็นอันเสร็จพิธี

ปล.  ท่านสามารถปรับแต่งในส่วนของ ปุ่มภาพ close.png / ข้อความประกาศ / สีพื้นหลัง / สีเส้นขอบ / และสามารถแทรกแท็กรูปภาพต่างๆ เช่น<img src="/home/images/banners/floating-banner.jpg" width=300 height=300 alt="" border="0">ลงในกล่องประกาศ ได้ตามที่ท่านชอบครับ ส่วนโค้ดต่างๆ ไม่ต้องไปยุ่ง จะเป็นการดีครับ

 

ที่มา : dynamicdrive.com

 

ข่าวน่าสนใจอื่นๆที่เหลือ

ขอเชิญร่วมอบรมสัมมนา "สอนอย่างไร ให้เด็กอ่านออก เขียนได้" (เป็นอัจฉริยะด้านภาษา อ่านได้ตั้งแต่วัยย...
สพฐ.ถกกรอบหลักสูตร 'วิชาประวัติศาสตร์-หน้าที่พลเมือง' ชี้ต้องแยกออกจากกัน หาชั่วโมงเรียนที่เหมาะสม ไ...
หลานไดมอนด์เพิ่งเข้าโรงเรียนเป็นวันแรกที่ชั้นอนุบาล 1 สาธิตมหาวิทยาลัยราชภัฏมหาสารคาม เมื่อวานนี้ไ...
น้องไดมอนด์นับเลข 2 ภาษา

น้องไดมอนด์นับเลข 2 ภาษา

31.03.2557 | ครูสำลี
3 ฮิต: 449
น้องไดมอดน์ เด็กอัจฉริยะ นับเลข 2 ภาษา จริงๆภาษาไทย นับได้ถึง 200 แล้ว แต่ภาษาอังกฤษยังถึงแค่ 10 แต่...
คาราโอเกะ เพลง อำลาอาลัยจากใจรุ่นน้อง // จัดทำขึ้น โดยครูสำลี รักสุทธี เพื่อเป็นเพลงอำลาสำหรับนักเร...
น้องไดมอนด์ทดสอบอ่านคำจุดเน้นภาษาไทย ป.2...
ดูข่าวทั้งหมด...Joomla! Україна

bannerbuttom-1

bannerbuttom-2

bannerbuttom-3