Banner code generator. Creating a banner code online is a simple and straightforward procedure. Why do you even need a banner on your website?
We add a banner to the site in order to advertise goods, services, promote a brand, and show off your product.
We add a banner to the site in order to advertise goods, services, brand promotion, and so on.
By placing the banner code on the site, we want to highlight something, thereby attracting attention.
How can banners be used practically?
Possible uses banner advertising can be as many as you like. Let's take a real life example. For example, you registered in affiliate program. As part of this program, you receive affiliate links, with the help of which you can promote a product.
As a rule, along with product promotion, in order to increase your income, you receive a referral link to attract other partners.
As materials in the affiliate program, you can be provided with ready-made banners. Thus, by placing the banner code on the network, for example on your website, you advertise the product and recruit your own partners.
Online service for receiving a banner codeWith this generator you can create and receive ready-made HTML code for your button or banner. If you cannot write the code yourself, then by filling out the form you will receive ready-made HTML in one click, which can be inserted into the site pages
|
It just so happens that I like working with CSS code, so it was interesting to make a button below that can be used as a banner, that is, a website:
div.sb ( text-indent: 0px; outline: 2px solid #f4e9ce; border: 2px solid #ddcca2; padding: 4px 3px 0px 3px; background-image: -moz-linear-gradient(#f4e9ce, #ddcca3); background -image: -webkit-gradient(linear, center top, center bottom, from(#f4e9ce), to(#ddcca3)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr= #ddcca3); background-image: -o-linear-gradient(top,#f4e9ce,#ddcca3); width: 260px; font-family: Impact, font-size: 200%; -weight: 100; text-transform: uppercase; font-weight: bold; span.sb1 ( border-bottom: #ddcca2 5px solid; color: #991500; margin: 0; text-shadow: -1px -1px white, 1px 1px #333; float: left; ) span.sb2 ( color: #ddcca2; margin: 11px 0; position: relative; text-shadow: 1px 1px 1px #000; float: left; ) Cheat Sheet
But since this harmless code can scare off users with its volume of characters, and the picture is not dynamic, using the program I photographed a section of the monitor screen with this button, thereby converting it into an image. You may not use this long way by drawing a picture in . But first you need to decide on the size of the future banner. They can be found in banner network, with which you plan to work. I was not limited by any boundaries.
- "Animation",
- "Layers" ( hotkey F7),
- "Tools".
There is no way to create layers for images in BMP and PNG formats, so you need to (for JPEG and GIF we skip this step):
 |
| Fig.1 Transfer the image in Photoshop. |
Due to the fact that it is easier to erase elements than to finish drawing, we will duplicate, selecting (Fig. 2), the layer that interests us.
Then, having selected (see blue background) one of the layers and indicating only the eye on it, we use the eyedropper (I) to automatically determine and set the selected color, and the pencil (B) to remove unnecessary fragments by painting them into the background palette. During this procedure, I like to zoom in on photographs: if you look at Fig. 1, it is 100%, but I point to 300% so as not to affect unnecessary elements. Also useful function is the transparency of the layer (Fig. 2).
Then for each frame we put an eye (eye) only on those layers that should be displayed on it.
And we will set for the frame the period of time during which the user will observe it by clicking the mouse on seconds.
Banner HTML5 is a banner that displays custom HTML content or an image. The HTML code can be the usual HTML page with styles and scripts. It fits in an iframe and has limited access to the contents of the site.
Using the "Banner HTML5" template, a banner can be added in two ways:
1. Having prepared only the image. The presence of a link to go to in the banner parameters regulates the clickability of the image.
2. Having prepared the HTML creative in the editor according to the instructions: or.
If both HTML code and an image are added to the banner, the HTML code will be shown.
Parameters configured when added to ADFOX:
- Width, height of the banner.
- Own css styles for the banner container.
1. Review the HTML code requirements
- The maximum allowed HTML file size is 65,000 bytes.
- It is preferable to place JavaScript and CSS inside the banner HTML code. If the resulting HTML code exceeds the maximum allowed size, then you need to reduce the code by moving JavaScript and CSS into separate files:
- save js and css code into separate files with the extension .js or .css;
- files should not exceed 300Kb in weight;
- upload the files to the “Files” tab of the advertising campaign and include the resulting links to the files in the HTML code.Example of connecting js and css files:
HTML code does not allow the use of relative file paths.
- A project can only contain one file with the .html extension.
- The maximum allowed number of files in a project is 50;
- Allowed file types in the project: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
- Maximum size of each file (also applies to files inside the archive):
- 300Kb;
- 1MB for video files. - File names must contain only numbers or letters of the English alphabet, and the underscore character. It is not allowed to use Russian letters, spaces, quotes and special characters in the file name;
- You cannot use Russian letters in the names of variables and objects.
The only exception is the text on the banner. - The format of the finished project is a zip archive.
Use high-resolution images, this will dramatically improve the quality of the banner on mobile device, although it will reduce the banner loading speed.
You can use SVG images. They are vector, which means they will look better on all devices - mobile and desktop. They also have a small file size and can be animated.
Acceptable image formats: png, gif, jpg, svg.
Maximum weight of one file: 300Kb.
2. Select the editor in which you will develop your HTML creative and click on the appropriate link. Prepare an archive with HTML creative according to the instructions:
Adobe Animate CC Editor - Single Button Banner
Adobe Animate CC Editor - Banner with Multiple Buttons
1. Download a template for a banner with several buttons
2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one)
3. When adding buttons or movie clips embedded in a scene, it is important to give them an instance name so that you can then add a click to the right buttons. We recommend using names button1 - button9.
See also:
Instructions for adding a button and assigning an instance name
Button on the main stage1. Create some object on the scene, for example, using the Rectangle Tool.
Then select it and context menu select "Convert to Symbol..."
2. In the dialog box that appears, select Type: Button, Name can be left unchanged, click Ok.
3. Assign an Instance Name to this button for the click to work.
4. Write the code for this button in Actions:
Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning this.button1 //End of the space for the buttons);
1. Let's say that the button is inside another symbol, for example inside a Movie Clip.
IN in this example this Movie Clip is given Instance Name "name"
2. By double click go inside name, there will be a nested button.
3. When specifying the path to such a button in Actions, you will need to add the Instance Name of the object after the this in which it is nested:
Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning this.name.button1 //End of the space for the buttons);
Instructions for creating transparent buttons
1. Select the desired element and convert it to a symbol
2. Enter a name and select Type: Button
3. Double-click on a symbol to go to it:
4. Insert keyframe into hit frame
5. Remove contents of up, over, down frames
6. Transparent button is ready:
4. Add an Actions layer to the project (we will add code for buttons to it)
5. Open a window to write code
Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning //End of the space for the buttons); setAdfox();
If the button is in the main scene, then write its instance name immediately after this, for example
This.button1
If the button is located inside a nested scene, then after this write first the instance name of the scene, and then the instance name of the button:
This.scene_instance_name.button2
Example of final code in the Actions layer:
Window.buttons.push(//Write the paths of the buttons separated by commas, adding this this.button1, this.scene_instance_name.button2 //End of space for buttons at the beginning); setAdfox();
7. The first button in the line of code will call the first link from ADFOX, the second - the second and so on.
Along with the HTML creative, provide the manager who will add the banner to ADFOX with information about the correspondence of buttons and link numbers.
8. Open the publishing options and connect the template from the first point and publish the project by selecting the desired directory.
9. After publishing the project, archive it in .zip format. Your creative is ready to be uploaded to the ADFOX banner.
Google Web Designer Editor
The code of this banner can be used as a basis when creating creatives in the editor.
Template contains script adfox_HTML5.js and a set of parameters for correct operation transitions and event counting:
%reference%, %user1%, %eventN%, where N is the event number from 1 to 30.
2. Click processing.
All events are assigned to specific animation elements through the Events tab.
The Interactive Area component is used to invoke actions.
Add it and select the event Touch Area → Touch/Click (or "Tap Area > Touch/Click" in the English version). 
In the "Custom Code" tab, specify a call to the click function.
2.1 If one jump button is used:
CallClick();
2.2 If there are several transition buttons:
CallClick(n);
where n
2.3 If you need to trigger an event from an animation without a transition, use the following code:
CallEvent(n);
where n is the number of the event that should be called.
Feature of the implementation of a stretching (rubber) banner.
So that the banner stretches across the width of the container in which it will be located on the site, on the panel Properties For position and dimensions, specify percentages instead of pixels.
Also use the options "Align to Container" And "Rubber layout" on the top toolbar.
If you enable Fluid Layout before using any alignment tools, then when you resize the parent container, all elements will be aligned to each other and to the dimensions of the container.
In this case, you can simultaneously use both relative sizes of elements in percentages and absolute sizes in pixels.
4. Publication of the project.
When adding a banner to ADFOX, the manager will need to know the correspondence of buttons and event numbers. For each event, the manager will write its own link to navigate to, which will then be passed into the banner code using a variable.
After publishing your project, zip it in .zip format. Your creative is ready to be uploaded to the ADFOX banner.
Other editors
1. Counting clicks on a banner
In order for ADFOX to calculate statistics on clicks for a banner, you need to write a variable in the HTML code in the tag and for the href attribute:
%banner.reference_user1%
Also for links, use the target attribute with the %banner.target% variable in the attribute value.
If the attribute is missing, then the link will open inside the iframe, that is, the advertised site will open in the banner space.
Example HTML code for counting banner clicks:
Advertiser's website
In the HTML code of the banners that will be placed in mobile applications, to count clicks, use the macro: %reference%@%banner.user1%
2. Counting clicks from several links in a banner
Let's say the banner has several clickable links leading to different pages advertised site, and for each of them you need to get the number of clicks.
First link Second link
Replace the href attribute values with the variables %request.reference%@%banner.eventN% , where N should be the event number from 1 to 28.
For example:
First link Second link
The correspondence of links and variables must be reported to the manager who adds the banner to ADFOX. Since when adding a banner, you will need to specify the first link for Event 1, and the second link for Event 2.
Adding a banner in ADFOXTo add a banner in ADFOX, select the desired banner type and the "Banner HTML5" template.
Specify banner parameters:
Archive with HTML5 creative - upload the .zip archive with the project, the "HTML5 creative code" field should remain empty (it will be filled with the contents of the .html file of your project after adding the banner).
HTML5 creative code - upload a zip archive with a project prepared in HTML editors or paste the HTML code.
If there are several links in the banner, add them in the Events tab of the banner, in the transition URL fields.
Please check with the HTML creative developers for the correspondence of link numbers and events.
Link to the measuring pixel - by default the ADFOX pixel is used //banners.adfox.ru/transparent.gif, if you need to keep track of impressions in a third-party system, delete the ADFOX pixel and specify another link.
Creative width (px or %) - specify the width of the banner.
Creative height (px or %) - specify the height of the banner.
Image - upload an image.
Conditions for displaying creatives:
- HTML code and image added - HTML code will be shown.
- image added - the image will be shown.
- HTML code added - HTML code will be shown.
Banner container class attribute name - specify a name (or several names separated by a space) for the class attribute of the banner container.
Use SafeFrame (yes|no) - safeFrame is a technology that wraps advertising in a special iframe that has a strict API. SafeFrame prevents ads that are rendered within it from collecting data and interacting with the rest of the page outside of the safeFrame.
yes - enable the use of safeFrame and deny access to the web page;
no - do not enable safeFrame. The banner code has access to the web page.
Styles for the banner block - custom styles for the banner container in one line. Besides style: display. For example, "border: 1px solid red;". Invalid values will be discarded by the browser.
A floating block (or as it is also called moving, fixed, sticky) is needed on the site so that the user, when scrolling the page, sees one stationary element, in which advertising is most often placed (teasers, banners or context).
Unfortunately, Adsense rules prohibit us from doing this. However, many website owners ignore the rules at their own peril. Maybe they are not even punished for this, but I would not advise taking the risk.
I place my teasers/banners in such YAN blocks, and sometimes instead of advertising I display there similar posts or some information useful to the visitor.
Let me tell you how you can create a floating block on your website.
Task: make the last block in the side column (sidebar) floating. Moreover, so that it sticks only at the moment when the user reaches it by scrolling, and not immediately when opening the page. Also, the block should “stick” when reaching the footer (i.e., not overlap it).
The most working wayThere are many options for implementing a sticky block, but not all of them work correctly. I'll tell you from personal experience: the same method of installing a block can work on one site, but jambs will appear on another.
Below is an example of a floating block that worked on almost all sites where I installed it. There were no jambs. The engine is also not important (DLE, WordPress, LiveStreet, etc.).
In the desired place in the side column, paste the following HTML code:
$(window).scroll(function() (
var sb_m = 20 ; /* padding above and below */
var mb = 300 ; / * basement height with margin */
var st = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();
If(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) ) ;
}
else(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
}
)
;
In this code you can set the padding at the top, bottom, as well as the height of your footer, i.e. the height at which the block needs to stop.
Now let's connect JS. To do this, write in the HEAD section:
The easiest way (for WordPress)Also a fail-safe method, but by installing a plugin. It works without jambs.
Advantages:
- no need to understand/understand HTML;
- simplicity and speed of installation.
Flaws:
How to use:
They seemed to me less convenient and not as clear as the two methods above. But I’ll tell you about them anyway.
Option #1 (without jQuery)Insert into the sidebar:
We write styles in HTML (it’s better to add them directly to CSS):
.sticky(
position: fixed;
z-index: 101 ;
}
.stop(
position: relative;
z-index: 101 ;
}
Now we add the script itself to the page (it’s better to put it in a separate file, as in the “Most working method”):
(function() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // if zero is replaced with a number, the block will stick before the top edge of the browser window reaches the top edge of the element. Can be a negative number
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
function Ascroll() (
if (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
for (var i = 0 ; i< Sa.length; i++)
{
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("background" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.children[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // block selector, when reaching the top edge of which you need to unpin the sticky element; Math.round() is for IE only; if zero is replaced with a number, then the block will stick before the bottom edge of the element reaches the footer
if ((Ra.top - P)
< / iframe >
< / div >
And here is the CSS:
/* default height */ #ad ( height:60px; ) @media only screen and (height:90px) ( /* 90 pixels high */ #ad ( height:90px; ) ) @media only screen and (height:125px ) ( /* 125 pixels high */ #ad ( height:125px; ) )
/* default height */ #ad ( height: 60px; @media only screen and (height:90px) ( /* 90 pixels high */ #ad ( height: 90px; @media only screen and (height:125px) ( /* 125 pixels high */ #ad ( height: 125px; |
The best thing about HTML5 ads is that they can be tracked from using Google Analytics, just like on regular websites.
