Hacks and Glitches Portal
  • Home
  • Forums
  • Request Tool
  • Terms of Use
  • Privacy Policy
  • ABOUT US
  • Contact Us
No Result
View All Result
  • Home
  • News
  • Reviews
  • Tips & Tricks
  • Life Hack
  • Games
  • Photography
  • Security
SUBSCRIBE
  • Home
  • News
  • Reviews
  • Tips & Tricks
  • Life Hack
  • Games
  • Photography
  • Security
No Result
View All Result
Hacks and Glitches Portal
No Result
View All Result
Home HTML

Tutorial : How to Create a Floating Ads for your Website

kalixto by kalixto
03/23
in HTML, News, Web Hosting, Wordpress
Reading Time: 2min read
A A
0
0
SHARES
14
VIEWS
Share on FacebookShare on Twitter

Table of Contents

  • Create A Floating Ads
    • Build The CSS
    • The Javascript
    • The HTML

Create A Floating Ads

Do you want an ads that is on fixed position on your websites? An ad that is floating wherever the visitors is going and still the ads is there. This will greatly increase your click-through-rate or CTR and even increase your ads earnings.

I am personally using this script on my other websites and CTR is just awesome. So I will be sharing you my very simple script on creating a floating ads perfect for your website of blogs.

View Demo

It’s very easy to achieve this result, you just need to tweak some CSS and HTML or just change my script to use it. Here we go.

Floating Ad

Build The CSS

Build the CSS you can customize this if you want. I’ll save this as FloatingAd.css

.myFloatBar {
	bottom:0;
	left:0;
	width:50%;
	position:fixed;
	padding-left:0;
}

button {
	background-image:url(https://i.imgur.com/FLKvPu5.png); /*HIDE BUTTON IMAGE*/
	background-repeat:no-repeat;
	background-position:50% 50%;
	height:20px;
	width:20px;
	border:none;
	padding:0;
}

button span {
	display:none;
}

The Javascript

Save this as ad.js

$(document).ready(function(){
  $("button").click(function(){
    $("ad").toggle(500);
  });
});

The HTML

Call the necessary files, be sure to view Demo page and put the below code anywhere before </body> tag. It’s simply easy.

 <div class=”myFloatBar”>
<ad><!– Begin Ad code –><some ads here><!– End Ad code –></ad>
<button></button>
</div>

Or download this file —-> DOWNLOAD ZIP

ShareTweetPin
Previous Post

[GET] All-in-One Pixel Gun 3D Hack Tool – Supports all Platform

Next Post

How to Get Instagram Followers Without Following Back

Related Posts

New york county family court

Court officer kills himself inside NYC court bathroom

03/02
2021 Golden Globe Awards Winners

2021 Golden Globes: Here Are All The Winners

03/01
tiger wood car crash first interview

Tiger Woods First Interview After the Car Crash

03/01
Trump acquiited by impeachment complaint

Trump Acquits Impeachment for the Second Time!

02/15
Next Post

How to Get Instagram Followers Without Following Back

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Home
  • Forums
  • Request Tool
  • Terms of Use
  • Privacy Policy
  • ABOUT US
  • Contact Us
Email Us at [email protected]

© 2021 Hackolo.com - Hacks and Glitches Portal HACKOLO.

No Result
View All Result
  • Home
  • News
  • Reviews
  • Tips & Tricks
  • Life Hack
  • Games
  • Photography
  • Security

© 2021 Hackolo.com - Hacks and Glitches Portal HACKOLO.

en_USEnglish
fr_FRFrançais es_ESEspañol de_DEDeutsch nl_NLNederlands ro_RORomână en_USEnglish