Blog BWP Hello Under The Hood Week Two

Skill Up: Make A Blog Button, HTML & CSS (Now With Bonus Budgie!)

July 21, 2014


Most blog platforms have a visual editor where you can format text and it will cleverly transform it into code for your site. Thank goodness. Writing code for every blog post would be a crazy amount of work. We are lucky that Blogger, WordPress, Typepad and the like will do it for us.

That said, sometimes you DO want to know a bit of code so that you can tweak things that are being pesky (or post code elsewhere on the web!)

I find that I often need to mess about with formatting LINE BREAKS in WordPress – sometimes hitting ‘return’ or ‘enter’ just does not work. I also find that I need to use HTML for creating buttons in my sidebar (images that link to another page or site.) It’s good to know how to create a link using code too.

So here’s some basic HTML you might want to play around with on you blog. (If you’d like to learn more, there are some great books out there like this one or you can Google about for info. I like this site and this one has been recommended to me by a Blog With Pip student too.)

You can also click into the HTML window on your blog and notice how the code works.

  Add a link manually in your blog’s TEXT or HTML window (or wherever you access the HTML code) using HTML:

<a href=”type url here“>Add the text you want to appear here</a>
here’s an example of what I mean: <a href=””>A cute blogging eCourse</a>
And it will appear like this… A cute blogging eCourse

(I’ve put this in RED so you can see it more easily… not because this code makes it red!)  

Make A 3 Minute Blog Button In WordPress from pip lincolne on Vimeo.

The password for this video is guysmiley

Using an image to link to another page or site : the long-winded, manual way
NB: You can also create a blog button for Blogger using this method!
NB: Watch the video to see a sneaky WordPress way to do this!

Resize your image to the size you need (for a button on your blog sidebar it might be 150 x 150 pixels, for instance)
Now you need to upload your image.
If you are a blogger upload it to your media library and grab the URL for the image.
If you are a Blogger or other platform blogger upload it to an image hosting site like Google’s (and Blogger’s) Picasa or something like Photobucket.
Again, grab the URL for the image. (Here’s how I did it)
You’re going to use the image URL next up!
Here’s an example of the code you might use.
You need to add your own destination url and image source url where mine is. Leave the rest the same as shown below. manual image link Which will appear like this when published as a text widget (WP) or an HTML gadget (Blogger) (Or within a blog post, too!)

In Blogger you add this linky-image code by going to Layout>  Add A Gadget > HTML/Javascript and pasting the code in the window In WordPress you add this linky-image code by going to Widgets> then choosing a Text Widget > dragging it into place in the correct sidebar or footer> pasting the code CODE

OTHER STUFF: To add extra line breaks in your paragraph when things are getting weird (often they do in WordPress and Blogger!)

Often you need to add extra spaces because browsers want to bunch all your text up and make it look icky. Here’s some ways to troubleshoot that bunchiness and get that extra space…

First try this: Type SHIFT and ENTER at the same time or try one of these at the end of the line (where you want a break/return) also you could add… &nbsp;

If that doesn’t work you can try these options: <br>  (Line Break) or <p> (Paragraph)  or <hr/> (Horizontal Rule)

Which is all seemingly confusing, but actually makes sense and is really helpful if can’t get your spacing/formatting correct!
See here for examples of how they should sit around your text. border More code:
<b> and <b/> = bold : The code would look like this —> I like my cupcakes <b>super</b> frosted
<i> and = italic : The code would look like this —> I like my cupcakes <i>crazily</i> iced like thus…

I like my cupcakes super frosted
I like my cupcakes crazily iced

Really. This stuff is a whole university course. These are some basics you can use. If this is fun for you I would encourage you to learn more.



pixlr for free online image editing
htmldog for html lessons

No Comments

Leave a Reply