Friday, September 6, 2013

How To Put A Button In To Your Blog

Instructions below are for Typepad, Blogger and Wordpress (without a host site): 

For Typepad:

You need two things:
*the button image above (button size is 120x120)
*the url (web address) that you want to go to when someone clicks on the button; i.e. http://www.thecraftycrow.net/

~ Let's begin! ~
drag or copy the image to your desktop
upload the image to the files section of your blog (click Control Panel tab then Files tab)
where it says Upload A New File click Browse and find the image on your computer - then click Upload
after it is uploaded, find the file name (in the column to the left on the same page) and click the link icon (looks like a little chain link)
This is the url for your image - keep this window open! Now open the Typelists tab in a new window, click on Create A New Typelist
in #1 choose a Link list
in #2 choose a name for your list then click Create New List. In the Title field put the url of your image (copy and paste it from the window you left open). Now this is the trickiest part - you'll have to change the html a bit. Remove the part show in red:
<a href="http://belladia.typepad.com/CCButton2.gif">Download CCButton2.gif (8.4K)</a>

and change it to this (new part in blue):
<img src=
"http://belladia.typepad.com/CCButton2.gif">

Make sure the quotes are in there because they make all the difference!
Tricky part done!

now in the URL field put the web address that you want to go to when the image is clicked, for example:
http://www.thecraftycrow.net/

now click Save
This new Typelist has to be added 
to your blog.

go to your blog's Design tab and click Select Content
click on the box next to your new Typelist and click Save Changes at the bottom
Click on Order Content if you'd like to change where the button is located on your sidebar.

Be sure to click on the button from your blog to make sure it works and you're done!

I have to assume there are other ways of doing this but this is how I do it and it works :)  If any of you more experienced computer people out there have any tips please leave them in the comments!  Thanks, I hope this helps someone :)

~~~

For Blogger (instructions graciously created and contributed by Jo at A Bit Of This And A Bit Of That):

Upload the image (available above) to an image saving site, I tried Flickr but it didn't work but Picasa does.

In Picasa there is a box to the left that says 'HTML to embed in website' copy the text in the box.

Log into Blogger
Go to Layout
Click on "add a page element"
Click on "HTML/JavaScript"

paste the text into the main box (not the title box)

Should look like this:

<a href="http://picasaweb.google.com/jojoebi/UntitledAlbum/photo#5197566517334600338"><img src="http://lh4.ggpht.com/jojoebi/SCF3NaoxapI/AAAAAAAAA58/uhCnrSvw5OQ/s144/unknown.gif" /></a>

Basically this is what the mumbo jumbo means:

<a href="CHANGE THIS TO THE PAGE YOU WANT TO LINK TO"><img src="THIS IS THE IMAGE URL" /></a>

The final code should look something like this (different image link but the rest should be the same):

<a href="http://belladia.typepad.com/crafty_crow/"><img src="http://lh4.ggpht.com/jojoebi/SCF3NaoxapI/AAAAAAAAA58/uhCnrSvw5OQ/s144/unknown.gif"/></a>

Click on 'save changes' then check to see if it works, you might need to refresh the page.

Thanks so much to Jo at A Bit Of This And A Bit Of That for taking the time to figure it out for Blogger users and making it available to The Crafty Crow readers!

~~~

For Wordpress without a host site (instructions generously made available by Anna of Three Sneaky Bugs):

1. Upload image to Flickr - I kept the image set at private since it is not technically my image to share.

2. In a text widget enter the following html:
<a href="http://belladia.typepad.com/crafty_crow/" title="The Crafty Crow"><img src="http://farm4.static.flickr.com/3200/2407534925_02acb778d0_m.jpg" alt="The Crafty Crow"></a>

Note the 1st set of quotes is the link to the site, the 2nd set points to the image. Visually - <a href="URL of website"><img src="URL of image" alt="The Crafty Crow"></a>

Thank you Anna, your help is very much appreciated!

~~~

Alternative Wordpress instructions contributed by Kelly of Be A Fun Mum:

1. Copy badge code from Crafty Crow.
2. On your Widget dashboard, drag a text widget over to desired side bar.
3. Hold the control key down while you press v (Ctrl + v).
4. Press save.

5. Done!

Thank's for visiting.
Source: thecraftycrow

No comments:

Post a Comment

Comment wisely and i'll be glad to answer your comment