How to Make and Code a Banner

Print Friendly, PDF & Email

A great way to advertize and share your blog is to have a Blog banner that is coded for others to copy and place on their site.  This tutorial is how to make and code a Banner. These banners are popular for Blog Parties and Blog Hops.

How to Make and Code a Banner – Tutorial

How to make and code a banner
Simple banner example

As many of you may already have a logo, I thought I will put the coding stage first and then for those who don’t have a logo or banner we will do a tutorial below on making a banner.  Start at part 2 if you don’t already have a banner.

Tutorial Part 1 – How to Make and Code a Banner

You want this banner so that visitors can come to your site and take the code and put it on their site.

I could tell you how to code it so that others can copy and paste it, but it is rather long and the slightest mistake and it won’t work properly. So we will do it the easy way.

Go to the site called “Grab my Button” This is a wonderful site that you just have to appreciate if you have ever struggled making banner codes.

 

make and code a banner

Line 1: Type in the name of your Blog.

Line 2: The next is your Blog’s URL.  If you want the banner link to go to a particular page of your Blog, then use that page’s URL.

Line 3: Next you need the Image URL. To find that go to your image library and click on the banner image. Over to the right you will see Image URL – copy the whole URL, don’t leave any behind.  Now paste that into the Image URL space where you are getting the code.

The next question is to choose,  Pre or Textarea. Below this is a help box to help you choose what is right for your website.

Set the Height and Width or leave it on auto. Select Open in new window.

Click on the Preview Button. If the image looks good, click on  Get Code

Click on Select and this will select the whole code for you just copy the Code and paste it into the Text view of your page where code goes. I find it best to Publish before you go to the Visual page. Sometimes if you go from Text to Visual before it is saved, the code can change.

It would be nice if you follow “Grab My Button” on the Twitter link provided.

Tutorial - How to make and code a shareable banner Click To Tweet

 

The Blogger's Lifestyle

 

Visitors can Copy and Paste the code in the box, to share your banner.

Try your code out before you give it to others to copy.

Part 2 – Tutorial to make the Banner

Every step in this tutorial How to Make and Code a Banner, is available free. That is good news for those of us blogging on a budget.

This is not a design class but just to show you how to make a simple banner. I will leave you to design it or use your existing logo.

We are going to use Canva for the How to Make and Code a Blog Banner Part – 2.

Go to Canva

How to make and code a banner
Front page on Canva where you choose your canvas size

Determine the size of the Banner you would like.

For this exercise, we will choose the dimensions and put in 250 px W and 250 px H. Click on Design

You are now faced with a blank canvas, so choose a background color.

Click on Backgrounds (left side of page)

Note to select an item just click on the object on your canvas.  To deselect click outside away from your project.

How to make and code a banner - background

I am choosing a textured green. Colors can be changed.  Select your canvas, click on the green circle then the + and your color choices are revealed. Or use the slider to make the green darker or lighter.  Canva has many free graphics to choose from or use their $1 images.

Original overlay Code a banner
Select an overlay shape

Click on Text (left side). Under the text options are some shapes to use for an overlay. Drag the one you like over to your canvas. Position and size it using the handles.

Select each line of text on the overlay and delete. We are left with some unwanted white lines. Select the white circle and click on the green circle that is the color of the overlay, the white lines are now gone.

OR You may want the whole overlay to be white with the color around the edge.  After you delete the text. Click on the green circle to select green and then click on the white circle to change it to white.

Center

Click on Text (left) select the middle size text.  You can drag it to your canvas. Delete the text that is in it. Adjust the handles to fit your canvas. Select a Font and type.   Click on the little triangle to drop down a box, select center to center your text.

Drag over the largest Text box. Adjust the size and delete the text message in it.  Select your font and type. Again click the triangle and select center.

Drag the middle size text box over to your canvas and do as above.

Note that it can be effective to use two different fonts as in this example.

Changing angle How to code and make a banner
Changing the angle of the text

I went back and selected the word Best and you will see a handle at the bottom to shift the angle of the text.

I am thinking  a flower in the lower left would be effective to marry the background and the overlay together.

How to make and code a banner

Do a search for flower or what ever you want. Drag it over to the corner of your canvas. It will be too large so adjust the handles to fit how you want it.

I changed the colors to match the banner better.  Remember to just click on the color circle that you want to change and then on the color that your select. You will now see that color in a circle, click on that and you will see your changes.

Click Download > As an Image (jpeg) is lighter,  and save it to where ever you keep photos.

Because this banner will load onto every page I want the file to be light. This is when I go to Tiny PNG  Click on the arrow to select your banner file

You now have a much lighter banner that will load quicker.

Upload the banner to your media library ready for coding as described above.

That is all there is for How to Make and Code a Banner and every step of this is free.

[FWSSubscriptionForm extramergefield=”via blog post” title=”Subscribe today” description=”We would love you to join us. Receive the Monthly Inside News”]

You may enjoy these interesting posts

250 Photography Tips

Is Blog Commenting valuable

 

Leave a comment

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

CommentLuv badge

7 thoughts on “How to Make and Code a Banner”