Jump to content

How to add your button (and links) to your blog


Veronika

Recommended Posts

I will assume you are using Blogger (blogspot):

 

To learn how to change your links list and also add your own button (or other buttons from crochetville CALs for example) come here:

 

To edit your template you go to: http://www.blogger.com/home

 

Then click on the blog options (icon18_gear.gif)

And when you are there, go to template edit (i have it in spanish, so I´m not sure about the exact words, but you get the idea).

There you have to be very careful of what you change... cause you can make a mess :) BUT don´t be afraid.. just follow the instructions here.

 

I recommend that you copy the whole text (from <!DOCTYPE... to the end and save it as a back copy in a txt file (notepad) just in case you make a mess, you can always go back to where you started).

 

Now you will have to chose where to add the new buttons/links... and this will depend on the template you are using (template = design). You can add them on the top, middle, wherever you want... just read your template and try to find something you understand (like for example... if you see "about me" then you can check in your actual journal where that line is in your template...

But this site explains it better.

 

When you know where you want the new images to be... this is the code you add:

<center>

<a target="_blank" href="HERE YOU ADD THE URL OF THE SITE YOU WANT TO LINK">

<img border="0" src="HERE GOES THE URL OF THE IMAGE" width="730" height="264"></a></center>

 

Changing what´s in caps (the url of the image, and the url of the link)

If you are adding your own button, you can link it to the image itself, so people can click and it will open in a new window to save your button) (check my blog to see how that works).

 

Hope this is clear as it´s a bit hard to make a tutorial in a different language tee hee :blush . If you have any doubts, PM me :think

Link to comment
Share on other sites

hahahaha

ok... first you save the image from my post...

then you need an image hosting (I use http://photobucket.com or http://www.flickr.com), go and create an account. Both are free and work pretty well.

 

Once you have your account you can upload images (it´s like a hard disc but online). when you upload your image you´ll get a link (url).

For example: http://www.yourimagehosting.com/yourbuttonname.jpg (or gif).

 

Clear now? that´s your image url. :cheer

Link to comment
Share on other sites

Melannie, I don´t know what are you doing wrong.. should work if you type it right.

Try using http://photobucket.com/ as image hosting.. flickr is a new and a bit weird system lol. I use http://photobucket.com/ and have no problems.

Let me know if you could fix it!

 

Crochetlady: Let me know if you have any problem adding the rest of the buttons with its urls :D

Link to comment
Share on other sites

  • 3 months later...
  • 2 months later...

Mimi,

 

Let me see if I can help. We're going to use my "Hat A Week" button as an example.

 

The first thing I need to know is the URL of the site I want my button to link to when someone clicks on it. I need to find out what the URL is for the Hat A Week CAL. It is: http://www.crochetville.org/forum/showthread.php?t=19676

 

Now I upload the button to my Photobucket account and Photobucket assigns it the URL of http://i33.photobucket.com/albums/d55/Sakkasie/hat_a_week.jpg .

 

OK, now it's time to go put this button on my blog. I log into blogger and choose to edit my template. I determine where I want my button to be located on my blog and as Veronika explained earlier I type in the following:

 

<center>

<a target="_blank" href="HERE YOU ADD THE URL OF THE SITE YOU WANT TO LINK">

<img border="0" src="HERE GOES THE URL OF THE IMAGE" width="730" height="264"></a></center>

 

I am going to replace the words HERE YOU ADD THE URL OF THE SITE YOU WANT TO LINK with the Hat A Day CAL URL, http://www.crochetville.org/forum/showthread.php?t=19676

 

Next, I need to replace the words HERE GOES THE URL OF THE IMAGE with the URL of my button that is being hosted on Photobucket:

 

http://i33.photobucket.com/albums/d55/Sakkasie/hat_a_week.jpg

 

This will make the coding for my button in my template read as follows:

 

<center>

<a target"_blank" href="http://www.crochetville.org/forum/showthread.php?t=19676">

<img border="0" src="http://i33.photobucket.com/albums/d55/Sakkasie/hat_a_week.jpg" width="730" height="264"></a></center>

 

Does this make any more sense to you? Basically what you need to know is two URL's to make your button work on your blog. Hope this helped.

Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...
just follow the instructions here.

 

 

When you know where you want the new images to be... this is the code you add:

<center>

<a target="_blank" href="HERE YOU ADD THE URL OF THE SITE YOU WANT TO LINK">

<img border="0" src="HERE GOES THE URL OF THE IMAGE" width="730" height="264"></a></center>

 

Changing what´s in caps (the url of the image, and the url of the link)

If you are adding your own button, you can link it to the image itself, so people can click and it will open in a new window to save your button) (check my blog to see how that works)

I just wanted to say that the link in "here" doesn't work anymore:think also every template is different for example my button code would look something like this:

 

<li><a href="http://thelink/"><img src="http://host/profile/image.jpg"></a></li>

 

so your code might not work on every blog it would be better just to use the main code as the one I use it has nothing specifically linked to my blog template in it:) you also don't have to add the "width="730" height="264" part because your button should already be in the correct size (otherwise you won't know how well it would look when it's turned into a small image),unless it's in a different part of your template but that's a different story, and you can also adjust it on your photohost so there is no need for size adjustments in the code.

You can also add some dotted lines above and underneath the button if you like to separate it from everything else.

All you have to do is put this: <ul> above the code and this: </ul> underneath your codes so that the image or text is inbetween the dotted lines (the <ul> and </ul>):)

Link to comment
Share on other sites

  • 3 weeks later...
  • 9 months later...
ok what is the URL of my image? lol

melannie

 

This is most likely too late but, this is what a person would add to your blogs template to link a button to a site:

First, to add a button to the classic template, you have to add the URL to the template. go to the site you want to add, hightlight in the URL in the address bar, click right & copy, go to the template, add it where you want the button to be:

 

(this is the URL for Crochetville)

<p><a href="http://www.crochetville.org/forum/index.php"> then click save template changes,

 

then go to photobucket, & highlight in the HTML TAG, click right to copy, then go to your blogs template, & carefully,click to the right of the > (arrow), down where you added the URL, & click right & paste, add the button code.

<img src="http://i95.photobucket.com/albums/l124/your username goes here/crochetbuttons/crochethook3.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>

 

(this is what it would look like

<p><a href="http://www.crochetville.org/forum/index.php"><img src="http://i95.photobucket.com/albums/l124/your username goes here/crochetbuttons/crochethook3.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>

 

I went back to the CLASSIC template, instead of the one that has ADD PAGE ELEMENT in it, the classic template is so much easier to work in, & it's easier to add buttons also.....

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...