Websites + HTML codes all bloggers need! // Making your life 124% easier

HI GUYS!! How are you? I’m on a ROLL this week in terms of scheduling posts haha, for me, anyway. *throws confetti* Next week will be busier though, so heads up! Not a full blown hiatus (hopefully) but it all depends on time and if I can write up a post in time over the weekend. (SO GLAD it’s the weekend!! Blog hopping time!!) But anyway! Not the point. I’ve wanted to make this kind of post for a while now, actually, but didn’t have enough material, persay, to showcase, I guess. But now I do!! There are certain (FREE) websites and HTML codes I’ve used/currently use that made my life SO MUCH EASIER and just overall useful tech-ish hacks when it comes to blogging and such, and I wanted to share those with you all, just in case some of you were unaware of it! SHARING IS CARING AND I AM HERE TO MAKE YOUR LIFE 124%* EASIER. As stated by my title. Because titles never lie.**

*Don’t question the number.
**SHHH.

Canva

I USE THIS ALL THE TIME, GUYS. It literally saves my life when it comes to blog design, NO JOKE. It’s free, it’s pretty flexible, offers a huge variety of options, it’s super easy and simple to use and great for designing headers and such!! Literally the majority of the graphics on this blog has been made by Canva and I LOVE IT SO MUCH. Bless the creators, I am in awe with their creation.  Mostly I use elements from other sites, like background pictures and such, from Google or Freepik, and then I can choose font, colour etc. It’s literally so great! I would 100% recommend this to anyone ever, whether they’re a blogger or not!!

An example of what I made with the help of Canva:

The pink watercolour cloud thingy is the only thing I got from elsewhere, the rest was designed thanks to Canva!! They have a great selection of fonts, I use the Brusher font most often for my posts nowadays, and I also like the… Josefin Sans font I think? The arrow thingy at the bottom is also one of the free graphics Canva offers. It hardly takes me any time to make graphics as a result! Basically: I adore Canva??!

Freepik

My other saviour!! I love Freepik so much, it has such beautiful designs! However, I am a bit restricted with this one due to the fact I don’t have Photoshop or Adobe Illustrator so it does limit my options. But! That doesn’t stop me, for I do use many of its designs and am able to make things with the help of Canva. Most recently I had used a Freepik design for my bullet journal, and simply added the word May in Canva. And I won’t lie, I’m very in loveeeee!! I love these two colours and watercolour-esque flower wreaths are my weakness. FREEPIK I LOVE YOU.

Pixlr

I actually haven’t used this one as much, I’ll admit! It’s like a free Photoshop though? So I have no doubt I will be experimenting with this one more when I have more time. ❤ Definitely worth checking out, when I used it it was super straight forward and hey, how can I complain with a free Photoshop?? I do love this resource and can’t wait to use it more. Though with Canva being so fabulous that may not happen for a bit. 

PicMonkey

I actually used this quite a bit when I first started blogging, as it was one of the free sites I found (along with Canva) back then. I haven’t used it as much recently, but I did make quite a few designs with this and it’s a great resource!! My only complaint is that the ads make it really glitchy sometimes (for me, anyway) which makes working with PicMonkey kind of annoying. Or maybe it’s not the ads and just the way the site is?? If you upgrade though the ads go away and you also have more options, but I’m all about the free stuff? Sooooo. For edits, touch ups, etc. though it’s quite handy!

HTML (don’t ask me what it stands for) is one of the ways to kind of customize your blog a little! It’s a bunch of code I don’t understand, but it can be very useful sooooo it’s in this post!! Example:

Changing the font size of text.

I only recently discovered this actually! But I love it so much and I occasionally overuse it but it’s okay. It’s so helpful because I love inserting little tiny text comments in my posts, and of course it works great for making things larger as well which is super useful!! One of the codes I always have on hand when I’m blogging omg.

<span style=”font-size: 12pt;”>text here</span>

12 is the default font, I believe, so basically it’s the font size you’re seeing at the moment! To make it smaller or larger, just replace the 12 in the code with a number of your choice and BAM. Font size changed.

LOOK I DEMONSTRATED THE TINY FONT. (hahahhaha) [btw, for the tiny size, I used 10, and the previous sentence is in 16. :)]

OH! Important: if you’re going to use this, remember to use it in Text instead of Visual when writing your post or else it won’t work. The amount of times I forgot about that tiny detail and pasted the code in my Visual editor instead… #oops

Hyperlinks

