In any case, since beginning my blog about a year ago, I've done a lot of blog designing (and re-designing) and learned a few things. When I first started (BEFORE I knew that my darling brother was a genius), I was lucky enough to have a blogging friend introduce some of the basics of blogging and html code to me, which was a HUGE blessing since I knew as much about blogging as Miley Cyrus knows about restraint.
Anyway, I've learned a few things that I thought might be helpful for other beginning bloggers and renovators out there.
One of the first things I learned when I started to become more serious with my blogging was how to make a blog button.
BUTTON
Step 1: Size
Before you start deciding on what picture you want for your blog button, you need to decide on size. Since you're probably kind of new to this, a good idea would be to visit some of your favorite blogs to see what size buttons they offer and consider offering the same. I offer a 200x200 pixels blog button, 200x150, and 200x120. Consider these sizes when you're deciding what photo to use. For instance:
This is a great photo, but if I were trying to make a 200x150 pixels button...
*Note: A lot of blogs use passionfruit for their ads now, but it's a good idea to have a few button options available on your blog for others who want your button to appear on theirs.
Step 2: Resize, Crop, Edit
Once you've decided the size and selected your photo, you need to make it the correct size. You can use any photo editing program (heck, you could use paint if you wanted), but I would suggest creating an account with Photobucket because you will need an online program that will give you an html code for photos that you upload.
Whatever program you use, you will resize, crop, and edit your photo until it looks "just right!" (PicMonkey
Now that your photo is resized, cropped, and edited to your liking, you will upload it to photobucket. Click on the orange upload button...
select the photo from your files to upload...
then, click on your newly uploaded photo beneath the video ad, and you will be taken to your photo.
Step 4: HTML code
In the right sidebar, just under the advertisement, there's a box that says "Links to share this photo." Click on the code next to HTML and it will automatically copy the code for you.
Open notepad and paste the html code there. It should look kind of like this:
*Note: using a word document for HTML coding is the worst method of coding because sometimes it changes things around so that the code won't work. i used Word in this case for visibility. Notepad is best.
My example - I changed what was in red:
<a
href="http://s1203.photobucket.com/user/dangstanges/media/2013-04-30203704200x200_zps5178699a.jpg.html"
target="_blank"><img
src="http://i1203.photobucket.com/albums/bb388/dangstanges/2013-04-30203704200x200_zps5178699a.jpg"
border="0" alt=" photo 2013-04-30203704200x200_zps5178699a.jpg"/></a>
What mine looks like now:
<a
href="http://suedrew.blogspot.com"
target="_blank"><img
src="http://i1203.photobucket.com/albums/bb388/dangstanges/2013-04-30203704200x200_zps5178699a.jpg"
border="0" alt=" photo 2013-04-30203704200x200_zps5178699a.jpg"/></a>
*Note: Do NOT eliminate the quotation marks around your website, and don't forget the "http://" before your web address, either.
The target="_blank" that comes after the website means that when you click on the button, it will open a new tab in the reader's search engine to view the site. To make it so that the reader will be taken to the site without opening a new tab, simply remove target="_blank".
The target="_blank" that comes after the website means that when you click on the button, it will open a new tab in the reader's search engine to view the site. To make it so that the reader will be taken to the site without opening a new tab, simply remove target="_blank".
Your button is now finished! Send this new HTML code to your blogging friend and they can paste it with the rest of their buttons.
TEXT BOX
Having a button is good, but now you need a text box beneath it for easy access.
Step 1: Code
This is the code you will need. The first part in red is the code for your button that we just created. The second part in orange and pink is the code for the text box that will go underneath your button. The blue is the orientation of the button and text.
<center>
<a href="http://suedrew.blogspot.com/" target="_blank" title="Chevron & Lace"><img alt="200x200Button" border="0" src="http://i1203.photobucket.com/albums/bb388/dangstanges/Chevron%20and%20Lace/2013-04-30203704200x200_zps740e7048.jpg" /></a> <center>
</center>
<center>
<textarea cols="13" id="code-source" name="code-source" rows="3"><center>
<a href="http://suedrew.blogspot.com/"target="_blank"><img border="0" src="http://i1203.photobucket.com/albums/bb388/dangstanges/Chevron%20and%20Lace/2013-04-30203704200x200_zps740e7048.jpg" border="0" alt="200x200Button"></a> </center>
</textarea></center>
</center>
Paste your button code that we just made over the red text and again over the orange text, but LEAVE THE PINK AS IT IS. If you want your button and text box to be oriented to the left or right, simply replace all of the times it says center (in blue and some in pink) with left or right.
Step 2: Paste
Copy your new HTML code, the one you just made, and paste it where you want it to appear on your blog.
Good luck in your blogging! Was this helpful? Leave a comment if you have problems and/or questions.
-Sue
SO HELPFUL!! ;)
ReplyDelete