Video Bar

Loading...

Friday, December 17, 2010

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...

14 comments/pendapat:

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

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

Tam said...|Reply This Comment|

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

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

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

Tam said...|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

Anonymous said...|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

Anonymous said...|Reply This Comment|

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

Tam said...|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..

Anonymous said...|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 said...|Reply This Comment|

welcome to all...

Anonymous said...|Reply This Comment|

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

Tam said...|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 said...|Reply This Comment|

wow, great post and info

keep posting stuff like this

i really like it.

kredit info

Tam said...|Reply This Comment|

thanks,welcome,anytime..

Anonymous said...|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?

Recent Comments

Top Posts

Related Posts Plugin for WordPress, Blogger...