How To: Add a Sidebar Opt-in to Your WordPress Blog

↑ If you like, Please Comment, Share, Tweet or Plus 1 ↑ ↑

How To: Add a Sidebar Opt-In to Your WordPress Blog

 

Sidebar Opt-In

Sidebar Opt-In

How To: Add a Sidebar Opt-in With Image to Your WordPress Blog

Adding an opt-in form to the sidebar of your WordPress blog, is fairly simple – once you know how. If you don’t, it has lots of little pieces that all have to fit together nicely.

Let’s start with the basics.

What is the Sidebar?

This is going to be a basic walkthough. There are lots out there on Youtibe,
but I’m going to walk through it anyway.

Here is an image of part of my blog. The area on the right is a sidebar.
There can be sidebars on the right, left, top or bottom, but we will just
work with the one on the right.

Sidebar Opt-in With Image

 

There are three arrow pointing to 1) an image 2) some text and 3) a button.  There could also be text above the image and below the button if you wish.

We need two things to make this work

1.   A link to an image

2.  An AWeber Web Form that will send our users to our AWeber Autoresponder when we put it in our sidebar opt-in area.

 

Step 1 – Getting the Image

The image you use must be “hosted on the Internet.” This means that it cannot reside on your home computer or laptop. No one on the internet will be able to see it there. Sometimes the image is provided by someone and it is already hosted on the internet and sometimes you have to upload it to your blog and host it yourself. Let’s look at both methods.

For this example I am going to put an opt-in form on my blog that points to the Attraction Marketer’s Manefesto

  1. I log in to my account on the The Renegade System website.
  2. I find the Marketing Tools for the product I want.
  3. I find the image I want to use.

NOTE:  If you have purchased The Renegade Network Marketing, then you are automatically an affiliate and can market using this eBook.  Click here to purchase

BTW People who download the Attraction Marketer’s Manifesto or The Seven Great Lies of Network Marketing get sent to a page where they can buy the Renegade Network Marketer.

Sometimes they will have HTML code you can use and sometimes it is just an image you can download. (we will look at both.)    Usually they do not have the code for a sidebar opt-in.  If we want to collect the name and email addresses, we will have to make a few changes.   🙂

Here is what the steps look like so far.

Sign into The Renegade System

Sign Up Page
TheRenegadeSystem-login

Click on Marketing Tools
TheRenegadeSystem-mkt-tools

Click on the Product You Want
TheRenegadeSystem-AMM

You will See Images and HTML Code
TheRenegadeSystem-book-image

Option 1 – The Site Provides Hosting

If we used the HTML code from the image above, the image would be hosted on MarketersManifesto.com

 

In this case The Renegade System provides a link to the image.
Let’s tear the link apart.

Basic Text Link

  1.  It starts with <a – The “a” is for “anchor” and this is a link.  The basic format is “<a>What User Sees</a>:   As always in HTML, commands start with “<something>” and end with the same plus a slash . The “What User Sees” will be underlined and written in blue if the user has never clicked on the link and a reddish color when they have.
  2. In the basic format, the system doesn’t know where to send the person who clicks on the link. So we have to add a place to send them. The code for that is “href=’URL’” and it is placed inside the “<a >” link In this case
    the code is  <a href=”http://Hale.marketersmanifesto.com/”>.  The “http://” tells us that this points to something on the Internet.
  3. The way that this link is currently written, if a user clicks on the image they will be sent to a new page that will overwrite  the current window in the users browser with the new material.  Usually we do NOT want to do this.The only way a visitor can continue reading your blog is to click the BACK button in order to get back to your blog. The comnand “target=’_blank’” causes the modern browsers to open a new tab or a new window.   This does NOT make it difficult to continue reading your blog and that is what we want!  We will add this code to our link.
  4. Often you will want to add “rel=’nofollow’” This tells Google that you do not want to pass your credibility to the target site.
  5. Now we need to add the image to our link code
    • In this case we want an image. The command for that is  “<img src=’URL’>
    • This URL must be somewhere on the Internet in order for visitors to be able to see the image. When you see “http://….” you know that it is housed
      somewhere on the Internet.
    • Additional options are “width=’xxx’” and “height=’xxx’” You can use these to re-size the image. (Don’t change the size too much, browsers do not resize images well.)
    • Alt=’’ You really want key words here since Googles gives credit for it.
    • Border=”0” tells the system that you do not want a border around image.

