Basic HTML Tutorial that can be very Helpful for every Book Blogger who use WordPress.com

I first encountered HTML and CSS coding when I was in college and some of the super basics earlier than that when Friendster was still a social networking site like Facebook (Ha! You know what I mean). Learning a thing or two (thanks to Tumblr!) apparently but not entirely became useful when I switched into WordPress. How so if you asked me? If you’re new to WordPress, you are probably be wondering what’s the difference between WordPress.com and WordPress.org.

Mind you, I am no expert but I can put it as easy this way: WordPress.org can give you a lot of freedom while using WordPress.com has a lot of limitations especially when it comes to your blog’s display and design. As a free plan user who can’t afford to go premium or get my blog self-hosted, I can only do enough.

Perhaps by now, you might say, “Oh shut up and get down into business! What does Karlita even talking about?”

My dear fam! I just want to let you know and put an emphasis here that if you are using WordPress.com like me, we can not modify our lovingly, mighty blog the way we want it using CSS because users with free plan accounts are all subdomain of WordPress.com. But the good news is we are still allowed but limited to edit our blog and content using HTML with our choice of free theme.

Before we get down in to the nitty-gritty of things, please check this straightforward and easy to understand infographic regarding the difference between HTML and CSS.

HTML is the foundation of a web page that let us use tags and attributes. And today, I will share some basic coding that I personally use here on Tale Out Loud which you might even see in this very own post, and maybe later you decided you might want to apply or find useful for your own blog. I also brought this up on Twitter and got some questions that I’ll be tackling here in this blog post.

Please Note: Change only those that are in blue depending on your personal preference.

1. Align your text, image or widget on your sidebar

You can easily align left, right or center an image, text or paragraph when you’re writing a new blog post on your WordPress editor with the already set options.But what if you want to align an image or a widget with text on your sidebar? You can try this:

<div align="center"><a href="html-image-hyperlink.php"><img src="images/sample-image.jpg" title="IMAGE TITLE" /></a><//div>

2. Match your theme with some Color and Font Styling

If you want to adapt your blog theme’s color into your blog posts and highlight important texts without using so much of your theme’s font, you can try this (find color codes here):

<p style="font-family: FONT NAME; font-size: FONT SIZEpx; color: #FONT COLOR;">YOUR TEXT HERE</p>

3. Create a border around your text or image

When you create a border to a selection of text and images, it helps stand out from the rest. Simply try this code to give the “defining moment” it deserves:

<p style="border: BORDER SIZEpx; border-style: solid; border-color: #BORDER COLOR; padding: PADDING SIZEem;">YOUR TEXT HERE</p>

4. Highlight text or add background to a paragraph

If you want to only highlight some text that is part of a paragraph, here’s the code:

<span style="background-color: #BACKGROUND COLOR">YOUR TEXT HERE</span>

But if you want to highlight a paragraph like a book’s synopsis which is great way for someone to read it easily, you should try this:

<blockquote style="background-color: #BACKGROUND COLOR; padding: PADDING SIZEpx; font-size: FONT SIZEpx;">YOUR PARAGRAPH HERE</blockquote>

5. Create HTML button links

Creating buttons with simple solid background and links made easier with this code:

<a class="button" style="display: inline-block; padding: PADDING HEIGHTpx PADDING WIDTHpx; border: 0; border-radius: BORDER RADIUSpx; font-weight: FONT WEIGHT%; letter-spacing: LETTER SPACINGem; text-transform: LETTER CASE; background: #BACKGROUND COLOR; color: #FONT COLOR;" href="html-image-hyperlink.php"><img src="images/sample-image.jpg" title="IMAGE TITLE" />TEXT HERE</a>

But if you want to achieve that hover effect where the buttons changes color when you put your mouse pointer over it? Sadly, you need a CSS for that to work.

6. Add a text area on your sidebar

Text area can be added on your blog posts whenever you want by just clicking preformatted option on your editor. But for me, it is somewhere I put my blog button’s code that you can found on my sidebar. Here’s the code:

<pre><code class="html"><a href="html-image-hyperlink.php"><img src="images/sample-image.jpg" title="IMAGE TITLE" /></code></pre>

7. Show/Hide text toggle effect that works well for WordPress.com Users

You can use collapsibles when you want to hide and show a content; e.g. adding trigger warning on your book reviews which somehow works like spoiler tags on Goodreads.

But doing the regular code won’t work here neither installing the WP ShowHide plugin. Good thing I found a way for it to happen through details element. Just add this code:

<details><summary>CONTENT SUMMARY</summary>CONTENT YOU WANT TO HIDE</details>

Hope you find this post helpful and if ever I skipped something out, just ask away and let me know in the comments below!