Guide 1 - Log in into your blogger account >> Go to Blogger Dashboard
Guide 2 - Go to Layout tab
Guide 3 - Click on Add Gadget >> HTML/JavaScript
Guide 4 - Now paste the following code
Watch the live demo!
....
J
R
P
P
A
G
E
C
O
L
L
E
C
T
I
O
N
|
<style> #jrpcollectionads { height:30px; width:auto; background: #333333 url('..'); background-repeat:repeat-x; text-align:left; padding-top:4px; } #bsadsbase{ height:600; margin:0auto; width:160px; background:#fff; border-bottom:2px #ffffff solid; border-right:2px #ffffff solid; border-left:2px #ffffff solid; text-align:center; padding:4px; } #bsadsheadline{ opacity:1.0; height:auto; width:auto; position:fixed; top:15px; left:10px; border-bottom:1px #ffffffsolid; border-bottom:0px blue solid; color:#ffffff; padding:0px; z-index:1001; font-size:13px;} </style> <script type="text/javascript"> function getValue() { document.getElementById("bsadsheadline").style.display = 'none'; } </script> <div id="bsadsheadline"> <div id="jrpcollectionads"> <span style="color:#ffffff;font-size:13px;font-weight:bold;text-shadow:white 0.1em 0.1em 0.1em"></span> <span style="color:#ffffff;font-size:13px;font-weight:bold;text-shadow:white 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://jrpcollection.blogspot.com/2013/06/mashable-sharing-widgets-how-to-add.html" target="_blank" onclick="getValue()">close(x)</a></span> </div> <div id="bsadsbase"> <h3></h3> <p align="left"><h3></h3></p> <p> Ads Code Here <br/></p></div></div> |
Note :
- Change Ads Code Here with your desire ad code
- Change 600 160 for the height and width you want
- Change left: with right to float right side of your blog