Did you ever see a clan-floating ads when you visit a site . In this post I will explain about How to Create Ads Float With Close Button. Of course, floating ads are easy to see by visitors and if the visitor does not want to see visitors can click the CLOSE button that already exist.
The following are the steps to create floating ads with close button on your site 1. Login to your Blogger account
2. Click Layout.
3. Click the Element Pages.
4. Then click Tanbah Gadgets and select HTML / JAVASCRIPT.
5. Next Copy and Paste Code Below At The depth.
<A onblur = "try {parent. deselectBloggerImageGracefully ();} catch (e) {} "href =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh201ZGK3lbRdngu37eqL_PkL-G515gPHH1le1W8K1CtvtYPg4jZ57-I8mHiHP2-hjNuGwzDUrDjwAufF_4ko-y9CYQscWL7quzS5k1zeJlxZUDL6GjhkPbNzkA26KhuCGMMH5DE49pOnk/s1600-h/Widget.JPG "> <img style = "margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src = "http://3.bp.blogspot.com/_xBW8tvgOXL4/S2eYQCC16pI/AAAAAAAABkE / f-qrOCcQZzU/s400/Widget.JPG "alt =" "id =" BLOGGER_PHOTO_ID_5433478876639914642 "border =" 0 "/> </ a>
<style type="text/css"> # Gb { position: fixed; top: 10px; z-index: +1000; } * Html # gb {position: relative;}
. Gbcontent { float: right; border: 2px solid # A5BD51; background: # ffffff; padding: 10px; } </ Style>
<script type="text/javascript"> showHideGB function () { var gb = document.getElementById ("gb"); var w = gb.offsetWidth; gb.opened? moveGB (0, 30-w): moveGB (20-w, 0); gb.opened =! gb.opened; } moveGB function (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.top = x.toString () + "px"; if (x0! = xf) {setTimeout ("moveGB (" + x + "," + xf +")", 10);} } </ Script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </ div>
<div class="gbcontent">
<div style="text-align:right"> <a href="javascript:showHideGB()"> .: [Close] [Click 2x]:. </ A> </ Div> <center>
then enter your ad code below
</ center>
<script type="text/javascript">
var gb = document.getElementById ("gb");
gb.style.center = (30-gb.offsetWidth). toString () + "px";
</ script> </ center> </ div> </ div>
6. change the script code in red with your ad code
7. so that it becomes as below
<A onblur = "try {parent. deselectBloggerImageGracefully ();} catch (e) {} "href =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh201ZGK3lbRdngu37eqL_PkL-G515gPHH1le1W8K1CtvtYPg4jZ57-I8mHiHP2-hjNuGwzDUrDjwAufF_4ko-y9CYQscWL7quzS5k1zeJlxZUDL6GjhkPbNzkA26KhuCGMMH5DE49pOnk/s1600-h/Widget.JPG "> <img style = "margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src = "http://3.bp.blogspot.com/_xBW8tvgOXL4/S2eYQCC16pI/AAAAAAAABkE / f-qrOCcQZzU/s400/Widget.JPG "alt =" "id =" BLOGGER_PHOTO_ID_5433478876639914642 "border =" 0 "/> </ a>
<style type="text/css"> # Gb { position: fixed; top: 10px; z-index: +1000; } * Html # gb {position: relative;}
. Gbcontent { float: right; border: 2px solid # A5BD51; background: # ffffff; padding: 10px; } </ Style>
<script type="text/javascript"> showHideGB function () { var gb = document.getElementById ("gb"); var w = gb.offsetWidth; gb.opened? moveGB (0, 30-w): moveGB (20-w, 0); gb.opened =! gb.opened; } moveGB function (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.top = x.toString () + "px"; if (x0! = xf) {setTimeout ("moveGB (" + x + "," + xf +")", 10);} } </ Script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </ div>
<div class="gbcontent">
<div style="text-align:right"> <a href="javascript:showHideGB()"> .: [Close] [Click 2x]:. </ A> </ Div> <center> </ Center>
<script type="text/javascript">
var gb = document.getElementById ("gb");
gb.style.center = (30-gb.offsetWidth). toString () + "px"; </ Script> </ center> </ div> </ div>
8. Done .. and try to see the results.
0 comment:
Post a Comment