WordPress.com Techie Bits

Some people are asking how to do some of the “techie” things in the Follow a Newbie Friday post so I said I’ll post the basics here – I blog with wordpress.com so be aware that you may have to do it a little differently if you blog with something else.

Making the wee hyperlinks (the blue bits of text).

  1. Write the word(s) that you want people to click on.  This could be a word or phrase about the page the link takes you to, or it could be the name of the blog/website.
  2. Highlight these words.
  3. Click on the wee chain-link symbol. In WordPress.com it’s the 10th symbol from the left and is next to the one that makes all your text start on the right.The WordPress.com Link Button
  4. Type in the website of the place you want people to go. I do this by going straight to the chosen blog/blog post and copying it from the bar at the top and then I paste it in.
  5. You can add a “name” for the link, and I prefer to tick the box that says to “open the page in a new window/tab” because I don’t want people jumping away from my post then not finding their way back to me again.Making hyperlinked text in WordPress.com

Adding a badge to a wordpress.com POST:

  1. Copy the code that should be below/beside the badge you want. Copying badge code
  2. Open the post and when you’re ready to add it, switch over to HTML mode (top right of the box, beside “visual”.   The WordPress.com HTML tab
  3. Paste the code in where you want it.  You then need to leave it in HTML mode. IF you ever change back to Visual for something, be sure to click it back to HTML when you update.

If you want to show the code below your badge so others can take it, this appears to be slightly more complicated on WordPress.com.  It won’t let you add the “text area tag” but that just means you need to write it in a different way. My code is written for WordPress.com so you shouldn’t have a problem with this badge.  Well, maybe unless you’re on blogger… I got the instructions from Grudge Mom but basically, you use this – [ sourcecode language=’html’ ]   [ /sourcecode ] (but without the spaces around the [ ]) so that it will show up. It was surprisingly easy to do but I’m not proficient enough to be able to explain it simply, so if you’re stuck, get in touch with me and I’ll give you a hand if I can.

Making a badge:

  1. To make a badge you first have to have an image. This can be a photo or you can use photo type software to make it. I was making mine quickly so I went into Paint (yes, the free one on your PC) and drew my person.  Then I went into PowerPoint (yes, bog standard PowerPoint) and added the spotty picture that is my blog background and then added my stick man picture on top. When I clicked “save as” I went to the wee down arrow beside the words PowerPoint Presentation and scrolled through the options to find JPEG.
  2. I registered free for for Photobucket and uploaded the picture I’d just made in PowerPoint.  There are lots of editing options when you click on your picture.  The “decorate” tab let me add text – including glittery text! and you can then play about with your image.  When you’re done, save it.
  3. Back in your album you’ll see your edited picture.  When you hover over it, you’ll see four codes appear below it.  You need to copy the Direct Link one. Where to find the direct link code in Photobucket
  4. (“Blogger” bloggers will need to check the following code with someone else.) Now, to make the badge you need some code so I’m going to use mine:

< a href=”INSERT THE WEBSITE YOU WANT PEOPLE TO LINK TO HERE” target=”_blank”><img border=”0″ src=“INSERT THE DIRECT LINK FOR YOUR IMAGE HERE”alt=”INSERT YOURBLOGNAME.WORDPRESS.COM HERE”></a><br><div style-“overflow:hidden;”>[ sourcecode language=”html” ][ /sourcecode ]<a href=”INSERT THE PAGE YOU WANT PEOPLE TO GO TO HERE/”><img border=”0″ src=“INSERT THE DIRECT LINK FOR YOUR IMAGE HERE” alt=”INSERT YOURBLOGNAME.WORDPRESS.COM HERE”></a > [ /sourcecode ]</div >

Just replace all the bits in capitals with your own information and remove the spaces in these places (I had to put them in so you could read the code):

  1. between the very first < a
  2. between the final a >
  3. between the [  ]  on both sourcecode bits.
  4. between the div > (the very last bit).

and that’s it.

Now, you can turn on that HTML tab and add the button as I mentioned above.

If you also want the badge in your sidebar, go to your dashboard and click on Appearance >> Widget >> add a text widget to your sidebar space >> paste the code and save.

Hmmm, clear as mud?  Hope it’s not too complex and that it helps someone.


6 responses to “WordPress.com Techie Bits

  1. Pingback: Take the time to Follow a Newbie this Friday | From Slummy to Yummy Mummy·

  2. Pingback: Learning the Blogging Lingo | From Slummy to Yummy Mummy·

  3. Pingback: Follow A Newbie Friday (7) | From Slummy to Yummy Mummy·

  4. Pingback: Check Out My Badges! « On Planting Seeds…·

I love comments! Please leave a reply. Please note that this website uses cookies and that by replying without changing your cookies settings you are consenting to their use.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s