วิธีติดตั้งโฆษณาลอย (Floating Ads) บน blogger

สอนทำบล็อก
หากบล็อกของคุณมีผู้สนับสนุน หรือการทำบล็อกของคุณเกี่ยวข้องกับการหารายได้ ก็ย่อมอยากจะติดตั้ง โฆษณาเหล่านั้นลงในบล็อกของคุณแน่นอน

บทความนี้จึงขอนำเสนอวิธีติดตั้งโฆษณาแบบ Floating ซึ่งเราก็คงเคยเห็นอยู่บ่อยตามเว็บไซต์ทั่วไปที่มีการโฆษณาให้กับผู้สนับสนุนของเขา


หากท่านใดยังนึกไม่ออกลองคลิกไปดูได้ตามลิงค์ด้านล่าง




การติดตั้งโฆษณานี้จะอาศัยการทำงานของจาวาสคริปต์ร่วมกับ Layer ซึ่งทำได้ดังนี้

ขั้นตอนการติดตั้ง

ก่อนอื่นให้ Login เข้าไปที่ Blogger
(หากใครที่ไม่ชำนาญในการแก้ไขแม่แบบให้ Backup แม่แบบเอาไว้ก่อน และเมื่อทำการ Backup เสร็จแล้ว)

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้อง ขยายแม่แบบเครื่องมือ

สอนแต่งบล็อก

ค้นหา (กด Ctrl+F) โค้ด </body> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<script language='JavaScript' type='text/JavaScript'>
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

<script>
if (!document.layers)
document.write(&#39;&lt;div id=&quot;divStayTopLeft&quot; style=&quot;position:absolute&quot;&gt;&#39;)
</script>

<layer id='divStayTopLeft'>

<DIV id='isFloat1' style='padding:0px; Border-Top:0px solid #C0C0C0;Border-Left:0px solid #C0C0C0;Border-Bottom:0px solid #000;Border-Right:0px solid #000;Text-Align:center;'>

<div align='right' style='text-align:right ; width:215px;'>
<a onClick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);' style='cursor:hand'><STRONG>X ปิดหน้าต่างนี้</STRONG></a>
  <a href='ใส่ LinK ไปยังผู้สนับสนุน' target='_blank'><img height='255' src=' ใส่ URL ของรูปหรือโฆษณา' width='215'/></a>
</div>

</DIV>

</layer>

<script src='http://hackublog.googlecode.com/files/FloatingAds-bottom.js' type='text/javascript'/>


จากนั้นบันทึกแม่แบบก็เป็นอันจบขั้นตอน


หมายเหตุ

1. โค้ดระหว่าง Tag <layer id='divStayTopLeft'>…..</layer> สามารถปรับเปลี่ยนได้ตามใจหากจะใส่เป็นข้อความ ตาราง เมนู หรือ ใส่โค้ดของ video ก็ได้ ลองพลิกแพลงใช้ดูครับ

2. ตัวเลขความกว้างความสูง สีน้ำเงินและสีเขียวก็สามารถปรับเปลี่ยนได้ตามความต้องการ

3. หากต้องการเปลี่ยนตำแหน่งความสูงต่ำของโฆษณา ก็สามารถปรับเปลี่ยนตัวเลขสีชมพู ที่บอกระยะห่างตามแกน y และ แกน x ได้จากโค้ดด้านนี้



