How to Create Simple Floating Ads with Close Button

Do you want to share?

Do you like this story?

Penulis: Kang Yasin | trik-tipsblog.blogspot.com

Maybe fellow bloggers have seen this tutorial, to my knowledge there is indeed more complex to use a lot of code, but here I try to give tips that are easier and very simple even for those of you bloggers who are new to coding could do it, ok?? "Kang Yasin" will soon provide tutor, you just follow the steps:

 
   1. Login Go to Blogger.com to your account each Surely
   2. Go to the Layout Tab
   3. Choose a Page Element
   4. Add a gadget Select the HTML / JAVASCRIPT
   5. And Copy the code below into it

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lMptnF-Ha8laGsZteOXMohzzkQBJE3rGn2ahKDD8yeLaI9FxdJTxcb8DdoMS7c34oMzWQCVE-2jNfx42ZODSLxSPhZllLbc6qX98RP7FpfH4ZeLXgG-S-km4Pv6VmIcSQKYOD1Kt2HE/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lMptnF-Ha8laGsZteOXMohzzkQBJE3rGn2ahKDD8yeLaI9FxdJTxcb8DdoMS7c34oMzWQCVE-2jNfx42ZODSLxSPhZllLbc6qX98RP7FpfH4ZeLXgG-S-km4Pv6VmIcSQKYOD1Kt2HE/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">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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.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][Klik 2x]:.
</a>
</div>
<center>

Enter the code in the ad or image that you want here

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

    6. Save

Good Luck :)

KupluckMerah