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. 

CODE:

[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;

[/su_note]

• 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.

• Make sure to change links in both top and bottom sections of this code.
• Change the href=”http://angelsguiltypleasures.com&#8221; to your blog link or the link you want to link too.
• This section src=”http://angelsguiltypleasures.com/wp-content/uploads/2018/10/AngelsGuiltyPleasuresBlogBanner02-angelsgp.jpg is the picture link in your media folder.
  • To find a picture go to your Media File. Find and click on the picture you want to us. It will have a link on the side bar. Copy that link. 
• This is your detentions: rows=”6″ cols=”40″
  • Change this to fight the size you want. It was originally set at rows=”4″ cols=”20″. I changed it too fit my blog.

 

CODE:

[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;

[/su_note]

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

 

CODE:

[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>

[/su_note]

 

 

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

• Make sure this section <a href=”http://angelsguiltypleasures.com”&gt; links to your blog.
• In this section <img src=”http://angelsguiltypleasures.com/wp-content/uploads/2016/06/Seethisreviewandothersatangels_gp-banner.jpg&#8221; you need to make sure the image links to the picture address you want to feature. 

 

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>

[/su_note]

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