Hello my dear bookworms! I hope that amidst all this terrible time, you are all healthy and safe!
If you are anything like me: must be doing something at all times or will feel like she’s being unproductive, this quarantine is hitting you hard. There is only so many times I can reorganize my closet, clean my bookshelves and vacuum my floors….
Today’s post will be a quick mini-tutorial on, somewhat useful or just plain ol fun, HTML for book bloggers!
Now, I haven’t used many of these on my own blog, yet, because I’m still working out the layout I want to have BUT many of these snippets can help you with your design vision!
HTML for Book Bloggers
Borders
Adding borders to your posts can be a fun way to break up the text. Not to mention, they can be used to highlight something important or to signal a side note!
SOLID
<p style="border: 3px; border-style: solid; border-color: #ae94ba; padding: 2em;">SOLID</p>DOUBLED
<p style="border: 3px; border-style: double; border-color: #ae94ba; padding: 2em;">DOUBLED</p>DOTTED
<p style="border: 3px; border-style: dotted; border-color: #ae94ba; padding: 2em;">DOTTED</p>LINED
<p style="border: 3px; border-style: dashed; border-color: #ae94ba; padding: 2em;">LINED</p>Mixed: DASHED DOTTED SOLID and DOUBLED
<p style="border: 3px; border-style: dotted dashed solid double; border-color: #ae94ba; padding: 2em;">Mixed: DASHED DOTTED SOLID and DOUBLED</p>INSET
<p style="border: 3px; border-style: inset; border-color: #ae94ba; padding: 2em;">INSET</p>RIDGE
<p style="border: 3px; border-style: ridge; border-color: #ae94ba; padding: 2em;">RIDGE</p>GROOVE
<p style="border: 3px; border-style: groove; border-color: #ae94ba; padding: 2em;">GROOVE</p>Show/Hide
These are great for hiding tidbits of information like spoilers OR for breaking up a long post into sections in which the reader can choose what they want to read.
Spoiler ALERT
Today will never come again<details><summary>Spoiler ALERT </summary> Today will never come again</details>Link to a section of a page
Linking to a section of a page or Jumping can be super helpful if you have one of those TLDR posts and want to offer the reader a way to just JUMP to the good stuff.
This is done with two code snippets.
The first code snippet should be placed where you want the reader to click. In the href =, type in the section name, after the hashtag , of the place they will be jumping to.
Let’s Jump!<a href="#SECTIONNAME">Let's jump!</aThe second code snippet should be placed where you want the reader to jump to. In the id =, type in the section name that you used in the first part, remove the hashtag, so that the first code links to it.
<div id="SECTIONNAME">You Jumped! Awesome!</div>Example:
Back to the top!Adding a No Follow tag
Fun Fact: Did you know that if you have affiliate links or sponsored links, you MUST have the no follow tag in the URL according to FTC.
No? Me either until very recently! 😀
Adding a No Follow Tag to your link prevents other websites out there from capitalizing on your links! Not to mention, it’s very useful as far as SEO goes.
The No Follow tag tells search engines not to count links to other pages as “votes” in favor of that content. This helps avoid problems with search engines thinking you are involved in schemes or selling influence to your viewers, two things that are bad SEO practices.
<a href="LINKHERE" rel="nofollow">I'm A link to your affiliate item!/a>Level UP: Adding Tables
**Tables are a little more complex as they require many more tags than the examples I’ve shared so far.
Adding a table can be a good way to organize information or pictures on your post. I haven’t used one yet in all honesty since well…….I’m lazy and haven’t made a reusable block for it but I’ve seen some bloggers use it and it’s made a difference in their post!
Column 1 |
Column 2 |
|---|---|
| Row 1: Cell 1 | Row 1: Cell 2 |
| Row 2: Cell 1 | Row 2: Cell 2 |
<table border="1">
<thead>
<tr>
<th><h5>Column 1</h5></th>
<th><h5>Column 2</h5></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1: Cell 1</td>
<td>Row 1: Cell 2</td>
</tr>
<tr>
<td>Row 2: Cell 1</td>
<td>Row 2: Cell 2</td>
</tr>
</tbody>
</table>Pro Tip: Add some border styling to the Table, th, and td tags to add some pazzaz to your table!
The 5 are just a small cluster of the many html code you can use to spice up your website or blog posts. If you are inclined to learn more, a great resource is W3Schools.
FreeCodeCamp is another website that is an amazing resource, they even have a course on building a wordpress template. 😉
Take note, that not all website providers will allow all HTML to work so play around with it! 🙂
I hope this post proves helpful or gives you ideas on what you can use on your posts/website! Thank you so much for reading <3
XOXOXO,
Jeimy