Coding tricks for bloggers

Hiii!

DIDJA MISS ME DIDJA MISS ME DIDJA MISS M-

*slaps self*

So I spent the last two weeks on a work placement, which was awesome! but also took from 8:30-5. And I KNOW that's fairly regular hours for a job (I DON'T WANT TO ADULT, SURPRISE!!), but I also had a ~2-hour round drive. So. That + my assessment = minimal blogging time.

(Hint: do not leave assessments until the date they're due when that date coincides the last day of a two-week work placement which means you'll be out from 7:30am until 6pm.)

(If you needed that advice.)

But now I'm back! Or not. To be honest, I'll be just as sporadic as ever.

...annnyway. Let's leave the uncomfortable confessions there, shall we??

Today, I've written [discovered that I had actually had a draft already for] a post on coding! Specifically, writing code that will help you when blogging. So enjoy!



[Note: this post is actually rather ironic considering recent events. I wrote the draft of this post, giving tips from my experience in coding, and then I discovered that I'd messed up something, somewhere in my blog's code, which made the sidebar refuse to behave. BUT I FIXED IT. (With your awesome help.) So I'm definitely qualified to be teaching this subject 'cause debugging code is way harder than writing it.] 

*pretends to be super-qualified*

a few coding tricks for bloggers

A great way to personalise your blog, and to smarten it up from the Blogger templates (which are sometimes a bit tacky), is to play around with the coding.

And since we're talking about coding tricks, Autumn (at Autumn Reads and Writes) wrote an amazing post about how to change how links look in your blog! [I confess it was not a recent post. I'm a slacker, okay?? But it's still a good resource!] And when you hover over the links, they look like this! or this!! or this!!! GO AND READ HER POST IT'S GREAT OKAY?? (+ I'm not going to just copy it out here, so you have to go read what she said.)

So that's one trick. You can actually make it look like this, too, which is an effect I figured out while messing with it. Baaasically go to Autumn's post, read her instructions, and then instead of putting in:
      a:hover {
          letter-spacing: .5em;
      }

- put in:
      a:hover {
         color: normal;
         border-left: #bd836b 2px;
         border-right: #bd836b 2px;
      }

This will... make more sense when you've read Autumn's post. Unless you already know HTML/CSS, in which case you'll probably be beyond this post.

And... that's links!

*awkward cough*

Now, for my second trick... have you ever wanted to do

this?

It's pretty cool to be able to make little title-things without having to save/upload images of text. Not that I've actually used this yet. Never mind. I will one day. 

Okey-dokey. I'm just going to assume you want to know how to do this? and tell you. I'm also going to assume you haven't used HTML at all, or very little. If you have, you'll be able to skip these first few steps.

Note: Autumn's special features on the links are done within Blogger's Template function - that way, they apply to all links on your blog. Right now, I'm going to be doing coding (HTML/CSS) within the post I'm currently writing on Blogger; my coding will only apply to the specific thing I apply it to.


So, start by writing your text! In Blogger. The regular way. And centre it. Like so:

Pretty text!

Now. On the very left of Blogger's Write Post toolbar - the one that has such helpful things like italics, font size, and strike-through - you'll see two grey buttons: Compose and HTML. Click HTML.

"AAH WHAT JUST HAPPENED THIS IS UGLYYY."

Yes, HTML is not the nicest thing to look at. BUT IT'S FUNCTIONAL. So.

Now, inside your HTML view, the text you just wrote will look like this:

<div style="text-align: center;">Pretty text!</div>

<div>...</div> just sort of wraps stuff into a block that can be manipulated. Whenever you tell Blogger to centre something, it puts a div around it, so it can apply style="text-align: center;". "Style" is a way to put CSS (the coding language that does all the colour, borders, everything pretty!) into your HTML without having to link to a specific CSS document.

But now you want to put a <span>...</span> into your code. (At least, that's how I do it. It's not the only way, I'm sure.) So coding-wise, my example looks like this:

<div style="text-align: center;">
<span style="color: lime; font-family: 'Aclonica', 'Open Sans Condensed', 'Times New Roman'; font-size: 40px;">this?</span></div>

[Note: I don't know that 'Aclonica' is a font that will work by itself or not in a web browser? So I've put

<link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet"></link>

at the very top of the page when in the HTML view. This ensures that the browser people use to view the post will know what font to use. Note also that I have two back-up fonts - 'Open Sans Condensed' and 'Times New Roman' - in case this doesn't work. Because sometimes code does bizarre stuff and I have no idea why.]

So let's break that down:

• The div, as I explained, is to make the section into a kind of block. (If anyone reading has a better way of explaining it, please chip in!
• The style="..." is to insert CSS into that particular div. 
• text-align: center; is CSS. It centres the div. (shocking, I know.)
• The span tag is to, I don't know, mark a specific spot? It's like a div, but tends to mark part of a line of text or something, instead of blocking out a whole paragraph or whatever. (I never said I was an expert, okay?? I have a working knowledge.)
• Again, we have style, but this time inside the span.
• Now within that there are a few CSS elements:
• color: lime; -- this colours the text. You should probably use a six-digit colour code (e.g. #f97285) instead - that's more reliable, as it can be hard to guess what colour names are supported by the browsers! Google 'color picker'.
• font-family: 'Aclonica', 'Open Sans Condensed', 'Times New Roman'; -- this is the font. 'Aclonica' is (I hope) the one that's actually being used; the other two are back-ups. I already went into this a bit [above].
• font-size: 40px; -- this is to make the text huge. Play around with it; it's really easy to just switch another number in.

Mostly it should work right if you make sure to keep the punctuation marks right? So this:

<div style="text-align: center;">
<span style="color: lime; font-family: 'Aclonica', 'Open Sans Condensed', Times New Roman'; font-size: 40px;">And now you can do this!</span>
</div> 

should turn out like this:

And now you can
do this!

I don't know. Is this clear? Ask me any questions if it wasn't!

And (for if you're familiar with HTML and CSS): it seems like you can put CSS within your post as a "style" section (not just inline)? I didn't know that, but when I was trying to put in the CSS (for the links at the start of this post) to demonstrate what Autumn did with the links, I put a <style></style> section into the very top of my post and apparently putting CSS in there works fine?? (If it doesn't show up right, please tell me!)

And finally, I should mention that I was trying to figure out how to put code in this post so it looked like code (instead of doing what it's, you know, supposed to do??) and I ended up using hilite.me.  Then, of course, once I'd done that, I realised that if I write code while not in the HTML view, it showed up how I wanted it to just fine. So (due to editing and stuff) half the time my code is in fancy colours/boxes... and half the time it's not.



So this post has been a leeettle bit jumpy and what-is-plot-y. What are you saying of course that's not how I write. Or how I live my life. Nope. I hope it wasn't too confusing, and maybe helps you a bit! Even if it just gets you interested in exploring what you can do for your blog with CSS.


Have you ever used HTML and CSS for your blog? What tips/tricks do you recommend? Are you going to try any of these? Did I make any mistakes?? (answer: yes. It was written in too many late-night sessions. Obv. there will be mistakes.)