Discussion Topic

Basic HTML’s I Like To Use

Over the years I’ve come to realize and learn that HTML is essential in blogging.  As a blogger we need to have a few basic items in our repertoire to help make our posts look better.  Below I’m going to share some BASIC HTML’s I’ve come to rely on over the years.

First you may be wondering what is HTML? It’s called “Hyper Text Markup Language. HTML is the standard markup language for Web pages.”

Now you may wonder! How do I use  HTML in a post? First you will need to Go To the TEXT area and paste or type the HTML into it.

You can easily switch to the HTML view of your post by:

  1. Editing an existing post (or creating a new one)
  2. Clicking the ‘Text’ tab at the top of the posting box (next to the ‘Visual’ tab).

You’ll now see your post marked up with HTML code. For instance, the previous few paragraphs of this post would look like this:


Basic HTML’s 

Scroll Box:

I like to use this for excerpts or when I need to condense a lot of words into something small, so my post doesn’t just scroll on and on and on. 


[su_note note_color=”#eeebdf” radius=”4″]

<center><div style=”border: 1px solid #ccc; font: 16px/26px Georgia, Garamond, Serif; height: 450px; overflow: auto; width: 600px;”></div></center>&nbsp;


  • You can change the Height and Width to the demotions that look the best on your blog (ex: height: 450px change the number to 350 or what you need. Same for width: 600px.) I do a preview to see what it looks like; before hitting the Publish Button.
  • On Text Editing: <center><div style=”border: 1px solid #ccc; font: 16px/26px Georgia, Garamond, Serif; height: 450px; overflow: auto; width: 600px;”> Add Text Here </div></center>&nbsp;


What It Might Look Like:

On Visual Editing Paste Your Text Here



HTML Button Copy Code:

How to do the Copy Blog Button HTML for others. This work’s great for Challenges or for your Blog Button.



[su_note note_color=”#eeebdf” radius=”4″]

<div align=”center”>

<a href=”http://angelsguiltypleasures.com&#8221; target=”_blank”><img alt=“Angel’s Guilty Pleasures“ src=”http://angelsguiltypleasures.com/wp-content/uploads/2018/10/AngelsGuiltyPleasuresBlogBanner02-angelsgp.jpg”/></a&gt; </div>

<div align=”center”><form><textarea rows=”6″ cols=”40″>&lt;center&gt;&lt;a href=”http://angelsguiltypleasures.com&#8221; target=”_blank”&gt;&lt;img alt=“Angel’s Guilty Pleasures” src=”http://angelsguiltypleasures.com/wp-content/uploads/2018/10/AngelsGuiltyPleasuresBlogBanner02-angelsgp.jpg”/&gt;&lt;/a&gt;&lt;/center&gt;</textarea></form></div&gt;


What It Looks Like:




HTML Short Codes:

These you have options in your Visual or Text Editing area, but if you need them here they are.

  • to add a link: <a href=”http://www.goodreads.com”>my link text</a>
  • bold text: <b>…</b>
  • italic text: <i>…</i>
  • underline text: <u>…</u>
  • strike text: <s>…</s>
  • blockquote: <blockquote>…</blockquote>
  • paragraph: <p>…</p>
  • spoiler: <spoiler>…</spoiler>



HTML Line Code:

The line you see dividing the sections in this post. You can change these areas to fit your blog. 

  • width: 400px
  • height: 0
  • color #007153 
  • border-top: 2px dotted



[su_note note_color=”#eeebdf” radius=”4″]

<p><div class=”aligncenter” style=”width: 400px; height: 0; border-top: 2px dotted #007153; font-size: 0;”>-</div></p>




Goodreads Banner: Want to add a banner to your reviews on Goodreads? Here is how you do it.


CODE to paste into you Goodreads review:

[su_note note_color=”#eeebdf” radius=”4″]

<a href=”http://angelsguiltypleasures.com”><img src=”http://angelsguiltypleasures.com/wp-content/uploads/2016/06/Seethisreviewandothersatangels_gp-banner.jpg&#8221; width=”400″ height=”100″ alt=”angelsgp-seethisreview-blure”/></a>


What It Looks Like:



Don’t be afraid to ask for help from others. I picked up a few of these simple HTML’s from other bloggers when I emailed them “asking them how they did that?”. 



Daily, Weekly, or Monthly Mail


12 thoughts on “Basic HTML’s I Like To Use

  1. You are welcome and I’m happy you are bookmarking. It’s great to know I’m helping out others. For me I have an HTML Document I keep all my cheat HTML codes in, so I can just copy and paste them into my posts. That way I’ve got it all in one spot. I love Copy & Paste. It’s very helpful for a blogger ^_^.
    Thank’s for sharing you discussion.

  2. I’m bookmarking this post because there are some here I’ve always wanted to know how to do! So thanks for those! The one that I know by heart is how to leave a link, so that I can do that on comments especially. Also I learned how to do gifs, but I have that written down in my blogging planner in case I need it. Thanks for these! I’ll probably add a few to my planner for quick reference in the future!
    HERE is my discussion post if you want to chime in!

  3. You are welcome! I’m glad my post is helpful. As for the progress tracker on the side bar that is a plugin. It’s called Progress Bar and you can check it out HERE. I might have to do a post that features or talks about the different plugins I like to use on the blog. I can’t remember if I did one. I did do a MailChimp one, but accidentally deleted that post a year ago when cleaning the blog. I my have to redo that one. Thank’s for visiting!

  4. You should do more of these posts! It is extremely helpful. Like how do you do the progress tracker on the side of your blog for your challenges?

    1. I’m glad I could help a fellow blogger out. It took me a while pick up on some of these HTML’s, but I’m glad I did. It’s help!
      Thank’s for visiting.

Comments are closed.