Floating ads using CSS

December 23, 2015

In the events that you wanted to have a floating ads on your blogspot website, the use of CSS most probably will help a lot. You may refer to the screenshot below, or the live demo of it at this site.

Pretty simple actually.

1. Click [Add a gadget] from your blogger layout page. In does not matter where it is located.
2. Choose [HTML/Javascript] from the list of gadget available.
3. Paste the code given below.

<style type="text/css">

.advt {

color:black;

font-size:10px;

position:fixed;

left:25px;

margin-bottom:25px;

bottom:0;

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#advt").click(function() {

});

$("#closeadvt").click(function(event) {

event.stopPropagation();

$("#advt").fadeOut();

})

});

</script>

<div align="center" id="advt" class="advt"><span id="closeadvt" style="cursor:pointer;">Close X</span>

<p></p>

<a href="http://etoro.tw/1D3PSrW">    

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zOwoElynlXWHRu7XEusOxdQQ8mBrZN6CIyEl-XwSOUBypfLwFT1CFT2bBI3lri-VhXvg9LuseFNOO115UX4dDbk-ASrrbeWpKb9LzeiMkAkyCF51fqg0foBWD7w-ETQrJfEcTW7okQ/s1600/etoro_copy_trader1.png" />

</a>

</div>

The reason why it is does not matter is because the floating ads will be sitting at the bottom left of your blogspot website. (It also can be use other then blogspot as well if your know how to code it)

Please change these parameter accordingly:

1. To change your preferred link --> please find code <a href="http://etoro.tw/1D3PSrW">

2. To change the image --> please find code <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zOwoElynlXWHRu7XEusOxdQQ8mBrZN6CIyEl-XwSOUBypfLwFT1CFT2bBI3lri-VhXvg9LuseFNOO115UX4dDbk-ASrrbeWpKb9LzeiMkAkyCF51fqg0foBWD7w-ETQrJfEcTW7okQ/s1600/etoro_copy_trader1.png" />

3. To change the wording --> please find "Close X"

4. To move the floating ads to top-left --> please find code [bottom:0;], change to [top:0;]

Please change the CSS if you know what you doing. Nothing harm to playing around with the CSS. Have fun!