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.

Advertisements

76 thoughts on “Websites + HTML codes all bloggers need! // Making your life 124% easier

  1. Great post! I have Photoshop, but knowing free resources that can do the same thing is definitely helpful. Also, for changing text size you can also just use or that produces the same effect 😀

    Liked by 1 person

  2. Ummm… it really doesn’t like the “<" symbol. This is so awkward. So substitute THAT symbol with parentheses: (big)(/big) and (small)(/small) and it will give the same font size changes.

    Liked by 2 people

  3. I’ve been trying canva and have struggled with what size template to use- what size shows up completely in the ‘featured image’ part of the blog? Normally I pick the facebook size and then make sure my words are in the middle so they’re not cut out when the blog posts….any suggestions?
    Thanks for the ideas about Freepik & Pixlr, I’ll try those out.

    Liked by 1 person

    • Oh there’s such a variety of size templates! My featured images tend to be made with the Facebook App template I believe. What theme do you have for your blog? How your featured image shows up depends a lot on your theme, and there may be particular dimensions that would suit your theme best. I’m not on my laptop right now so I can’t properly say, but trying out different dimensions and templates might be a good idea until you find one that works well. Good luck!! And I hope you enjoy using Freepik & pixlr. 😊

      Like

      • I tend to use the facebook sized one as well, and my theme crops it in the featured image. On the post it looks great. I’ll have to keep tinkering. Thanks.

        Liked by 1 person

  4. Omg this post is so helpful!! I’m definitely going to try canva next time I need to do some graphics. I use photoshop at the minute but my subscription runs out soon and it’s so expensive. If I like canva that could end up saving me some money 🙌!!

    I’m soooooo happy to finally have some HTML for changing the font size. I recently switched from blogger to WordPress so I knew how to do it on WordPress but couldn’t for the life of me figure it out on WordPress. I’m so happy now. I feel like different size text just really breaks up blog posts nicely. This is such a helpful post! You’re a life saver 💖

    Liked by 1 person

    • Ahhhh I’m so glad!! 😊🙈 YAY that’s wonderful! I adore Canva and yes, Photoshop is pricey for sure which is why I don’t tend to use it ahah. I hope you like Canva! ❤️
      EEEP I’m so glad that was useful!! I was in the same situation as you in trying to figure out how to change text size omg haha I was so relieved when I finally found a way! I totally agree, I love using different text size in my posts. Thanks so much, I’m so glad to have been able to help!! ❤😊

      Liked by 1 person

  5. Canva is awesome but something about it irritates me??? I don’t know. Something. XD It’s great with templates and all that, but… AGH. I looooove PicMonkey! It’s what I use for my graphics — plus you can add your own fonts, whereas in Canva, you can’t. And Pixlr! I’ve heard awesome things about that so I’ll have to try it out! (Plus FREE = OBVIOUSLY GREAT.) Oh, I tried to do the 16pt thing with the code, but for some reason it didn’t work and I had to do another one where it 16pt was replaced with x-large. I may switch to the numbers, though, because it’s shorter to type than x-large/small! COLORED TEXT BOX OMG!!! I really want to do that now. XD

    Liked by 1 person

    • (Shush let us ignore how late I am on this PLEASE FORGIVE ME)
      Also NOOOO WHYYY how could you be irritated by Canva??? 😛 What’s funny is that I’m the same way with PicMonkey haha… #oops Oooh I didn’t know that!! I’m quite inclined towards the font I have now but if I ever want to have more options that’s a good idea. Thanks! YAY PIXLR IS FREE! #win I do want to try it out as well ahah. And aw, really? I hope you found a solution to that (by now)! I knoww it looks so cute, I really need to use it more often haha. ❤

      Liked by 1 person

  6. I found Canva late last year and I love it! Its so easy to use and there are soooo many options 😀 I’ve heard a lot about Freepik but never used it. Might just check it out now because that purple flower circle (wreath?) looks so pretty! ❤
    Also the font size change thing – did not know how to do that xD And the coloured text box looks so cute – I must try it!
    Thanks for sharing all these tips Analee! 😄

    Liked by 1 person

    • Right??! It is my savior omg. ❤ Ooh yes go check it out!! Freepik has so many resources, and I love it for its watercolor/flower circle/wreath thingies haha. The purple one is one of my favourites!
      Ahah I knoww it took me forever to find out how to do it. It is! I really need to start using it more. ❤ I hope you like it!
      No problem!!

      Liked by 1 person

  7. This is a great post – I have mainly been using picmonkey, which has helped me immensely, but there is still so much for me to learn on there. I have used Freepik once or twice, but I love your idea of using for your bullet journal. I have no artistic ability so this looks like it could really help the aesthetic of that 😊 HTML is still a bit of an unknown for me, so I will definitely be using the tips you have posted here. Thanks so much for sharing these tips.

    Liked by 1 person

    • Eeeee I’m so glad you think so!! Oh yes picmonkey is so great, and there’s so much to explore on there as well! And omg yes Freepik has been a lifesaver when it comes to my bullet journal! I cannot art so it’s super handy haha. 😍 Oh for me too, honestly ahah I’m glad they were helpful! ❤

      Liked by 1 person

  8. I’m a software developer so I’m good with coding programs… but I am totally hopeless at web design, haha. Canva looks like it could seriously make my blog a bit prettier. Waaah ❤ Thank you for posting this!

    Liked by 1 person

  9. Great post! I’ve found Canva a few months back but I haven’t used it yet. It’s really an amazing site though. Freepik is definitely best source for free pic’s. Pixlr is a great online editing tool! I already used it for a few times.

    Liked by 1 person

  10. Such a wonderful post Analee! This is so informative and useful ❤ I do use Picmonkey a lot but I have never tried out Canva or Freepik before. Can't wait to give them a try

    Your blog looks beautiful! When did you change your theme? *psst I have been on a hiatus since April this year* I love the layout and the color scheme–it definitely is a reflection of your bubbly personality.

    Liked by 1 person

    • AHH thank you!! I have no idea how I missed this comment, oh my gosh. ❤ I'm so glad you think so!! Ooh yayyy I hope you love Canva and Freepik as much as I do ahah.

      Thank you so much lovely!! It was last month, actually, the start of May I believe! ❤ EEP that means so much to me, thank youuuu.

      Like

    • THANK YOU AMY LOVE!!! ❤ ❤ I'm so happy to hear that!! Aw no really? I really like Picmonkey but the ads and the glitches irritated me so I stopped using it haha. I might have to try it out again! I hope you enjoy designing with Canva! ❤ No problem!

      Like

  11. This is a great post Analee, and one I will certainly be bookmarking for future use as well. 😀 I’m not very good with HTML and coding, I know the basics to get by and to get the boxes I use in my reviews for quotes I literally looking it up on Google to find something I could use. I do think HTML would be interesting to learn more about, it seems like there’s so much you can do with it. 🙂
    Also great tips for graphics and pictures, I use what works for me at the moment but if I ever want to expand I’ll remember some of the sites you’ve recommended here! 😀 ❤

    Liked by 1 person

  12. Ah, I use so many of these! I’m so glad I discovered Canva when I did because I tried out so many apps and things to make graphics, and Canva was the easiest! I absolutely love it! Freepik was a life-saver when I discovered it, oh my God! Still love the site! ❤ I use Pic Monkey to edit my bookish photos, and I recently used Pixlr using a Paper Fury tutorial, and it was quite easy! I really want to start learning how to navigate it since it's totally confusing to me without tutorials, though. XD This was such a great post, Analee! ❤

    Like

  13. AHHHH what a wonderful post! This is so helpful for both newbies and oldies! I adore both Canva and Freepik omg I don’t know what I’d do without those two sites! They literally save my blog from looking like a piece of garbage hahaha XD and I didn’t know about coloured text boxes??? I’ll have to try that out for future posts! Thanks so much for writing this super awesome post!

    Liked by 1 person

  14. THANK YOU SO MUCH. I used the coloured text box in my recent posts and I already knew the font size thing! AND I knew about pingbacks too #proud CANVA, PICMONKEY and FreePik are my RECOURSES. I’ve used Pixlr once and it really felt like Free Photoshop. I didn’t know about the HTML for the hyperlinks though so THANKS FOR TEACHING ME.

    I’ve tried other designing sites like DesignBold or Befunky but Canva and Picmonkey are life and others don’t work for me? WISDOM, other hacks, um…eat? BEST TIP OF ALL. No seriously, I might know some but my brain is a blank as paper.

    Liked by 1 person

    • YOU’RE WELCOME!! ❤ Wowie Mahriya stop stealing my thunder obviously *I* am the only all-knowing genie here??? 😛 But YAY that's so great and oh my gosh right?? I would be LOST without all of those resources omggg. ❤ BLESS THEIR CREATORS. And ooh that's good! I really want to use it more ahah it seems like such a useful site. No problem!!

      Oh I tried Befunky a couple of times, it wasn't horrible but Canva definitely comes first in my mind haha. I like PicMonkey as well though it's always so laggy when I use it? And my patience level is zero so UGH. But everyone seems to love it? EAT YES very smart *nods* I will follow it ALL THE TIME. Ahem. Noooo what shall I do without the knowledge?? If you ever come up with anything I'd love to know haha. ❤

      Liked by 1 person

Leave a taste of your thoughts!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s