<SKIP THE VERBIAGE CHATTER AND GET TO BUSINESS>
As a writer, one of the tools in your self-promotion arsenal is newsletters. I’m late on the ball on this one, mainly because of that fear I will make an idiot of myself. No one will want to read it. No one will even sign up and I’ll be sending it only to myself, or maybe to two or three people who will never even read it. If they do read it, they will think it is completely lame and stupid, rubbish. And, I’ll probably never manage to even send one out often enough for my existence to not be completely forgotten because I will never be able to think of anything to say.
Writers can be full of self-doubts.
One of the most popular mass mailers for producing newsletters is MailChimp. Whatever mailer you use it is a must to get it linked to everything you can so that potential readers discovering you can sign up for your newsletter and grow that base. Growing your newsletter base can grow your fan base and vice versa.
Blogging is another important tool, but that’s for another post. One of the most popular and easy to use blog sites is WordPress.
The bonus of them both is that if you are barely scraping by, money challenged, cheap, or simply trying to keep your author costs down because ideally your money in will some day be more than your money out, they both have a FREE VERSION available.
Here’s the crux of the problem. MailChimp seems to be designed to work with WordPress plugins. WordPress plugins come with the PAID upgraded versions of WordPress, not the free version.
You are supposed to be able to make it work using HTML code in a widget. If you don’t know what a widget is, it is those menu items you can click on along the side of a blog.
MailChimp even provides you with the HTML code to copy and paste into the widget. Now apparently everyone I could find blogging about how to do it found it a very simple matter of copy and pasting it into the text tab of a text widget and viola it works perfectly.
THIS WAS NOT MY EXPERIENCE. No. Nope. Oh for the love of everything horror in this world it was so not my experience.
Instead of something resembling this:
I got this (my author fan blog page background is black):
And, to top it off, you cannot actually enter an email address anywhere to sign up for the newsletter.
I tried deleting the extra verbiage that is clearly coming through as text supposed to be on the screen. You can select that easily by clicking on the visual tab in the text widget. But then I got this:
It looks better except that broken image thing, and there is still no way to actually enter an email address to sign up for the newsletter.
Clearly there is something in the simply copy and paste HTML code MailChimp provides that is meant to be removed, revised, or both. It doesn’t spell it out and neither did any blog post I could find about it. The closest I got was one describing how to do a make it yourself custom button instead. That has to be created in another program. They recommended one requiring a monthly subscription. I stopped reading there.
So, to fix the MailChimp signup in WordPress in free versions issue, I realized I have to learn a little about how to code HTML. Ugh.
Let’s get this straight; I am not a website designer or developer. Nope. I am just a writer who would rather be writing than trying to figure this stuff out and don’t have the $$$ to hire a professional to do it for me.
Wait, I do have a fourteen year old . . . . . No, I’m probably wiser to figure this out for when there are no fourteen year old and friends around to ask them to do it for me.
Okay, let’s get to business.
Understanding HTML (a little) for the writer who knows nothing about coding freaking HTML:
DISCLAIMER: AS I SAID ABOVE I AM NOT A WEBSITE DESIGNER OR DEVELOPER. I AM GOING INTO THIS WITH AN EXTREMELY LOW KNOWLEDGE OF CODING HTML AND AM ACTUALLY TYPING THIS BLOG POST AS I DISCOVER AND LEARN IT FOR MYSELF TO HOPEFULLY HELP OTHER UNKNOWLEGEABLE WRITERS NOT SPEND A SLEEPLESS NIGHT IRRITATED THEY COULD NOT MAKE THE MAILCHIMP SIGN UP WORK ON THEIR FREE WORDPRESS BLOG. There, I said it.
Hell, I will probably have to go back to this blog post myself every time I have to monkey around with HTML coding. (Get it? Monkey around? MailChimp? Yeah, I’m bad with jokes. I’m not a comedy writer, I write dark fiction.)
HTML stands for Hypertext Markup Language.
This is the code that makes mumbo jumbo meaningless seeming letters and symbols look like this:
(This is an HTML widget on my Blogspot blog that I have neglected for far far far too long. And it WORKS! It’s a button with HTML code copy/paste provided by Facebook.)
Here are a few point-form basics from this blog (I’m basically saying what they said in different words). This blog was very helpful:
https://www.makeuseof.com/tag/5-steps-understanding-basic-html-code/
Tags (see step one of the above article):
- Tells it what the words in the document are supposed to look like. I.e.) bold text, underlined text, you get the idea.
- Comes in pairs (usually) with the affected text inside
- This example comes directly from the above article:
- <strong> This is some bold text</strong>.
- Take away from this:
- <strong> is the opening tag.
- </strong> is the closing tag (the / tells the interweb world this is a closing tag)
Empty Elements = Tags without a pair (see step one of the above article):
- These tags have no content. There is no text to be told what to do. They may or may not have an end tag.
- This example comes directly from the above article:
<p>This is a second<br>paragraph split between two lines.</p>
-
- <br> is a line break. This is a formatting instruction that may or may not have a closing tag <br /> because it is not essential (notice this time the closing indicator / is after the code with a space between them).
- Take away from this:
- Formatting instructions like line breaks <br> do not necessarily need to have closure in their world because they are not affecting specified text that you have to mark the start and end of.
Making your Document Look Right (see step two of the above article):
- You need certain tag codes to make your HTML document look pretty and not like my attempt at the start of this article to install a MailChimp signup into my WordPress blog.
- Start and end codes to every HTML document (so it knows it is an HTML document):
- Open tag: <!DOCTYPE html>
- Close tag: </html>
- Put these at the very start and end of the entire whole document.
- Head <head> section:
- Information including page title and scripts running on the page.
- The author of the article above says this <head> comes after the initial <html> tag, but above says you close the document with </html>
- I think they mean you put the <head> after the <!DOCTYPE html>
- Body <body> = the body of the text.
- This sounds easy enough. This is the text the viewer of your blog will actually see.
- In the <body> of the text, you can make it look like you do by changing fonts, bolds, underlines, etc cetera in Microsoft Word, but by embedding code in the HTML like the bold text example earlier.
- Hitting the “Enter” button on your keyboard to break up your HTML code may help you see the elements of your code in blocks that are easier for you to understand, but it will have no effect on what actually comes through on the visual on your blog. You have to insert a code for that.
- This example is a screenshot copied directly from the above article:
= Defines a section of the document
<h2> </h2> = A header tag. Like Microsoft Word headers, the lower the header number the higher the header importance.
<p> </p> = Paragraph break. Browsers automatically put spaces before and after.
Images, aka you need pictures:
- Image tag: <img>
- Alt text = alternative text: The text that appears with the image
- Src attribute = source: Tells it where the image is loading from (i.e. https location like your WordPress blog uploaded pictures)
- Width and height: the size of your picture in the blog screen (number of pixels)
- This example is copied directly from the above article (step 4):
<img src=”https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg” alt=”Dr. Phil” width=”1280″ height=”720″>
- You see from this the source file is pulling this image file DrPhil-1280x720px-Shareimage.jpg from this spot: https://img.drphil.com/wp-content/uploads/2016/04/
- Text with the image (alt) is: Phil (alt=”Dr. Phil”)
- Image with is: 1280 (width=”1280″)
- Image height is: 720 (height=”720″)
Links, aka links make blog posts more fun and you need to direct your readers to your sources of information (aka validation):
- Link tag: <a>
- Href attribute: Where you are linking
- Title element: Like the alt text above. This is text that appears with the link and is optional.
- This example is copied directly from the above article (step 5):
<a href=”https://www.google.com/” title=”Click here to search the web”>Visit Google</a>
-
- <a> = open tag for the link. Note the link and its attribute and element are inserted before the end > (before “Visit Google”).
- Href = the link. Here the link is https://www.google.com/
- Title = words that show up when you hover over the link. Here the hover text is Click here to search the web
- “Visit Google” would be the text that appears in your blog post article that is hyperlinked to the https link (see “17 Simple HTML Code Examples You Can Learn in 10 Minutes” below as an example). As you know, that usually automatically shows up as blue underlined text by default when you hyperlink in WordPress or Microsoft Word (like the hyperlinked example below).
Here is a link to 17 Simple HTML Code Examples You Can Learn in 10 Minutes
(this is linked to in the blog article I used for this. I didn’t get fancy trying to HTML code it. The title element aka words when you hover are the default when I hyperlinked it in Microsoft Word.).
Now here is the bad news.
Apparently, according to this article I got all this from, knowing HTML is not enough in today’s more advanced internet. Poop.
Now you have to know CCS (Cascading Style Sheets) and JavaScript.
CCS language describes how you HTML text should look. It’s the code inside the HTML code. I.e.) how your class attributes are coded to look within the HTML. (That is still kind of Greek to me).
JavaScript is what makes the webpage (or blog page) respond to the readers actions “without loading a new page every time”.
I.e.) JavaScript gives you that warning message without reloading a new page, flips through images, or asks the user/reader for input.
I am not even going to try to go into CCS and JavaScript right now. I just want to make that freaking MailChimp signup work on my free WordPress blog.
The intangible world of the literary mind 
