how to make float widget on blog

Today i want to share with you how to make float widget on blog,if you have join ppc program this widget is very good for ppc advertisement campaigns,because this widget will always visible although  visitor scroll to the bottom of blog. its simply simple just 1,2,3 steps.

1. Login to Blogger,click "Layout" button.
2. Then go to "Page Element" and choose "Add a Gadget -find HTML/Javascript"(up to you where you want to ad the gadget)
3.Copy Paste the Script bellow to 'add gadget' box :


------------------------------copy script bellow----------------------------------
<style type="text/css">
#gb{
position:fixed;
top:335px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:90px;
width:728px;
float:center;
cursor:pointer;
background:url('') no-repeat;
}
.gbcontent{
float:center;
border:1px solid #A5BD51;
background:#ff6600;
padding:1px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 125-w) : moveGB(125-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">
 

AD YOUR JAVASCRIPT/PPC ADVERTISEMENT HERE

<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
<a href="http://advertisement-2u.blogspot.com/2010/12/how-to-make-float-widget-on-blog.html" target="_blank">
[Get Widget]
</a>
</a></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.down = (125-gb.offsetWidth).toString() + "px";
</script></div>

----------------------copy script above-----------------------

You can edit the red color word/script above to make it seem with your blog background/width/height.find color code here fullcolor.
good luck and komen le sikit ye...

16 comments/pendapat:

JZ Business World berkata...|Reply This Comment|

baguslah tutorial ni.. leh tak nak share kat blog jz? nanti jz kredit sini :)

Tam berkata...|Reply This Comment|

@JZ Business World boleh je,sila sila sila...terima kasih kerana ziarah kesini ye..

JZ Business World berkata...|Reply This Comment|

tq ye! nanti jz try tutorial ni dulu. dah berjaya, jz akan published entry tutorial ni n kredit to tam.. :)

Tam berkata...|Reply This Comment|

beres JZ..Dalam tu ada dua cara,cara paling mudah ialah dengan paste kod tu kat html/javascript box atau cara kedua edit template di bgian Edit html dan letak kod ni dibahagian mana yg kita mahu..jgn lupa brtahu ye kalau dah dapat hasilnya..
CARA BUAT TULISAN BERGERAK

Tanpa Nama berkata...|Reply This Comment|

Great blog! I truly love how it’s easy on my eyes and the details are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your rss feed which ought to do the trick! Have a nice day!
watch the tourist online

Tanpa Nama berkata...|Reply This Comment|

how to make it float from the bottom ? not on the side of blog, can u ?

Tam berkata...|Reply This Comment|

@Anonymous
just put the code where u want it on your blog,to the bottom,center,left,right,top,above,bellow or where it can display,you just need to find the right place for easy to see,and click to preview it first before you save it,good luck..

Tanpa Nama berkata...|Reply This Comment|

I love advertisement-2u.blogspot.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
Webmaster of http://loveepicentre.com and http://movieszone.eu
Best regards

Tam berkata...|Reply This Comment|

welcome to all...

Tanpa Nama berkata...|Reply This Comment|

how do I manipulate where to put it? move it around where i find it suitable?

Tam berkata...|Reply This Comment|

find HEAD or BODY script and put the script above between HEAD and BODY script,before you save the template,preview it first...

kredit Info berkata...|Reply This Comment|

wow, great post and info

keep posting stuff like this

i really like it.

kredit info

Tam berkata...|Reply This Comment|

thanks,welcome,anytime..

Tanpa Nama berkata...|Reply This Comment|

This worked great on blogger thank you!
Is there a way to hide it when a shadow box pops up for images?

blog teknologi berkata...|Reply This Comment|

it worked, i have used it in my blog. thanks for sharing

Krish berkata...|Reply This Comment|

Your post has given very valuable informations,keep posting the same informations like this always. our is an one of the Ecommerce Web Applications Development Company , located in bangalore. Providing Ecommerce development services to the clients across india, clients can contact fnt software solutions complaints for their queries.

Catat Ulasan

Top Posts

Related Posts Plugin for WordPress, Blogger...