In order to be a successful blogger,you have to brand yourself and your blog. There are a million blogs and websites out there.What makes your blog different? Why should visitors take the time to read yours?Creating a blog button is the perfect way to brand your blog. It promotes your blog's name, look and feel, and mission in one simple image. You will use your unique blog button on blog hops, blog directories, Entrecard, on your sidebar, etc.
When another blogger grabs your blog button and posts it on their sidebar, it opens you up to new visitors and more followers. In a nutshell, your blog button is your main advertising tool. (Newbies – a blog button is a hyperlinked image or logo that takes a visitor to your homepage when it's clicked on.) To drive traffic to your blog, you'll want to design and make a blog button that makes visitors want to click. Mommy bloggers create the most stylish blog buttons. I've found that the most successful mom and parenting bloggers have well-designed blog buttons.You can hire a graphic designer to create a blog button for you for a minimal fee, or you can design it yourself.This tutorial gives you the stepsinvolved in:
How to make a blog button.
Creating a code box that allows other bloggers to grab your blog button and place it on their blog.
How to add and display the code box and make a blog button using WordPress and Blogger platforms.How to Make a Blog Button – Basics The standard blog button is 125px by 125px. You can choose a size larger than this, but don't go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125.
Step 1: Design and Create Your Logo In order to design and make your blog button, you will need access to an image editing software – such as Photoshop.Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available.My favorite used to Picnik – which was free online photo editing site,owned by Google. It was so easy to use, but unfortunately in Apriln of 2012, Google closed it down. Some alternatives to Picnik that you might want to use include: PicMonkey – A super easy to use photo editing program with a creative web interface. Simple to use, and it's the brainchild of former Picnik engineers. I love it! BeFunky – This lets you edit photos, add cool filters, add text, and other basic stuff. Easy to use, and there is also a smartphone app for it. It's an Instagram alternative, but not as cool as Instagram. iPiccy - An online photo editor with simple photo tools – like crop, resizing, rotating/flip, hue and saturation, and other basics.Ribbet - If you loved Picnik, Ribbet is a photo editing platform that looks nearly identical as Picnik. It is simple to use, and you can basically do all the same stuff with it – like adding stickers, text, resizing,cropping, frames. Premium (paid) users can play with the curves and levels.
For more advanced bloggers – if you're familiar with Photoshop, but you don't have a copy of Photoshop,consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses.You can crop pictures, resize them,free transform, add text, add shapes and more. I absolutely love Pixlr. For this tutorial on how to make a blog button, I used Picnik.(* Updated: August 2012– Please notethat I wrote this blog post when Picnik was still active. You can take the basics from the below instruction.I definitely recommend Ribbet as an alternative, since the design is nearly identical.) Creating a Blog Logo in Picnik –Step by Step
1 – Go to Picnik.com. And upload
your photo.
2 – After you've uploaded the photo,you will need to crop your image into a perfect square. It doesn't matter what size your image is. At the top of the screen, you will see the word "crop." Click on Crop. (See the screenshot below). In the drop down menu, you'll want to choose "square." Click on the square to move it where you want.Click on "OK" at the top to crop.
3 – Once your image is cropped, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) To the immediate right to the "Crop" button at the top, you need to click "Resize." Resize your image to 125px by 125px. Hit OK.
4 – Next, click on the "Create" tab (to the right of the "Edit" tab) at the top of the page. This is where you can add effects, text, stickers, frames, and etc. to your image. When you're working, to make your image larger, adjust the "Zoom" on the bottom of the page.
5 – Play around and embellish your image in any way that you want. I recommend placing your blog's name somewhere on the image.When you're done, click on the tab "Save & Share." You'll want to name your file and save the photo on your computer.
Step 2: Upload Your Image to Your Server After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you have a Photobucket account, upload it there.Since I used Blogger as my original blogging platform, I used Picasa Web Albums. Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select "Copy Image URL." The image URL should look something like this: " http://www.YourDomain.com/
ButtonImageName.jpg" - Keep the image URL handy. You are going toneed it.
Step 3: Create the Code for Your Blog Button Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.) This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you're writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the "Grab my Button" box.If you want to make a grab box for your blog button, skip this step and go onto the next. For most bloggers, they do NOT need to follow this step.)
:
<a href= "http://
www.YourSiteURL.com"><img
src="http://
www.YourButtonImageURL.jpg" /
></a>
You should replace the
"YourSiteURL" and
"YourButtonImageURL" with your
own URLS.
The <a href="…."> portion of the
code is the page that you want
visitors to land on when they click
the button.
The <"img src="…."> stands for
"image source." It's the location of
the image that you want to use. This
is where you copy and paste your
image URL.
*** Important: *** Don't forget to
end the code with </a>. That's how
you close the code.
In my own blog, this is what my blog
button code looks like.
<a href="http://
www.mypregnancybaby.com"><img
src=" http://
www.mypregnancybaby.com/wp-
content/uploads/2011/01/blog_
button.jpg " /></a>
When anyone posts that code on their sidebar, or in a blog post, it looks like this: (I hope that explanation makes sense. Please let me know if it doesn't!)
Step 4: Make your "Grab my Blog Button" Box Code Now that you've created the code for your button, you need to create a "Grab My Button" Box so that other bloggers can grab your code and promote your blog on their site. This code includes the "Grab my blog button" box, as well as your blog code. For most bloggers, this is the ONLY code that they need to know. This code is a bit tricky, but I've tried to explain it the best that I can. There are two parts to the code:
1 – Your image
2 – The grab box, where your code appears for others to grab.Here is the HTML code for the entire thing.:
<img src="http://
www.YourButtonImageURL"
alt="YourSiteTitle" /><div
style="width: 125px; height: 125px;
overflow: auto; border: 1px solid #
666666;"><a href=" http://
www.YourSiteURL.com"
target="_self"><img
src=" http://
www.YourButtonImageURL"
alt="YourSiteTitle"
width="125" height=&#
34;125" /></a></div>
It's a very confusing code, and all the strange symbols – such as " stand for quotation marks. (For some reason, WordPress and Blogger can't pick up the quotes that should go around the YourSiteURL, and they transform them into ".) A very confusing code, but it works. Here's what the finished product should look like:
<a href=" http://
www.mypregnancybaby.com/"
target="_self"><img src=" http://
lh6.ggpht.com/_33SCR_mnGZw/
TNTBmgIvc8I/AAAAAAAAARw/
STQlAR-zXjY/blogbutton.jpg " alt="
HipChickGuidetoPMSPregnancyandBa
bies" width="125″ height="125″ /></
a>
Copy and paste the code I've given you into Notepad, or TextEdit (if you are using a Mac). Replace all the URLS with your own.
Step 5: Copy and Paste the Code and Use it on Your Sidebar If you are using a self-hosted WordPress blog, you need to go to Appearance → Widgets → Text. Copy and paste the blog button code. If you're using Blogger, underneath the "Design" tab, you will need to "Add a Gadget." Then scroll down until you find "HTML/Javascript." Click on that and copy and paste the blog button code. Save your work. Test the code to ensure that it works properly. It should.
Troubleshooting Problems:
If you are having problems with the blog button code, check your quotation marks. Each and every URL needs to have quotes before and after it.If you're still have issues, your quotes may have been changed to " smart quotes," which are curved quotation marks. HTML hates smart quotes.HTML wants straight quotes. Unfortunately, this means, you will need to go back to the blog button code and carefully delete every single quote (") and re-type it.There are a total of 6 in the code that I've given you.Good luck. Please let me know if this tutorial on "how to make a blog button" was helpful. I've tried to make it as simple as possible. I may do a video tutorial when I have more time. If you enjoyed this post, please. . . Share this post with
your friends!
(And if you can't figure it out, I am
more than willing to help you figure
it out. All I I ask is for a link back to
this post! I'd love the exposure!)
Please note that if you Read this
Post correctly, it WORKS. A lot of
people have been emailing me,
claiming that it doesn't work, or
that they are confused. The reason
is that you did NOT read the post in
its entirety. Skipping will make you
confused! The Code in Step 4 is the
code that Most people are looking for.
When another blogger grabs your blog button and posts it on their sidebar, it opens you up to new visitors and more followers. In a nutshell, your blog button is your main advertising tool. (Newbies – a blog button is a hyperlinked image or logo that takes a visitor to your homepage when it's clicked on.) To drive traffic to your blog, you'll want to design and make a blog button that makes visitors want to click. Mommy bloggers create the most stylish blog buttons. I've found that the most successful mom and parenting bloggers have well-designed blog buttons.You can hire a graphic designer to create a blog button for you for a minimal fee, or you can design it yourself.This tutorial gives you the stepsinvolved in:
How to make a blog button.
Creating a code box that allows other bloggers to grab your blog button and place it on their blog.
How to add and display the code box and make a blog button using WordPress and Blogger platforms.How to Make a Blog Button – Basics The standard blog button is 125px by 125px. You can choose a size larger than this, but don't go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125.
Step 1: Design and Create Your Logo In order to design and make your blog button, you will need access to an image editing software – such as Photoshop.Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available.My favorite used to Picnik – which was free online photo editing site,owned by Google. It was so easy to use, but unfortunately in Apriln of 2012, Google closed it down. Some alternatives to Picnik that you might want to use include: PicMonkey – A super easy to use photo editing program with a creative web interface. Simple to use, and it's the brainchild of former Picnik engineers. I love it! BeFunky – This lets you edit photos, add cool filters, add text, and other basic stuff. Easy to use, and there is also a smartphone app for it. It's an Instagram alternative, but not as cool as Instagram. iPiccy - An online photo editor with simple photo tools – like crop, resizing, rotating/flip, hue and saturation, and other basics.Ribbet - If you loved Picnik, Ribbet is a photo editing platform that looks nearly identical as Picnik. It is simple to use, and you can basically do all the same stuff with it – like adding stickers, text, resizing,cropping, frames. Premium (paid) users can play with the curves and levels.
For more advanced bloggers – if you're familiar with Photoshop, but you don't have a copy of Photoshop,consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses.You can crop pictures, resize them,free transform, add text, add shapes and more. I absolutely love Pixlr. For this tutorial on how to make a blog button, I used Picnik.(* Updated: August 2012– Please notethat I wrote this blog post when Picnik was still active. You can take the basics from the below instruction.I definitely recommend Ribbet as an alternative, since the design is nearly identical.) Creating a Blog Logo in Picnik –Step by Step
1 – Go to Picnik.com. And upload
your photo.
2 – After you've uploaded the photo,you will need to crop your image into a perfect square. It doesn't matter what size your image is. At the top of the screen, you will see the word "crop." Click on Crop. (See the screenshot below). In the drop down menu, you'll want to choose "square." Click on the square to move it where you want.Click on "OK" at the top to crop.
3 – Once your image is cropped, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) To the immediate right to the "Crop" button at the top, you need to click "Resize." Resize your image to 125px by 125px. Hit OK.
4 – Next, click on the "Create" tab (to the right of the "Edit" tab) at the top of the page. This is where you can add effects, text, stickers, frames, and etc. to your image. When you're working, to make your image larger, adjust the "Zoom" on the bottom of the page.
5 – Play around and embellish your image in any way that you want. I recommend placing your blog's name somewhere on the image.When you're done, click on the tab "Save & Share." You'll want to name your file and save the photo on your computer.
Step 2: Upload Your Image to Your Server After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you have a Photobucket account, upload it there.Since I used Blogger as my original blogging platform, I used Picasa Web Albums. Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select "Copy Image URL." The image URL should look something like this: " http://www.YourDomain.com/
ButtonImageName.jpg" - Keep the image URL handy. You are going toneed it.
Step 3: Create the Code for Your Blog Button Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.) This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you're writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the "Grab my Button" box.If you want to make a grab box for your blog button, skip this step and go onto the next. For most bloggers, they do NOT need to follow this step.)
:
<a href= "http://
www.YourSiteURL.com"><img
src="http://
www.YourButtonImageURL.jpg" /
></a>
You should replace the
"YourSiteURL" and
"YourButtonImageURL" with your
own URLS.
The <a href="…."> portion of the
code is the page that you want
visitors to land on when they click
the button.
The <"img src="…."> stands for
"image source." It's the location of
the image that you want to use. This
is where you copy and paste your
image URL.
*** Important: *** Don't forget to
end the code with </a>. That's how
you close the code.
In my own blog, this is what my blog
button code looks like.
<a href="http://
www.mypregnancybaby.com"><img
src=" http://
www.mypregnancybaby.com/wp-
content/uploads/2011/01/blog_
button.jpg " /></a>
When anyone posts that code on their sidebar, or in a blog post, it looks like this: (I hope that explanation makes sense. Please let me know if it doesn't!)
Step 4: Make your "Grab my Blog Button" Box Code Now that you've created the code for your button, you need to create a "Grab My Button" Box so that other bloggers can grab your code and promote your blog on their site. This code includes the "Grab my blog button" box, as well as your blog code. For most bloggers, this is the ONLY code that they need to know. This code is a bit tricky, but I've tried to explain it the best that I can. There are two parts to the code:
1 – Your image
2 – The grab box, where your code appears for others to grab.Here is the HTML code for the entire thing.:
<img src="http://
www.YourButtonImageURL"
alt="YourSiteTitle" /><div
style="width: 125px; height: 125px;
overflow: auto; border: 1px solid #
666666;"><a href=" http://
www.YourSiteURL.com"
target="_self"><img
src=" http://
www.YourButtonImageURL"
alt="YourSiteTitle"
width="125" height=&#
34;125" /></a></div>
It's a very confusing code, and all the strange symbols – such as " stand for quotation marks. (For some reason, WordPress and Blogger can't pick up the quotes that should go around the YourSiteURL, and they transform them into ".) A very confusing code, but it works. Here's what the finished product should look like:
<a href=" http://
www.mypregnancybaby.com/"
target="_self"><img src=" http://
lh6.ggpht.com/_33SCR_mnGZw/
TNTBmgIvc8I/AAAAAAAAARw/
STQlAR-zXjY/blogbutton.jpg " alt="
HipChickGuidetoPMSPregnancyandBa
bies" width="125″ height="125″ /></
a>
Copy and paste the code I've given you into Notepad, or TextEdit (if you are using a Mac). Replace all the URLS with your own.
Step 5: Copy and Paste the Code and Use it on Your Sidebar If you are using a self-hosted WordPress blog, you need to go to Appearance → Widgets → Text. Copy and paste the blog button code. If you're using Blogger, underneath the "Design" tab, you will need to "Add a Gadget." Then scroll down until you find "HTML/Javascript." Click on that and copy and paste the blog button code. Save your work. Test the code to ensure that it works properly. It should.
Troubleshooting Problems:
If you are having problems with the blog button code, check your quotation marks. Each and every URL needs to have quotes before and after it.If you're still have issues, your quotes may have been changed to " smart quotes," which are curved quotation marks. HTML hates smart quotes.HTML wants straight quotes. Unfortunately, this means, you will need to go back to the blog button code and carefully delete every single quote (") and re-type it.There are a total of 6 in the code that I've given you.Good luck. Please let me know if this tutorial on "how to make a blog button" was helpful. I've tried to make it as simple as possible. I may do a video tutorial when I have more time. If you enjoyed this post, please. . . Share this post with
your friends!
(And if you can't figure it out, I am
more than willing to help you figure
it out. All I I ask is for a link back to
this post! I'd love the exposure!)
Please note that if you Read this
Post correctly, it WORKS. A lot of
people have been emailing me,
claiming that it doesn't work, or
that they are confused. The reason
is that you did NOT read the post in
its entirety. Skipping will make you
confused! The Code in Step 4 is the
code that Most people are looking for.
.PNG)
0 comments:
Post a Comment