Basic HTML’s I Like To Use

Posted on by

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:

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

  • Make sure to change links in both top and bottom sections of this code.
  • Change the href=”https://angelsguiltypleasures.com” to your blog link or the link you want to link too.
  • This section src=”https://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:

<div align=”center”>

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

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

What It Looks Like:

“Angel’s

 

–

 

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:

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

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

 

CODE to paste into you Goodreads review:

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

What It Looks Like:

angelsgp-seethisreview-blure

 

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

–

 

I'm an outdoor sun loving reader living near San Fransisco. I’m a mother, wife, animal & book lover. I'm the owner, reviewer & mind behind Angel’s Guilty Pleasures. My favorite animals are horses & dogs. As for reading I love all things paranormal & urban fantasy & my favorite shifters are dragons.

Category: Discussion Topic | Tags:

12 comments on “Basic HTML’s I Like To Use”

  1. Thanks for sharing these! I’ve gotten lots of great HTML tips from other bloggers in the past—you’re right that usually if you just take the time to ask, people are happy to share!
    Nicole @ Feed Your Fiction Addiction recently posted…The Would You Rather Book TagMy Profile

    • You are welcome! It’s nice when others help you out. I hope many find this post helpful. Thank’s for visiting.

  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!
    Lisa Mandina (Lisa Loves Literature) recently posted…Release Blitz Review with Giveaway: Take a Number (Wait With Me #4) by Amy DawsMy Profile

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

  3. 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?
    Emily recently posted…Eight Steamy Adult Enemies to Lovers Romance Novels You Will LoveMy Profile

    • 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. Thanks for this! Everything I know about HTML came from Googling how to do stuff that I saw other bloggers doing.
    Aj @ Read All The Things! recently posted…Wrap Up: September 2020My Profile

    • I’m glad I could help.

  5. I’m saving this for future reference. Thank you!
    Lydia recently posted…Satirical Thanksgiving: A Review of Addams Family ValuesMy Profile

    • You are welcome!

  6. Thank you. That is really great info. I knew a couple of those but the rest is new info for me and I appreciate that.
    Mary Kirkland recently posted…Review: Eternity Embraced by Larissa IoneMy Profile

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