How To Create Floating Ads On Blogger/Blogspot
Diposting oleh Unknown
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.
01 | <style type="text/css"> |
02 | #topbar{ |
03 | position:absolute; |
04 | border: 1px solid black; |
05 | padding: 2px; |
06 | background-color: lightyellow; |
07 | width: 338px; |
08 | visibility: hidden; |
09 | z-index: 100; |
10 | } |
11 | </style> |
12 | <script type="text/javascript"> |
13 | /*********************************************** |
14 | * Floating Top Bar script- � Dynamic Drive (www.dynamicdrive.com) |
15 | * Sliding routine by Roy Whittle (http://www.javascript-fx.com/) |
16 | * This notice must stay intact for legal use. |
17 | * Visit http://www.dynamicdrive.com/ for full source code |
18 | ***********************************************/ |
19 | var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session |
20 | var startX = 320 //set x offset of bar in pixels |
21 | var startY = 5 //set y offset of bar in pixels |
22 | var verticalpos="fromtop" //enter "fromtop" or "frombottom" |
23 | function iecompattest(){ |
24 | return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body |
25 | } |
26 | function get_cookie(Name) { |
27 | var search = Name + "=" |
28 | var returnvalue = ""; |
29 | if (document.cookie.length > 0) { |
30 | offset = document.cookie.indexOf(search) |
31 | if (offset != -1) { |
32 | offset += search.length |
33 | end = document.cookie.indexOf(";", offset); |
34 | if (end == -1) end = document.cookie.length; |
35 | returnvalue=unescape(document.cookie.substring(offset, end)) |
36 | } |
37 | } |
38 | return returnvalue; |
39 | } |
40 | function closebar(){ |
41 | if (persistclose) |
42 | document.cookie="remainclosed=1" |
43 | document.getElementById("topbar").style.visibility="hidden" |
44 | } |
45 | function staticbar(){ |
46 | barheight=document.getElementById("topbar").offsetHeight |
47 | var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; |
48 | var d = document; |
49 | function ml(id){ |
50 | var el=d.getElementById(id); |
51 | if (!persistclose || persistclose && get_cookie("remainclosed")=="") |
52 | el.style.visibility="visible" |
53 | if(d.layers)el.style=el; |
54 | el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; |
55 | el.x = startX; |
56 | if (verticalpos=="fromtop") |
57 | el.y = startY; |
58 | else{ |
59 | el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; |
60 | el.y -= startY; |
61 | } |
62 | return el; |
63 | } |
64 | window.stayTopLeft=function(){ |
65 | if (verticalpos=="fromtop"){ |
66 | var pY = ns ? pageYOffset : iecompattest().scrollTop; |
67 | ftlObj.y += (pY + startY - ftlObj.y)/8; |
68 | } |
69 | else{ |
70 | var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; |
71 | ftlObj.y += (pY - startY - ftlObj.y)/8; |
72 | } |
73 | ftlObj.sP(ftlObj.x, ftlObj.y); |
74 | setTimeout("stayTopLeft()", 10); |
75 | } |
76 | ftlObj = ml("topbar"); |
77 | stayTopLeft(); |
78 | } |
79 | if (window.addEventListener) |
80 | window.addEventListener("load", staticbar, false) |
81 | else if (window.attachEvent) |
82 | window.attachEvent("onload", staticbar) |
83 | else if (document.getElementById) |
84 | window.onload=staticbar |
85 | </script> |
3. Save Template
4. Click Layout
5. Click Add Gadget
6. Choose HTML/JavaScript
7. Place script below
1 | <div id="topbar"> |
2 | <a href="" onClick="closebar(); return false"><img src=" http://i729.photobucket.com/albums/ww298/trimulyawan/close.gif " border="0" /></a> |
3 | ---- Paste your adsense here ---- |
4 | </div> |
8. Save
0 komentar:
Silahkan komentar nya mas mba kece