Create Banner Beautiful For Blogger

Create Banner Beautiful For Blogger

   To get a good ad, I believe all of you are interested in blog design are keen to get this. Banner will help save land and create attention by beautiful effect. Today new tech online will show you a very nice piece of banner without affecting the loading speed of the website. You can see a demo outside technewonline.com homepage.
To create banner ads on the homepage as technewonline.com please follow these steps:

Steps 1:  On Design >> add a widget the HTML / javacript
Steps 2: 
Inserted in the code below:

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeoTN4hoYuE7p8OZMyG-4zv07KgG0IiIYNrFXP1d1OkLH-UH96PNHoPYHlzKO6QdOSOU5Wfa3POWIKAZ5DMD0UBlClVEU0Haz2kzmOvfjQn1Nq95OLwiMwj0rI1pBLSnOHGIO1kKWMnZs/s640/cell-phone.jpg" width="125" /></a> 
</div> 
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJvPWT7DNH_Mz_CshWnuGcD7e-z4eIXPWcARSApYnmM4xxEEOY67clKcGD3hOMx-q8iz8vap8tnROMEQxE2FghyhdVuVXy3MQMePDptlu28Uw69h8D3TLPb1x_EoW2yzUCE3BI2eIpnk/s640/Laptop-hot.jpg" width="125" /></a> 
</div> 
<script> 
function FloatTopDiv() 
{ 
startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80; 
startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80; 
var d = document; 
function ml(id) 
{ 
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 
el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';}; 
el.x = startRX; 
el.y = startRY; 
return el; 
} 
function m2(id) 
{ 
var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 
e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';}; 
e2.x = startLX; 
e2.y = startLY; 
return e2; 
} 
window.stayTopLeft=function() 
{ 
if (document.documentElement && document.documentElement.scrollTop) 
var pY = document.documentElement.scrollTop; 
else if (document.body) 
var pY = document.body.scrollTop; 
if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;}; 
ftlObj.y += (pY+startRY-ftlObj.y)/16; 
ftlObj.sP(ftlObj.x, ftlObj.y); 
ftlObj2.y += (pY+startLY-ftlObj2.y)/16; 
ftlObj2.sP(ftlObj2.x, ftlObj2.y); 
setTimeout("stayTopLeft()", 1); 
} 
ftlObj = ml("divAdRight"); 
//stayTopLeft(); 
ftlObj2 = m2("divAdLeft"); 
stayTopLeft(); 
} 
function ShowAdDiv() 
{ 
var objAdDivRight = document.getElementById("divAdRight"); 
var objAdDivLeft = document.getElementById("divAdLeft"); 
if (document.body.clientWidth < 1000) 
{ 
objAdDivRight.style.display = "none"; 
objAdDivLeft.style.display = "none"; 
} 
else 
{ 
objAdDivRight.style.display = "block"; 
objAdDivLeft.style.display = "block"; 
FloatTopDiv(); 
} 
} 
</script> 
<script> 
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>"); 
</script>

In the code above:

• <a href="#"> : when readers links to click on. Replace # with your link to the appropriate page
• <img src="…"/> : banner you want to display you can manually design a banner for your desired just use photoshop software to edit a little collage is going to be a banner like that.
• width = " 125 " : the width of the banner. There are two values ​​are marked with red
• MainContentW = 1000: Web page width. There are two values ​​are marked with a green
• LeftAdjust = 5 : the distance from the left edge to the site banner
• RightAdjust = 5: to cover the distance from the site to banner
• TopAdjust = 10 : distance from the edge of the banner on the site

Note: Due to utility values ​​used to determine the location of the banner adjustment compared with the site, so the aesthetics of utility will depend on the resolution of the computer screen.

Steps 3 : Save and Done.


I wish you success.