Tuesday, May 1, 2012

Blog Design 101 - Links

Hi all! Hope you are enjoying the first day of May. Shyscout hit 200 followers last night!! *Doing the happy dance* Thank you so much for the support. I really love getting to know all of you and checking out your blogs. What an incredible way to start the month! I also thought it was only appropriate to kick start the month with a new feature on the blog – Blog design 101 – tutorials to help bloggers beautify their blogs. I will be breaking tutorials up in to two groups – html and graphics. Here goes nothing...

---------------------------------------------------------------------------

Last week I asked you to submit any design problems you would like solved. For my first set of tutorials I plan to answer your questions in the order they were submitted, therefore, today I am going to tell you a bit about html hyperlinks - aka - links.


Links are used all over the web to connect one webpage to another. Links use a word, phrase, or image to connect you to another document. Knowing how to properly write a link is beneficial to bloggers because it allows you to:

1. Connect your pages to previous posts.
2. Connect your content/images to their original source.
3. Allows you to connect a button to your page.

Thankfully links are one of the easiest and most straight forward codes out there.

LINK SYNTAX


EXAMPLE:


---------------------------------------------------------------------------

LINKING IMAGES
For linking images - such as creating a functional button for your blog - you simply insert the image code in place of the link's text.

EXAMPLE:


-----------------------------------------------------------------------------------------

ACTIVE LINK WITHIN BLOG POST
In order to create an active link within your blog's post simply place the link within your text.

EXAMPLE:


Depending on your blogs layout you may want to bold the link so that the link stands out within the text like so:

EXAMPLE:


-----------------------------------------------------------------------------------------

BLOG TAG LINKS
Last but not least - to create a link for specific blog tags simply use the following link

EXAMPLE:


*If your tag has multiple words place a %20 where the space would be.
For example: .../label/Wardrobe%20Wednesday

-----------------------------------------------------------------------------------------

I hope this was helpful to some of you. I realize we are all on different pages when it comes to blog design and coding. I was asked to explain this, so here it is. The tutorials will range in difficulty from here on out. Feel free to ask any design questions you would like answered in the comments below and I will cover them in a tutorial as soon as possible :]

18 comments:

  1. I still don't quite understand it but that's just me! I get how to do links on blogger but not sure about buttons still.Rx

    http://sandersonsmithstory.blogspot.co.uk/

    ReplyDelete
    Replies
    1. I am sorry! Once you upload an image (your button) to a host website - for example photobucket - they will give you a "direct link" url. You then copy and paste that inside of the ""'s above replacing the "MyButton.jpg" text with the direct link url - aka link to your image.

      Delete
  2. AWESOME TIPS - thank you for sharing - I'm html impaired so this helps!
    Congrats on reach 200 followers - just a matter of time until it's 2000!!!
    xx
    justyn
    thoughtsbyapetitebrunette.com

    ReplyDelete
    Replies
    1. :] Your welcome! Thank you so much, haha.

      Delete
  3. Thank you so much for doing this: I know there are so many bloggers out there that can use all this information. It would have helped me so much when I first started blogging several years ago! I've had to learn everything I know by trial and error.

    ReplyDelete
    Replies
    1. You are welcome. Yeah, that is how I learned too. Hopefully this can be a go to place for the info now. I also plan to tackle more difficult things for more advanced bloggers :]

      Delete
  4. i am the WORST teacher - so it's awesome to see someone teaching this kind of stuff. i realize how hard it is starting out (i started coding HTML in 2001 ....haha back in the day of open diary....ohmygoshi'mgettingold) anyhow this is really awesome for you to do and you did a REALLY good job with it! i wouldn't even know how to teach someone this, even though it's simple, i'd just be like 'link it.....you know. a href. yeah.'

    ReplyDelete
    Replies
    1. At first I was a wee bit scared I wouldn't be able to work out how to word it all but I think I figured out how to break it up. I started with LiveJournal! Tehehe. Thank you so much.

      Delete
  5. Congratulations on hitting 200 Allison! I'm pretty excited that you're doing a series like this because SOMEONE needed to : ) Can't wait to see what else you'll be posting about blog design!

    ReplyDelete
    Replies
    1. Thank you so much!! I think next week will be about images...

      Delete
  6. Thanks for doing this, Allison. I have no issues with linking content and that type of stuff. Mainly because it pretty much does it for you with blogger, but it was the buttons and blog tags I had the most trouble with. This seems pretty easy, but still, I'm such a dummy with computer stuff and maybe this will make more sense if I read it NOT after I just woke up from a loooong nap. :)

    ReplyDelete
    Replies
    1. Of course! I know blogger does it for you and I questioned whether I should even cover it but I figured it was a good thing to know if you want to get further in to html. Hahaha.

      Delete
  7. This is so neat! You really know your stuff :)

    ReplyDelete
    Replies
    1. Thanks! I hope so. I really look forward to getting more in depth in the future so I can learn new things along the way as well :]

      Delete
  8. Going to link to this page when people are struggling with codes!

    AN IDEA
    I've seen plenty of bad codes when people try to do a buttons page. The link+image isn't put together correctly or the textarea code they use has some of the code creep in the box haha.

    ReplyDelete
    Replies
    1. Thank you!

      Ha, yikes. Yeah I have seen that too. Hopefully this will help people when there are issues in the future :]

      Delete

Newer Older Home
Related Posts Plugin for WordPress, Blogger...