Here is the final code that we will use for your sidebar. (I added key words in the ALT tag)

<div style=”text-align:center;”>

<img src=”http://Hale.marketersmanifesto.com/images/banners/AMMani_1.jpg” style=”border: 0px” alt=”The Marketer’s Manifesto” / width=”218” height=”293“>
</a>

</div>

NOTE:  The yellow highlight shows the items you will change for your image, ALT tag and width/height.   Also note I removed the HREF tag.  If someone clicks on this image they will not be sent anywhere

Here is a simple way to find the current image size (and change it if you want to).

  1. Login to Pixlr.com
  2. Choose the Advanced Option
  3. Choose to get the image from your computer and get the image
  4. Click on the top menu Image –> Resize
  5. Change the size if you want
  6. Click OK
  7. Click on File–> Save and save the resized image.

This is the screen you will see.

Pixlr.com – Re-size
pixlr-image-resize

 

Why We do NOT Want This Code as it was given to us.

As it was given to us, when a user clicks on the image, the browser go to a new website. Since we want to collect the visitor’s name and email address, we do not want the visitor to leave before they have filled in this information.

NOTE; Take note of this part href= “http://Hale.marketersmanifesto.com/”  This is where user needs to go when they click the link. We will want them to go there after they have given us their name and  email address

The part we need right now is the “<img src=’’>” portion of the link. That will display the image, but if they click on the image nothing will happen.

Option 2 – You Host the Image Here are the steps

  1. Find (or create) the image you want.
  2. Download the image to your computer
  3. Upload it to your blog.
  4. Copy the link to the image

1.   Find the Image

This might be in a back office or it might be an image you buy or find on a free image site.

Right Click the Image
TheRenegadeSystem-book-Save-Image-to-disk

Sidebar Opt-in – Right Click image

 

 

2. Download the image

Right click the image and click the “Save Images As…” link.

Save the image somewhere where you will be able to find it.

3. Upload image.

First we are going to edit a page or post. In this case I have a draft post that contains the text and images I use before and after each new post. (I clone this one when I start a new post).

You can also use the Media menu option on the left menu in your WordPress Dashboard.

Sidebar -Image Edit a Post

Sidebar Image- Edit a Post

I choose to edit this file.

I choose to insert and image into the Post. I’m not really going to use it,
I just need to upload it.

Sidebar upload image

Sidebar upload image

 

Once I find the image I want, I am going to capture the link to it.

Sidebard - Save the Uploaded Image

Sidebard – Save the Uploaded Image

Once it is uploaded, I have the image on my hosting company’s file server.
The first arrow  shows the bottom of the image.
The second arrow shows the Link to this image.

I want to highlight and COPY this link

The third arrow show the top of the “SAVE” bttuon. I do not want to insert the image into my post, I just want the link.

Here is the link.
https://halepringle.com/wp-content/uploads/2012/06/180×150-B.gif

Okay – We have the Image Link  – Either Hosted by Us Or Someone Else

Here is the Image Code we will use (again)

Here is the final code that we will use for your sidebar. (I added key words in the ALT tag)

<div style=”text-align:center;”>

<img src=”http://Hale.marketersmanifesto.com/images/banners/AMMani_1.jpg” style=”border: 0px” alt=”The Marketer’s Manifesto” / width=”218″ height=”293″>
</a>

</div>

STEP 2 – Build an AWeber Form

I wrote a whole blog post on this topic.  You can read that here  Creating a Simple Web Form

POSSIBLE ERRORS

Sidebar Direct to Correct URL

AMM-Webform

 

Here we have given the Form a Title and sent the user to custom URLs.

 

Sometimes AWeber won’t let us use the Affiliate Links.  It thinks they are incorrect Internet URLs. Sooooo.

Option 1 -Pretty Link

We can use the plugin Pretty-Link – my preferred option

Option 2 – BIT.LY

Go to http://BIT.LY If you don’t have an account, create one – they are free. Then put your link in the box shown by the arrow

Sidebar - Create a Bitly Link

Sidebar – Create a Bitly Link

 

You will see a page like this, with a shortened link in it.

Click on the COPY button and go back to the Screen with your Aweber form

Insert the Bit.ly versions of the link in and Aweber is happy.

NOTE THERE ARE NO ERRORS NOW

Click SAVE and GO TO STEP 3

Click on the “I Will Install My Form” and “Raw HTML Version”, highlight the code and copy it.

Sidebar - Get Web Form HTML

Sidebar – Get Web Form HTML

 

WE HAVE THE PIECES – LET’S INSERT THEM IN THE SIDEBAR Opt-in

We have the image link and the Web Form HTML.   We have all the pieces we need
to create our Sidebar Opt-in Form.  Let’s put them in the Blog Sidebar

Login to Your Blog’s Admin Dashboard.

Select Appearance –> Widgets (Note this can look a little different based on your Theme.)

Sidebard - Select Widget

Sidebard – Select Widget

 

Find the TEXT Widget. Click the left mouse button and hold it down.

Sidebar - Select TEXT Widget

Sidebar – Select TEXT Widget

 

Drage the TEXT widget over to the sidebar. Note that I already have two text widgets in this example
A dotted line box appears when I get near the place I want the new widget. Place the TEXT widget in the box
And let go of the mouse.

Sidebar - Drag text to sidebar

Sidebar – Drag Text to Sidebar

 

 

 

The text area opens up for editing. (You can ignore the title for this one)

Editing the Text Area in the Widget

There are three things we need.

  1. Some Text for the title
  2. The Image Code
  3. The aWeber Code
  4. Fixes and Formatting

Enter Title Text

Okay I can enter text into the TEXT area. The top arrow show this.

Image Code

Paste the Image Source code from above

Then I can paste the image location in. Note that I
have “<img src=”URL”>”

I could type some more text, but I didn’t

aWeber Web Form Code

Then I pasted in the HTML code from Aweber (lots of it).

FIX 1 – Clean up Name and Email Text Fields

Remove Blank Lines between the Email Text entry box and the Name Text entry box.

I have found that there are two lines that can save me some space on the page.

Place this line before the aWeber HTML code:   <div style=”line-height: .0;”>      (<– that is a point zero)

Place this line after the aWeber HTML code: </div>

Then click just past the Name Text field and enter Shift-Enter.  You can press Delete until the Emil line moves up.

You can do the same thing at the end of the Email Text field.

I also like to make sure that there is code to center the web form.

Lines Added to the Widget Text Field

Widget Code

The arrows show

1. the Title

2. The Image Code

3 The aWeber Web Form Code

 

Text at End of Widget

 

Edit Text 2

 

Lets Look at the Form

I CLICKED on the SAVE button (and I could CLOSE it)

Here is what it looks like in my blog

widget - draft 1
Sidebar -In my blog Version 1

Close, but it needs a little work.

Sidebar - Modify Text

Sidebar – Modify Text

I added some <h2>xxx</h2>  to make the text larger.

I added some more text.

I added <center>     and a few lines later </center>

Here is a Good result.

Sidebar – A Good Result

draft 2

We Can Do Better

We are going to use PowerPoint to improve the look and feel of our sidebar.

Here are the Steps

  1. Open PowerPoint
  2. Insert a New Slide – choose the Blank Style
  3. Change the background to transparent
  4. Drag an arrow image on to the screen
  5. Drag your eBook image on to the screen
  6. Insert a Text field
  7. Add your text
  8. Change the font and color of the text
  9. Drag and resize elements until you are happy.
  10. Save AS A PNG file.

Steps 1 and 2 – Open PowerPoint and Insert a Slide

Click on Insert –> Blank

Insert a New Slide – Using the Blank Slide Option
PP Insert a Blank Slide

Step 3a – Format Background

Right Click anywhere on the blank slide and choose “Format Background” from the menu

Right Click and Choose
PP Right Click on Blank Slide

 Step 3b – Make Background Transparent

Move the slider all the way to the right.

Make Transparent
PP background-transparent

Steps 4 and 5 – Insert Images

Choose the Insert –> Picture option.  Choose an image

Insert Images
PP Insert Image

Steps 6, 7, and 8 – Insert and modify Text.

Insert a text box.

Insert the text you want

Change the font and color

Insert Text
pp Sidebar

Drag and Resize Until You Like It

Step 10 Save AS PNG File

Click File –> Save As.  Name your file and change the file type to PNG.

Saved Image

PP Sidebar 3

 

Upload the Image – Use the Media Menu Option or Insert into a dummy Post

Highlight and copy the URL for the image.

Edit the Widget

There are four steps here.

  1. Remove the Text you inserted before.  You don’t need it any more.
  2. Replace the image URL where it says src=”http://….”    Replace the http://… with the URL of your new image
  3. Make the height and width equal – this is a square image.
  4. Save
  5. Refresh the screen where you look at the results
  6. Resize height and width.
  7. Perhaps edit the Powerpoint and save a new PNG file

Fix the Widget Text
Widget Code

Delete the first two lines here

Replace the src=”…”  beside the second red arrow

Leave the rest of it alone.

Final Widget

Final Widget
Final-Sidebar

I don’t know about you, but I think that looks pretty nice.

 

How To: Add a Sidebar Opt-In to Your WordPress Blog

Until next time, you have a Great Day!

Dr Hale

↓ ↓ If this post gave you some ideas – Go ahead & comment below. ↓ ↓

Hale Pringle

Hale Pringle Ed. D.

 

Hale Pringle – Hale Yes!

Skype hale.pringle

Email: HaleYes@HalePringle.com

 

P.S. If you are working to move your business online and it all seems overwhelming, I can help! Take a look at http://HalePringle.com, or sign up for the free coaching call. You can email me or give me a Skype call. I’ll give you the benefit of my years of experience and many thousands of dollars in training and searching the rabbit hole called Internet Marketing and Network Marketing. I can help you with Lead Generation, the feeling of overwhelm, blogging, and even career change. Add that to the finest mentoring on the Internet (Ann Sieg’s Team and Inner Circle) and you have a Winner!

Print Friendly, PDF & Email
About Hale Pringle

Dr. Hale is an Internet Entrepreneur and Network
Marketing expert. His greatest pleasure is
helping people and he does just that, drawing
upon the immense resources that he has gathered
over the years in his unquenchable thirst for
knowledge.

Dr. Hale lives in beautiful, sunny Florida with
his wife, two dogs and a cat. His four children
are grown and are scattered around the state.

An eternal optimist you will hear him say
regularly: “Is this a Great Day?” The answer is
always, “Hale Yes!”

If you need help with your online marketing or a
network marketing opportunity Dr. Hale is the go
to man. “Hale Yes!”

Comments

  1. I dont like aweber ooptins ……

    Alexander von http://www.paleo24.de

    • Okay Alexander.
      I find aWeber the autoresponder of choice for most Internet Marketers until they get huge and then the go with fusionsoft.

      Regards,
      Dr. Hale

  2. I have been exploring for a little bit for any high
    quality articles or blog posts in this sort of area . Exploring in Yahoo I ultimately stumbled upon this web site.

    Reading this info So i am satisfied to show that I have a very good uncanny
    feeling I came upon exactly what I needed. I most without a doubt will make
    sure to do not forget this site and give it a look regularly.
    Samuel recently posted..SamuelMy Profile

  3. I know this if off topic but I’m looking into starting
    my own weblog and was wondering wha aall is required to get set up?
    I’m assuming having a blog like yours would cost
    a pretty penny? I’m not veey internet savvy so I’m not 100% sure.
    Any suggestions or advixe would be greatly appreciated. Appreciate it
    Cornell recently posted..CornellMy Profile

    • Cornel,

      The nice things about WordPress blogs is the price.  Here is what you need.

      1. A domain name (from $5 to $12 per year)

      2. Hosting (a company that provides the computers and web access to hold your blog)

      3. WordPress – Free  (You can get someone on Fiverr.com or oDesk.com to install it for you for just a few dollars)

      4. A Niche – that is your brain and passions

      5. Usually a logo/header of some kind – say $50

      6. A Theme – free themes work, but professional themes give you better service (a theme is kind of like the screen saver on your phone – it makes things look different and offers you different features.)

      Since you can edit WordPress blogs and pages yourself the rest is just blook sweat and tears.

       

      Regards
      Dr. Hale

  4. Wonderful work! This is the type of info
    that are meant to be shared across the web.

  5. this web page is actually wonderful. I want to pass along some very important

  6. Brilliant work! This is the sort of data
    that are intended to be shared across the web.

Trackbacks

  1. […] We Built a Widget with our Web Form and PowerPoint. […]

  2. […] Create a Squeeze page or a Widget in your blog where you offer your ethical bribe.  (Simple Squeeze Page  and  Build a Widget) […]

  3. […] Create a Squeeze page or a Widget in your blog where you offer your ethical bribe.  (Simple Squeeze Page  and  Build a Widget) […]

  4. […] Create a Squeeze page or a Widget in your blog where you offer your ethical bribe.  (Simple Squeeze Page  and  Build a Widget) […]

Speak Your Mind

*

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.