Now, you might be like, why do you need hyperlinks? When writing posts in WordPress, of course, it gives you the ability to just click on the insert/edit link tab and it essentially creates the link for you. But I think having the HTML code for a link can actually be super helpful–particularly in, say, a comment. Whether you want to link a blog, or post, or whatever, by using an HTML code for your link to appear with a word, like this instead of the whole url like https://booksnacksblog.wordpress.com/, it makes your comment a lot less clustered and more, I don’t know.. neat I guess??? There’s nothing wrong with leaving the whole link though!! It’s just a helpful hack if you ever want to link something in the comments.

<a href=”URL HERE“>text here</a>

If I wanted to link to, say, my blog, in a comment I would just replace the bold parts with my own info, so the URL HERE part with https://booksnacksblog.wordpress.com and after that my text, Book Snacks. And then voila! The HTML code would then turn into Book Snacks. MAGIC!

If you ever use this in a post (though if you have the option to use the WordPress one I wouldn’t see the need, but either way) just remember to insert it using the text tab instead of visual, once again, and you’re set! But in the comments, just use it as it is (replacing with your link and text, ofc) and you’re good.

Pingbacks*

Jackie @ Too Much of a Book Nerd wrote a lovely and super super helpful post on pingbacks for WordPress users!! GO check it out if you haven’t already or if you are clueless as to how pingbacks work and why yours aren’t working! Pingbacks are so great and so important if you’re, say, tagging someone in some sort of tag or award, or even if you want to give them a shout out or highlight a post you’ve read. Let that blogger know by simply linking to one of their posts! It makes lives SO MUCH EASIER and it’s always a lovely surprise for the blogger as well! Haha.

*This is not HTML? But still very very useful and worth mentioning and a hack kind of? Soooo it counts.

Adding a colored text box

I used this a lot previously for my book reviews and I don’t use them much outside of my reviews? But they do look super cute and I don’t know, if you ever want to separate something, maybe a quote? Or whatever suits your fancy. Now, I honestly would love to make this easy for you guys and have the code right in this post as with the other ones but this one is a bit more complicated and has a lot more factors, so I’m just going to leave a link to this post that helped me out SO MUCH when I was trying to figure out this whole text box thing. Again

I’m not good at coding at all so I hope you’ll forgive me when I pass this on to the expertise of whoever wrote that article thingy haha. But this is an example of what I mean by the colored text box! There are SO MANY different ways to do this, in terms of how it looks and what colors you use, so just check out the post I linked to if you want to know more about this! It offers so many options and explanations. 🙂

Adding custom widgets

WordPress actually makes having widgets pretty simple. Widgets, you probably know, are most often found on the sidebar of blogs, that have a variety of things chosen by the user. Common widgets I’ve seen are things like a search menu, recent posts, most popular posts, follow button, etc. Yet, what if you want to add something else? A photo, or a little bit of text? Or, if you’re a book blogger, you may want to show your progress on your reading challenge on Goodreads if you have one!

Let’s start with Goodreads, because as a book blogger I ADORE GOODREADS and also this reminds me I need to update my widget for my reading challenge whoops. Basically, start by clicking on your profile picture at the top right corner, which leads to a dropdown menu sort of thingy with options like View Profile, Friends, My Quotes, etc. Near the bottom, press “Account Settings”. Once you do that, there will be another variety of options at the top, starting with Profile, then Settings, Email, Feeds, Apps, Widgets, and a couple more. Can you guess which you click on?? WIDGETS, WOO.

And there are several different widgets you can choose! BUT. Just remember, if you have a WordPress.com blog, so a free one, there are a few restrictions and you can’t use a few of the widgets offered.

But, if you scroll down to the bottom, you will find the Reading Challenge Widget! It shows what it looks like and beside it, offers a text box with the HTML code that you copy and paste into your blog. 

For that part, just go to your blog’s Widgets, and choose the Text widget way at the bottom. Insert the HTML code you copied from Goodreads, save, and VOILA. There’s also several other Goodreads widgets too, so feel free to experiment a few times!!

Aaaaaand I think that’s it!! If I find any other amazing sites (find me something that I will love more than Canva though. I’LL WAIT.) or other HTML/Wordpress tips and hacks, I will definitely make another post for you guys. But for now, which of these do you use? Do you have any other tips that have made your life easier?? Do you want to have more blog-focused posts? Let me know in the comments!! LET US BOND OVER BLOGGING THINGS. ❤ Share your wisdom.