Friday, July 27, 2012
How To Add A Floating Clickable Banner To Your Blog
If you have a blog that you post on regularly, and also have a product or service you would like to promote to your audience on every post you've ever written, then a clickable floating banner or image is the perfect passive way to get people interested in your product, service or business opportunity. You can see a good example of this by looking at the bottom right hand corner of my page. This clickable banner scrolls with the page and shows up on all of my blogposts.
Step 1: Upload your image to your photobucket account. If you don't have a photobucket account you can signup for a free account by clicking the image below:
Step 2: Copy and paste the code below into your HTML/Javascript widget
<style>
#pageshare {position:fixed; bottom:5%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.znzpromotions.com/freews"><img style="width: 152px; height: 453px;" alt=""
src="http://i1178.photobucket.com/albums/x366/easyincometycoon/Untitled-31-1-1.jpg" /></a></div>
</div>
Step 3:
Replace with a link to the desired website you want you visitors to go when they click your banner.
Replace with a link to your photobucket image
Replace with the desired width and height of your image
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment