Create And Share Your Own Banner And Banner Code

Advertising your website is very important, so this tutorial is about how to create and share your own banner and banner code.

I have created this banner 250px by 60px with the associated code.

How to create and share a banner?

Go to Pixlr.com.
Launch web app.
Create new image.
add your measures (I have added 250px by 60px).
Check the box before “transparent”.
add your logo as a layer.
Use the color picker to pick your logo color.
Add appropriate text.
Add a border in an appropriate color.
Save your new banner in png (only png will keep the banner transparent).

Now your banner is ready, we are going to create a code for your banner, which you can share, and as you see, I have placed the code in a box.

Copy this code

<!–Begin Work at home, the furture is yours Coding –><a href="https://workathomefuture.com/cool-amazing-free-website-tools" target="_blank"><img src="https://workathomefuture.com/wp-content/uploads/2015/09/Banner-Amazing-Tools.png" alt="Cool amazing free website tools" width="250″ height="60″ align="BOTTOM" border="0″ /></a>

What do you have to change?

The Title.
The target url.
The image url.
The alt desciption.
Add your own width/height measures.

Where can you find your image url?

Go to add media.
Upload image (your new made banner).
Copy the URL.

4. Paste this URL into the banner code.

How to place the banner code into a box on your website?

Code for box:

<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;"></a><b>Copy this code</b><br/>This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.</div>

1. Copy this code.
2. You can change margin and padding.
3. Change text “Copy this code” into your own text.
4. Then place this code into your text editor.
5. switch over to the visual editor and replace the part showed below with your own code:

"This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go."