Friday, October 5, 2018

October 05, 2018

how to add floating banner into your blogger blog

how to add floating banner into your blogger blog
Would you remember the very first day that you thought to start your own web or blog site? yes, I think still you have remembered that day of start your own blog.  In my blogging story  curious and interested about blogging drive me to start my own  blog. Like you, I am also start my blog site as a hobby. Yes, most Bloggers start a blog sites as a hobby. With the time improve of your blog site you can earn money by using your blog traffic. Also most of people interest to start a blogging for make friends, online store sales and make money. So bloggers can earn money from blogging by advertising or containerizing your blog traffic.
    

We can use our blog site spaces as ad space to advertising or promote banners. That banner advertising is one of the main way to earn money by blogging. In that point we should be carefully to putting ads. That ads should visitors can easily see then that gives a higher chance of being clicked.
We can use lot of techniques to put banner in our blog sites. You easily putting them on the header, below post header, between the posts or sidebars.Would you know rather than the above methods you can add floating banners that you can put ads on it. If you finding How to add floating banner into your blogger blog that article is for you. 

Floating ad is very effective way for bloggers who wants to make their sites Ads friendly. Also it helps to save your space of websites. Not only that also it helps to increase ads revenue rapidly. If you place the ads above the fold you can generating more ad revenue. So that floating banner methods will help you to place your advertisement above the fold. Also it helps to increase your ad revenue.
  
 What are the advantages of using floating banners?   
  • Attractive look of banner ads that makes visitors click on ads.
  • Its very easy to install and uninstall from blog site 
  • That gives chance to increase ads revenue earnings
  • Readers can easily see your ads
  • It has a close button, if readers not interested about floating banner ads they can close that floating banner.      

That floating banner ads float with additional close button. That close button serves as an alternative gadget. If visitor doesn’t interest or dislike to that floating banner, he or she can close or block that banner by clicking close button and continue his or her reading.
So let’s see 

how to add floating banner into your blogger blog


How to add a floating 250*300 banner into Right side bottom corner in blogger?

Step 01.  Go to your Blogger account
Step 02.  Go to your Blogger Dashboard  
Step 03.  Go to Layout tab
Step 04.  Then Click on Add a Gadget and select “HTML/JavaScript” Gadget.
Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<style>
#btftopbar {
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#adsground {
height:100%;
margin:0 auto;
width: 100%;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:centar;
padding:4px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:350px;
right:0px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="btftopbar">

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="https://www.thewonderspot.com/2018/10/add-floating-banner.html" target="_blank" onclick="getValue()">close(x)</a></span>
</div>
<div id="adsground">
<h3></h3>
<p align="left"><h3></h3></p>
<p>
Add your Ad code here
<br/></p></div></div>

Customize
  • Replace your ad code with “ Add your Ad code here”
  • If you want to float it on the left side, Change “right
  • You can customize your floating banner by changing values in top:350px; right:0px;
  • You can change the width and height by replacing values in height:100%; width: 100%;   ( height:600; width: 160px;)

Step06.  Finally click on the save button and save gadget.


How to add two floating banners on both left and right side in blogger?


Step 01.  Go to your Blogger account
Step 02.  Go to your Blogger Dashboard 
Step 03.  Go to Layout tab
Step 04.  Then Click on Add a Gadget and select “HTML/JavaScript” Gadget.
Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script><br />
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script><br />

<!--start: floating ads https://www.thewonderspot.com/--><br/>
<div id="leftads" style="width:160px; height:600px; text-align:left; position:fixed; z-index:1001; bottom:5%;left:1%;">
<div>
<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-right:10px"><a href="https://www.thewonderspot.com/2018/10/add-floating-banner.html" target="_blank" onclick="document.getElementById('leftads').style.display = 'none';">[x]</a>
</a>
</div>

<!--Start Left Ad -->
Add you Ad Code Here
<!--End of Left Ad -->
</div>

<div id="rightads" style="width:160px; height:600px; text-align:right; display:scroll;position:fixed; z-index:1001; bottom:5%;right:1%;">
<div>
<a href="#" id="adclose" style="color:#333333;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;padding-top:3px;padding-left:10px"><a href="https://www.thewonderspot.com/2018/10/add-floating-banner.html" target="_blank" onclick="document.getElementById('rightads').style.display = 'none';">[x]</a>
</a>
</div>
<!--Start Right Ad-->
Add you Ad Code Here
<!--End of Right Ad -->
</div>

Customize
  •    Replace your ad code with “ Add your Ad code here
  •   You can customize your floating banner by changing values in bottom:5%;left:1%  (bottom:0%;left:1%)
  •    You can change the width and height by replacing values in "width:160px; height:600px ( width: 250px; height:300px; )

Step06.  Finally click on the save button and save gadget.


How to add  floating banners on Footer or bottom in blogger?

Step 01.  Go to your Blogger account
Step 02.  Go to your Blogger Dashboard 
Step 03.  Go to Layout tab
Step 04.  Then Click on Add a Gadget and select “HTML/JavaScript” Gadget.
Step 05.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

 

<script type='text/javascript'>


$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});


</script>


<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>


<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>


<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>


<a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner ad' src='Banner URL'/></a>or  Add your Ad code here

</div> 

</div>



     Customize

  •  Customize your ad code with <a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner ad' src='Banner URL'/></a>or Add your Ad code here
  • You can change the width and height by replacing values in " max-width:728px;height:auto; ( max-width:990px;height:90px;)

Step06.  Finally click on the save button and save gadget.

Ok with that above methods you can easily add floating banner for your blogger as you wish.

If you want to add a personal ad banner image, then use below code and instructions.

Follow the above steps and Replace below personal customize banner ad code with Add your Ad code here.

           <a title="Alt Text" href="Ad URL" target="_blank"><img alt="Alt Text" src="Banner Image URL" width="250px"  height="300px"/></a><br/>

Customize
  •   Replace Alt Text with your banner name or advertisement name.
  •   Replace Ad URL with banner ads destination URL
  •   Replace Banner Image URL with your d banner image
  •   Customize the ad banner height and width as you wish by replacing width="250px" height="300px"

Ok my friends. I think that article have helpful you to fix the issue about how to add a floating banner into your blogger blog.
That article will help you to placing the floating ad banners as you wish.

For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger