Top

CopyDoodles Lunch & Learn 10/12/11 – “CopyDoodles & Your Website: Part 2″

by

**Please note the video file is large and may take a few seconds to load**

Lunch & Learn Important Links:

Lunch & Learn Transcript:

Hello, everyone, on this wonderful Wednesday. It is not so wonderful here. It’s been raining all day, but hopefully you’re having a great Wednesday where you are. I’m going to jump into today’s webinar pretty fast because we have a lot to cover. It’s going to be some advanced stuff.

Let’s begin the webinar. A few side notes, like always, if you want to ask a question just please type it in the Questions and Answer box on your GoToWebinar screen, I will answer them as we go. There’s also a Question and Answer section at the end.

Next week we’re going to be talking about CopyDoodles and Social Media: Part 1. We’re going to be talking about using CopyDoodles on Facebook and Twitter, and some exciting tips that you can use for using those in your business.

Then trick or treat — it’s time for this Week’s Lunch and Learn Deal of the Week. This week’s deal is pretty cool. I am giving you $50 off our 2010 CopyTemplate CD just for attending today’s Lunch and Learn. So, if you head over to https://www.copydoodles.com the link is there and then when you add the CopyTemplate CD to your cart if you add the coupon code 50OFF you will automatically get the offer. I haven’t posted the coupon code online because this is only for people who have attended my Lunch and Learn, so make sure that you write that down.

If you joined in 2011 and you missed any of our CopyTemplates, such as our X-ray Mailer, While You Were Out little note card or whatever it is, if you missed those make sure to check it out because there’s some really, really cool marketing CopyTemplates that we have in there that are really fun.

Then of course, like always, I will be reposting the replay of this CopyDoodles And Your Website: Part 2 at https://www.copydoodles.com If I go too fast or if you need to see everything again and you want to follow along just make sure to check that out. I’ll give you the link at the end of the webinar.

Moving, back to our normal slides, we have Today’s Big 3.

Today, I’m going to be showing you how to add CopyDoodles to your WordPress sidebars. This is just if you want to use banner ads and then also if you want to add CopyDoodles to your opt-in boxes, if you want to have an image above your opt-in box, kind of pointing to the opt-in box trying to get people to sign up.

Then I’m also going to show how to add CopyDoodles to your opt-in box buttons. So, your submit button, if you want to find out how to change that, so you can put a circle around it, and arrow next to it, I’m going to show you how to do that.

First we’re going to just jump right into the first demo. I don’t have anything else but that today, just demos. So, I’m going to be showing you how to add CopyDoodles to your sidebars and your banner ads.

If you want to add a banner ad to your site, maybe you want to add a “Sponsored By:” or you want to add affiliate links to your sidebar on WordPress this is exactly how you do it. I’m going to head over to our www.CopyDoodles.com WordPress site. I’m going to start out on the dashboard. I’m going to scroll down. The area that you’ll find your sidebar in is going to be under ‘Widgets’. So, you’re going to go on the left-hand side to ‘Appearance’ and you’re going to click on the ‘Widgets’. Probably, if you have a very basic WordPress site only have one sidebar.

We have several different things going on with our WordPress site, so we have a few different sidebars, but I’m going to be using the sidebar here on the side, which is the primary sidebar. As you can see, if I open up our CopyDoodles blog this is — I’ll show you the side bar that we have on this site. As you can see we have the ‘Get Free Doodles’, we have our ‘Lunch and Learn’, then we have ‘Check Out Other Articles’, and we have a social media thing.

Say, I wanted to add a banner ad underneath this “Follow Us on…” I would go to my WordPress page and I would scroll down and I would just choose a text. You want to add just arbitrary text or HTML. I’m going to scroll up. You just click that and drag it and you place it directly under where you want your banner ad to go.

You don’t need to have a title. If you’re just placing a banner ad on your WordPress sidebar you can just leave it titleless and it will just show the sidebar. But, if you want something that says “Sponsored By:” you can type that in here and you can save it.

The next thing I’m going to do is I’m going to upload the banner ad image that I’ve created. So, I’ve already created my banner ad and I have saved it. I created it with GIMP, which I’ve showed you before. So, I’m just going to head over to ‘Media’ and now I’m going to upload my banner ad. I’m going to open up and select that file now.

OK, now my image has completely loaded. If I scroll down I can see the file URL. I’m going to want to save this file URL because I’m going to need this in order to place it into my sidebar. I’m just going to right-click on it and click ‘Copy’. What I like to do is I like to keep all my HTML code that I like to use for my widgets and my sidebars, I like to keep them in a Notepad and I actually have my Notepad here.

I have uploaded this to https://www.copydoodles.com so you have all of the HTML code you will need for adding images with links to your sidebar and for adding images to your opt-in boxes. It has directions here. So, this is what I’m going to be pulling from.

When I create my HTML code to put in my sidebar, because you have to use HTML code or the image won’t show up, this top link is the one I’m going to use. I’ve inserted instructions on where to put everything. So, as you can see here, this one says “Insert URL Here”, and it has it in quotes. What I’m going to do first I’m going to delete that and I’m not going to delete the quotes. I’m just going to insert the website, starting with the “Http://”that I want people to be able to go after clicking this banner ad, so this is a CopyDoodles promotional banner ad. So, I’m just going to go: www.CopyDoodles.com OK?

The next thing I’m going to do is I’m going to insert my image link that I have just copied. I’m going to paste that in right here by right-clicking and choosing ‘Paste’. So, that’s in there. So, now that HTML code says that image will show up, and when people click on that image it will go to www.CopyDoodles.com

Now, the next thing you want to do is insert alternative text. That’s just text that will show up if people go to your website and they can’t see your banner ad for reasons that — it’s not loading for them, it’s slowly loading. So, I’m just going to put in “CopyDoodles” here.

The next thing you want to do is you’re going to need to know your image width and your image height. So, if you are copying an image from, say, an affiliate or something like that you might not know their image width and height right off the bat. So, you can easily just open up GIMP and you can look up the image width and height. You can do that by pulling your image in and going to ‘Canvas size’, and it shows this is 190×410.

But, say you don’t have GIMP and you don’t have a program like that where you can look it up. WordPress actually tells you the dimensions of the size of your banner ad right here. So, this is 190 width — it always starts with the width — and then the height is 410.

You want to make sure that whenever you are loading banner ads into your site that the width is not too large, because if it’s larger than your sidebar it will actually mess up your sidebar. So, I know that when we created this site that my sidebar width is 200 pixels. So, you can find that out from your web designer, or you might even know that on your own, or you can just play around with it. Sometimes I just play around with it. If I don’t know how wide the sidebar is I’ll upload an image, if it looks too big then I’ll just make the dimensions smaller and smaller until it fits.

So, my dimensions are 190 x 410, so that’s what I’m going to insert here. First is the width, so I’m going to insert 190 — and again, make sure the quotes are always around whatever you’re typing in here. You don’t wan to delete the quotes. The height is 410.

Now I’ve created my code. I’m ready to place this entire code right into my sidebar. I’m just going to copy it — right-click and copy it. I’m going to head right back over to ‘Widgets’, and then I’m going to go to this area where I set my “Sponsored By:” and I’m going to click the dropdown. And, this big box here, that’s exactly where I’m going to paste my HTML code. I’m just going to paste it in here. I’m going to click ‘Save’, next I’m going to click ‘Close’, and then when I go back to my website, if I refresh my website my banner ad should automatically show up.

As you can see my “Sponsored By:” banner ad shows up. If I click on it, it directs me over to www.CopyDoodles.com As you can see it’s already loading, but I’m not going to go all the way there.

So, I’m just going to stay here because next I’m going to show you how to add in CopyDoodles to your opt-in boxes. Say you wanted to add CopyDoodles above your opt-in box. Maybe you want to add a picture of your free offer and a CopyDoodle pointing down to your box. Or, even if you just want to add something like this that says, “Get updates when we post new episodes,” so, basically all I did was create that graphic and upload it.

If you want to do that it’s really, really simple. Let me show you. I’m going to do the exact same thing. I am going to scroll down until I find a text box. I’m going to grab it and drag it up into my sidebar. I’m going to place this opt-in box below the “Sponsored By:” area right now, just because I’m showing you, but normally you’d put it at the very top of your sidebar.

I’m not going to put a title in this time because if I put a title in then there will be a title above my opt-in box and I don’t want that. I just want the image to be directly above my opt-in box and I want my opt-in box to be below it.

So, what I’m going to do is I am going to create my image. So, I know that the width of my sidebar is 200 pixels. What I have already done is I have already downloaded two CopyDoodles that I want to use for this image.

So, I have this one that says, “Free Offer,” and as you can see it’s a little too big for the area. So, what I’m going to do is I’m just going to choose the scale tool, so as you can see this is the scale tool. I click on it. I’m going to choose one of the corners and I’m just going to scale this down. Then I’m going to press ‘Scale’; up, I’m just going to use my arrows to move it up because it won’t let me click and move it right now. And, I have my “Free offer,” right there.

But, you can crop this image and it will be done. I’ve already created a finished image to upload anyway, so I’m actually just going to upload that, but if you wanted to add in an arrow you could really easily pull that in too, you could resize that also, using the scale tool. You could actually rotate if you wanted, using the rotate tool by clicking and rotating to move it right underneath your “Free offer.”

Then when you want to save it you want to make sure you save this as a .JPEG. So, what I’m going to do is select my file type, and I’m going to scroll down and make sure that it’s a .JPEG, because if you’re actually creating this document on your own it might try and save as a GIMP file. We’re going to ‘Save’. Now, I’m just going to exited out of GIMP because I don’t need that anymore.

What I’m going to do is open up my WordPress again, and now I’m going to have to upload my opt-in box image. I’m just going to go back to ‘Media’. I’m going to add my “Free Offer” with the arrow. As you can see it’s right here. I’m going to open it. And, now what I’m going to do is I’m actually going to use very similar code to what I used before when I just showed you how to add a banner ad or anything else that’s linking to a website.

But, I’m going to use this code right here, which is for images without links, because you don’t want someone to click on your image accidentally and be taken to a link. You don’t want them to be able to click on that image at all. So, I’ve actually removed this whole code, which is the AHREF=, and I’ve created this code right here.

So, the first thing I’m going to do is copy my image link, like I did before. I’m going to insert it right here. I’m going to insert my alternative text, which will probably be “Free Offer,” or whatever you want to call it. I am going to pull my image width and height, so this is 200 x 200, that makes it really easy. So, I’m just going to paste that in here. And, I’m going to copy and paste this into my sidebar widget.

Now, I’m going to open the bottom one because I know that’s the one that I’m using for my opt-in box. I’m just going to paste the code in here and click ‘Save’. Now, if I refresh this page and then scroll down you’ll see that I have my free offer here. Now, I didn’t crop this correctly, so there’s a little bit of an edge here when I created this, but yours should not have this at all. If you just upload a .JPEG you won’t have this little edge along the sides here, so that’s my error.

Next I’m going to go back in and blow this. I’m actually going to paste the next step that I’m going to show you how to do. So, next I’m going to show you how to add CopyDoodles to your opt-in box buttons. So, as you can see here I created a submit button, and I have a circle around it. I’m going to show you how to create a button just like that for your opt-in box.

So, what you want to do is you’re going to into the CopyDoodles Access Club, if you’ve never done this before. You’re going to go to Copy Generators and choose the CopyButton generator. As you can see, we have a ton of different CopyButtons that you want to use for your page. You can choose from any of them. I’ve already download one, and I’ve already uploaded it for use, just to save some time.

But, if you want to create one on your own all you do is click on the CopyButton you want to use. You’re going to choose the text that you want to be on you CopyButton, so you could get ‘Yes, send me my free gift,’ or you could put ‘Submit’, like I’ve done, or anything that you want. You’re going to choose your button color. I like to choose gray. Text color — you can choose any color that you want, but I’m going to keep it to black. Then you choose your Doodle color, so you really could go anywhere with this.

And, then the next thing you’re going to do is you’re going to have to choose a background color. So, make sure that you choose the same background color that is the background color for your opt-in box, because this has to be a .JPEG, if you want to have a background, so just choose the color of your background, or download the .GIF.

So, I’ve created my button. I would generate this and I would save it. Then I would upload it into WordPress, just like I showed you. I was uploading all of the images.

The next thing that I’m going to do is you would log into whatever program you use, whether it be Awebber, whether it be Infusion Soft, or anything like that and you would pull the HTML code for your opt-in box.

So, you don’t wan to use Java Script. Let me pull up the code that I have. So, this is our HTML code. The Java Script is usually one or two lines, but this HTML code is usually really long. This is what you’re going to need to use if you do want to edit the submit button and you want to have a CopyDoodle on it. You can’t use the Java Script, it just won’t work.

I have all of the instructions again in this area in the Notepad that I have uploaded to https://www.copydoodles.com So, everything I’m going to show you right now, which is pretty complicated, all of the instructions are right here. It shows ‘For Opt-in Box’, make sure your use the raw HTML code.

So, what you’re going to do first is you’re going to take your opt-in code and put it in a Notepad. This is the easiest way to modify it if you want to make changes. Then if you make a mistake you can always see where you need to go back and you can see it in Notepad and change it there without having to worry about that small box on WordPress.

I’m going to scroll down until I come to an area of my code where it talks about the submit button. This is usually in the bottom of your code. It’s probably pretty far down. As you can see it usually says something about submit button, it will have the color, it will have the background color. It will talk about things like that. So, as you can see here what you’re going to look for in the area of your HTML code is something that says ‘Input type’, and talks about your submit button, or it will talk about your input style. These are all HTML codes that talk about what your submit button looks like.

As you can see mine at this section right here says “Input style” and that is the section that I’m actually going to delete and put new HTML code in.

Make sure when you’re deleting anything in your opt-in code that you delete from the first little bracket here, these little tiny brackets, delete from the first until the very last bracket. If you delete more than that you’re deleting too much code. And if you delete any less than that you might have some funny characters that show up. So, I’m just going to press ‘Delete’. As you can see, I now have an empty space.

The next thing I’m going to do is I’m going to go back to the file that I have, which you can download on https://www.copydoodles.com and I’m going to input this entire line of text that I have given you. As you can see I’m just going to copy this text and paste it right in this blank space here. OK.

The only things that you’re going to want to change is this link right here where you’re going to put your image URL, and then the width and the height of your image. So, after you have uploaded your image, your submit button, and it’s an appropriate size for you, you want to make sure that it’s smaller — if the width of your site is 200 pixels your
opt-in button is obviously not going to take up that entire width because that’s way too large. It might be something like 100, or it might be something even smaller than that. So, you’re going to insert your width and your height, as you can see here.

Now, I’ve already created my code right here. As you can see if I scroll all the way down to the bottom I’ve inserted my image. So, WordPress.com uploads to my CopyButton, I entered a .GIF so I didn’t have to have a white background. The width of my button is 100 and the height is 28. So, this is just going to copy this entire opt-in code. Make sure you’re not missing anything. I know it’s a really long code. Sometimes if you scroll down to the bottom you might find that you’re missing a character or something, don’t do that because it will mess up your code if you’re missing anything.

Then I’m just going to simply paste it right below this image code that I’ve put here. So, I’m going to paste it and I’m going to save it. Then I’m going to close this. Now, hopefully, since this is done live, hopefully everything will look OK and when I refresh this page you’ll be able to see my free offer and then below my free offer you’ll be able to see where you can enter your name and email address.

As you can see I didn’t have a blank code. My code had — it was actually this here. So, I would not put this free offer image in. I’ve already got it here, but my submit button has changed. So, everything looks good. The only problem is that this looks a little wider. I might want to decrease the size of my HTML code so that it’s not so big. But, everything looks OK. You can see my submit button. If I wanted to remove this ‘Get Free Doodles and more’ I would do that on my own through Infusion Soft, because that’s where we actually added this image in.

Moving back to the presentation, that concludes all of our demos. I just have some CopyDoodles website tips for you.

When you’re adding text boxes in your sidebar make sure you add in a different text box for each item you want in your sidebar. So, if you have several different sponsors that you want, or several different banner ads that you want on your sidebar, make sure you use a separate text box for each image. That will just keep everything separate. It will make it a lot easier when you need to edit anything — if you want to add in a new banner ad, or you want to add in a new image, or anything like that.

Then also think about the different types of things you can put in your sidebars. You can put in opt-in boxes, banner ads, affiliate ads and sponsors. You can add ‘About me’, or anything about the company, you can put that there — I’ve seen a lot of people do that on blog posts. You can add ‘Featured’, ‘Most Recent’, or ‘Popular’ posts — you can have a link for that. You can add social media buttons or feeds like we have. Actually in the widget area there’s actually a button — instead of a text button that you drag into your sidebar, you can add in a social media one that automatically feeds from your Facebook or Twitter page. You can add a ‘Product of the Day’, a ‘Product of the Week’, ‘Tip of the Week’, a quote — anything like that.

Make sure you are always testing your opt-in boxes after you make any edits, to make sure that it’s still working because if you have an opt-in box up that’s not working that’s not going to be good for you.

A few resources, and I do want to mention all of these are also listed on our https://www.copydoodles.com page, you want to head over to Infusion Soft, that’s who we use for our opt-in boxes, and for our auto-responders, and things like that.

If you ever need any help go over to www.WordPress.org/support

If you want to use a program like PhotoShop, I talk about this all the time, but it doesn’t have the cost of PhotoShop, it’s actually free, get GIMP 2.6 to make some images, make some edits to your website.

www.guru.com and www.odesk.com are really great resources to check out if you don’t have the time to create this kind of stuff. You actually can post up on Guru or
O Desk.com kind of an ad saying, “I need somebody to create an opt-in box for me,” then they will bid on how much they want you to pay to create that. Then you can choose to hire them or not hire them. So, it’s all freelance work. You can find some really
great-priced graphics work, and opt-in box work, and things like that done for you.

If anybody has any questions I would be more than happy to answer your questions now on using CopyDoodles in WordPress, or anything that I might have missed. Or, even if there’s anything in WordPress that you want to find out how to do and you’re not sure, you can ask that from me now.

Another thing that I do want to mention something really good to do on your WordPress site, if you do have a blog, is to add a plug-in called Blog Footer I believe it’s called, and I can add that to https://www.copydoodles.com too as a resource. I’ll do that as soon as this webinar is over. But, it actually allow you to add an HTML footer to every single blog post you post. So, you can add an opt-in box to the very bottom of every blog post before people make comments. And this is a really great way to get people to enter their name and email address, because a lot of people aren’t looking to the right-hand side anymore. If you have a pop-up box with your opt-in people are clicking out. If you put it underneath your blog posts, directly after they’re done reading, they’ve already received information from you, they already know and trust you, and then they see your opt-in box they’re more likely to opt-in.

Richard just asked me, “Is it similar process to add a video into the sidebar?”

So, Richard if you’re talking about adding like a video from Easy Video Player or from YouTube you would basically just take the share code that you have on YouTube and add that code into the sidebar. You wouldn’t use the HTML that I’ve given because YouTube has — let me actually just open up YouTube.

So, if you’re looking at a YouTube video. Let me just click on the first one that comes up. If you want to share your YouTube video you can see you have a link, but if you get the embed code, this is the code that you would place into your sidebar, right here. Then as you can see it has the width and height here as being 420 and 315, I believe that if you modify the width and height in the code after you place it into your sidebar that video will actually get smaller and it will be the right size. So, if you know that the width of your blog sidebar is 300 and this 420 is too big just decrease the width and decrease the height proportionally and it will be OK.

OK, then, so just want to mention one more time that our Deal of the Week is $50 off our CopyTemplate 2010. Type in the coupon code 50OFF, and that’s only for Lunch and Learn and people who have been on my webinar.

Make sure to join me next week for CopyDoodles And Social Media: Part 1. So, we’re going to be talking about Facebook and Twitter. We’re going to have a ton of really great tips there. If you have any question at all I’m going to be on live chat directly after this webinar. So, feel free to ask me anything about your site or using CopyDoodles and I would be happy to help you. Have a great week and I will talk to you next week.