Tuesday 26 September 2017

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.)

21 comments:

  1. Aghhhhh!! You are so smart!!! I seriously can't do any coding at all and it makes me feel like a marshmallow... *cue depressing music* I'd love to learn but my brain just explodes, kind of??? I have a WordPress blog now, so it does all the coding for me... However!!! If I could manage to figure out the coding stuff.... I could move BACK to Blogger and make it super pretty!!!!!!!!!!!!! (which I do intend to do... someday...) (Ahem!)

    ReplyDelete
    Replies
    1. *shakes head* Exploding brains probably aren't good for attracting blog readers, Kate... so if WordPress does coding for you, that's great! I'd say it never hurts to learn new things... but if it makes your brain explode, that probably does hurt??)

      If there's a specific coding thing you're trying to do, feel free to ask me! I miiight know the answer... or I can help you google it ;P

      Delete
    2. MY THOUGHTS EXACTLY. ;)))))) Ha! I should still try and learn sometime... I'm sure it isn't that hard once you get used to it... *vague sobbing*

      Any idea how to make it so that gifs and pictures don't disappear a couple minutes after clicking publish??? That's why I left Blogger, it ate all my extra things!! :)

      Delete
    3. Hmm... were you pasting them in, Kate, or using the "insert image" button? That's the only thing I can think of off the top of my head - my pictures were disappearing too, and it was because I'd just pasted them in.

      Delete
    4. I was pasting. ://// I never even noticed the insert image button until, like, just now. Whoops. Do you ever get that popup where it says "blogger doesn't support that image..."??? Those always freaked me out and made me feel like I couldn't use images or gifs. (Also whenever I used pictures they were blurry???)

      Delete
    5. Sometimes I get 'that link is too long' (or something), I think? (And I mess around with it - repaste the link, check for a similar gif I can use instead - until I give up in disgust. When Blogger's good, it's good - when it's bad, it's horrid.)

      Delete
  2. Too much technical stuff for my brain, but I'm bookmarking this because I'll definitely need it later. I just redid my blog look. :D

    ReplyDelete
    Replies
    1. I'm sorry to hear that, Ivie! but I'm flattered you bookmarked this ;)

      I like your new blog look! The scrolling posts at the top are great.

      Delete
  3. I'm just starting on my coding adventures, thanks for the map, Jem!

    Catherine
    catherinesrebellingmuse.blogspot.com

    ReplyDelete
    Replies
    1. You're welcome, Catherine, and I hope the map takes you far. Happy adventures! ;)

      Delete
  4. I have used html and css on my blog, but I wouldn't say I understand it! It's more like lots of google and trial and error. So thanks for the post! I didn't even know you could make title things that weren't images, so I might try fiddling around with that sometime! :) And go you with grasping all this coding stuff - it seems pretty complicated.

    ReplyDelete
    Replies
    1. Google + trial and error is most certainly the way to coding xD I hope this post gave you a few ideas for uses of code, Jessica! Definitely have a bit of a play around with stuff.

      I think it isn't actually too complicated once you start to grasp the languages - I'm just bad at explaining, so it sounds more difficult than it is ;P

      Delete
  5. Oooh! Coding is seriously so much fun to do, even though I always get a heart attack, thinking I messed it all up at times! :P

    Helplogger has really helped me out with stuff like this, but thank you! I will probably use some of these!!! :D

    ReplyDelete
    Replies
    1. Coding is fun... even if it's also sometimes brain-frying. I haven't heard of Helplogger - I'll check that out now. I hope you do find some of the tips here useful, Gray!

      Delete
    2. My laptop has corrected me, citing a total of five visits to Helplogger. It's actually what I used to make my 'Popular posts' feature. :)

      Delete
  6. Ah yes, HTML and CSS. I had to take a whole class on them once... xD Though I didn't enjoy it, I will say, it's been helpful with blogging! Thank you for the tips; I'll be playing around with them soon. :)

    ReplyDelete
    Replies
    1. What was the class for, if you don't mind my asking?

      Have fun playing around with my suggestions, Melissa; hopefully they're beneficial! :)

      Delete
  7. I am hopeless so I just go with crying on the keyboards and hoping my tears form into something. (Besides a water damaged laptop)

    ReplyDelete
    Replies
    1. Mary Katherine, that sounds like a very realistic method of coding. xD [Is MK your usual nickname? just wondering?] But I'm sure you're not hopeless! It's just tricky to break into a new language - and HTML and CSS coding are two individual languages. Naturally it's hard to understand at first! If you ever have a coding question, feel free to ask me, and I'll pretend I know what I'm talking about. :D

      Delete
  8. Yay! You're back! *throws confetti*

    ReplyDelete

rule 1: comment. or the owl will judge you
rule 2: no inappropriate language. or the owl will judge you.
rule 3: have fun. or the owl will judge you.
((rule 4: feed the owl, he likes cake))