Floating ads using CSS

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=”http://3.bp.blogspot.com/-7dJNg81KFiA/VMRKMJ8QIEI/AAAAAAAAAt4/1j3wk2nXqVw/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=”http://3.bp.blogspot.com/-7dJNg81KFiA/VMRKMJ8QIEI/AAAAAAAAAt4/1j3wk2nXqVw/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!

Stylish Blogger Label using CSS

There are so much interesting you can do if you know much about CSS. For example for my current website design, I am using customize CSS to manage how the listing will behave. You can see a sample of it at my site now or at below image.

I am going to share you all the CSS here. Check out this CSS line:

.Label {  padding:4px 0;  width: 100%;  }
.Label ul{  padding:0;  margin: 0;  }
.Label ul li{ font-size:12px;clear: both;  display: inline;  float: right;  margin: 0 0 8px;  padding: 0; text-align:right; color: #00000;}
.Label ul li a{  background: #ff9900;  color: #FFFFFF;  display: block;  font-family:Verdana,serif;  padding: 4px 12px; font-size:11px;  }
.Label ul li a:hover{  background: #FFEF66;  color: #222222;  text-decoration: none;  }

 Just go Blogger Template Designer > Advance > Add CSS . This the location where you should paste. But remember to add the Label widget before or after you complete above step.

Need help? Post a comment below. 🙂