/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com
This notice must stay intact for use
*/
//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function JSFX_FloatTopDiv()
{
    var startX = 5,
    startY =250;
    var PX='px', d = document;
    function ml(id)
    {
        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        if(d.layers){el.style=el,PX='';}
        el.sP=function(x,y){el.style.left=x+PX;el.style.top=y+PX;};
        el.x = startX;
        if (verticalpos=="fromtop")
        el.y = startY;
        else{
        el.y = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
        el.y -= startY;
        }
        return el;
    }
    window.stayTopLeft=function()
    {
        if (verticalpos=="fromtop"){
        var pY = window.innerHeight ? pageYOffset : ietruebody().scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = window.innerHeight ? pageYOffset + window.innerHeight : ietruebody().scrollTop + ietruebody().clientHeight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
}
JSFX_FloatTopDiv();



และทำการ upload จาวาสคริปต์ที่แก้แล้วขึ้น Server ถ้าไม่มี Server ของตนเองให้คลิกเพื่อศึกษาวิธีฝากจาวาสคริปต์ที่นี่

ผมก็ขอจบอีกหนึ่งเทคนิคในการทำบล็อกเพียงเท่านี้ครับ

เครดิตสคริปต์ : javascript-fx.com + dynamicdrive.com
Hack to blogger : Hackublog

ตอนนี้มีความคิดเห็น : 29 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. หากต้องการเปลี่ยนตำแหน่งความสูงต่ำของโฆษณา ก็สามารถปรับเปลี่ยนตัวเลขสีชมพู ที่บอกระยะห่างตามแกน y และ แกน x ได้จากโค้ดด้านนี้
    var startX = 5,
    startY =250;
    พี่คับผม หาพวกนี้ไม่ได้คับ กดctrl+f แล้วก็หาไม่เจอ คับ ไม่ทราบว่า พอจะมี วิธีอื่น บ้างไม๊คับ ขอบคุณคับ

  1. พี่HackBlogคับ
    ถ้าอยากให้ ป้าย ไปอยู่ ติดกับ แทบเลื่อน ทางขวามือ จะแก้ตรงไหนหรอคับ ขอบคุณคับ

  1. @ AngelofDeath: พี่เขียนไว้ในหมายเหตุข้อ 3 แล้วครับ
    1. แก้โค้ดในหมายเหตุ 3 ตรงโค้ด
    var startX = 5,
    startY =250;

    ซึ่ง อาจจะแก้เป็น

    var startX = 800,
    startY =250;

    2. เอาโค้ดที่แก้แล้ววางรวมกับโค้ดข้างล่าง

    <script type='text/javascript'>
    //<![CDATA[

    ใส่โค้ดที่แก้แล้ว ตรงนี้

    //]]>
    </script>

    3. เอาโค้ดที่รวมแล้วในข้อ 2 ไปแทน ที่โค้ด
    <script src='http://hackublog.googlecode.com/files/FloatingAds-bottom.js' type='text/javascript'/>


    ถ้ายังไม่ได้อีกโปรดแจ้งบล็อก มาด้วยครับเดี๋ยวทำโค้ดให้

  1. ได้แล้วคับพี่ อิอิ นี่ blog ของผมคับ http://oho-movie.blogspot.com/ (แบบว่าไม่มีความรู้ แต่อยากหาเงินเอาไว้ใช้ หวังว่าคงไม่ว่ากันนะคับพี่ชาย)

  1. ไม่คิดจะเขียนหนังสือขายบ้างเหรอครับ อธิบายได้ดีที่สุดตั้งแต่เคยอ่านมา ทั้งจากเว็บ และ หนังสือทุกเล่มที่เคยอ่านมาเลย

  1. @ storygoo : ขอบคุณมากครับ จะลองเขียนดูตามคำแนะนำครับ

  1. ทำได้ละครับ ขอบคุณมากครับ แต่ถ้าต้องการ เปลี่ยนเป็นอยู่ทางขวามือแก้โค๊ดยังไง ครับ

  1. อืมม ได้ละครับ ทั้งซ้ายและขวา ขอบคุณมากครับ

  1. ผมใส่โค้ดอันล่างแล้วมัน eror อ่ะครับ
    ทำยังไงหรอครับ

  1. @ BallChill : ตอนนี้จาวาสคริปต์ยังใช้งานไม่ได้ครับ ถ้าจะทำต้องนำโค้ดจาวาสคริปต์ในหมายเหตุไป upload เองครับ ลองอ่านบทควงามในหมวดหมู่จาวาสคริปต์อีกทีนะครับ

  1. http://wallpapertouchscreens60v5.blogspot.com/

  1. พี่HackBlog ถ้าหากจะทำโฆษณา ทั้ง ซ้าย และ ขวา จะเพิ่มยังงัยครับตอนนี้ได้ทางซ้ายแร้วครับ

  1. ความรู้เพียบเลยค่ะ
    ขอบคุณมาก ๆ

  1. ทำเเล้วเเต่มันไม่ลอยขึ้นมาหน้าจอ เเต่กลับไปแอบที่ใต้บล็อก
    มันยังงัยกันครับคุณบล๊อกเกอร์ ช่วยที

  1. รูปโฆษณา
    ให้มันมี ด้านซ้ายอันหนึ่ง ด้านขวาอันหนึ่ง

    ต้องทำไงครับ ช่วยบอกวิธีแก้ หรือ ทำก็ได้ครับ ขอบคุณครับ :D

  1. อยากได้โค้ดที่อยู่ขวามืออ่ะครับ แต่แก้ไม่ถูกเลย รบกวนด้วยครับ

  1. http://pageslikepageslove.blogspot.com/

  1. พี่ ครับ เอา URL รุปมา จาก ไหน เเล้ว ใส่ ตรง ไหน

  1. อยากให้ใส่ได้หลายๆภาพทั้งซ้ายและขวาอะทำไง

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. I found a great Internet company - Cashfiesta.com - that has created a product everyone can benefit from. They pay you while you work or play on your computer. All you need to do is keep their software - the FiestaBar™ - active while you are online. They even pay you when your friends are using their computers.

    Unlike other companies, Cashfiesta gives you control over how much money you earn. They have an individual payrate based on the number of Special Offers you sign up for. As some of these offers are free, you can increase your payrate up to 33 times without spending a penny.

    It's free and easy to join and your privacy is completely protected. Here is the link, enjoy and happy money making.

    http://www.cashfiesta.com/php/join.php?ref=emmina

    Check it out!

  1. ของผมไม่เลื่อนตาม

  1. ของผมไม่เลื่อนตามเหมือนกันครับ มันยุข้างล่างสุดเลย

  1. พี่ครับ ผมทำได้เเล้ว แต่ผมอยากให้มัน โชว์ 2 ข้างพร้อมกันจะได้ไหมครับ

  1. งง มาก โค้ดข้างล่าง ตรงนี้ ฝากตอบด้วยครุบ อันข้างล่างไม่ทราบว่ามีไวทำไมครับ ขอบคุงครุบ

  1. ถ้าต้องการ ติดหลายป้ายทำยังไงหรอครับ

  1. คุณ ยังอยู่ไหมครับบ ผม งง มากกก

  1. ทำแล้วไม่เลื่อน ^_^ สงสัยคงไม่มี Script อ่ะครับ

  1. ทำไมโฆษณาผมไม่ขึ้นครับ ทำตามขั้นตอนแล้ว ช่วยหน่อยนะครับเพื่อนๆ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel