Sunday, December 4, 2011

How To Create Floating Ads On Blogger/Blogspot

How To Create Floating Ads On Blogger/Blogspot
Floating top bar ads is an ads in the box that will be always on the top of your blog post until it is closed. For implementation with adsense, I suppose you toread Google policy about Adsense implementation policy.
1. Login to Blogger. Got to your blog --> Design --> Edit HTML.
2. Place the script below at position after <head> dan before </head>. Don't forget to escape this html code so it can be implemented in blogger.


&lt;style type=&quot;text/css&quot;&gt;
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 338px;
visibility: hidden;
z-index: 100;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
/***********************************************
* Floating Top Bar script- &#65533; Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 320 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos=&quot;fromtop&quot; //enter &quot;fromtop&quot; or &quot;frombottom&quot;
function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(&quot;;&quot;, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie=&quot;remainclosed=1&quot;
document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;
}
function staticbar(){
barheight=document.getElementById(&quot;topbar&quot;).offsetHeight
var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)
el.style.visibility=&quot;visible&quot;
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};
el.x = startX;
if (verticalpos==&quot;fromtop&quot;)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==&quot;fromtop&quot;){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(&quot;stayTopLeft()&quot;, 10);
}
ftlObj = ml(&quot;topbar&quot;);
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener(&quot;load&quot;, staticbar, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, staticbar)
else if (document.getElementById)
window.onload=staticbar
&lt;/script&gt;


3. Save Template
4. Click Layout
5. Click Add Gadget
6. Choose HTML/JavaScript
7. Place script below


<div id="topbar">
<a href="" onClick="closebar(); return false"><img src=" http://i729.photobucket.com/albums/ww298/trimulyawan/close.gif " border="0" /></a>
---- Paste your adsense here ----
</div>


8. Save

Source: http://www.dynamicdrive.com/

No comments:

Post a Comment