How To Make Money with a Blog and Make it Look Professional

by Reads (2,343)

Now that you have  a blogging platform and know which kind of hosting you want to use, it’s time to design and launch the site. And maybe earn a little cash in the process.

In this how-to, TechnologyGuide will give a general overview of HTML, design, and advertising. Keep in mind, this is a high-level overview, as one can go so far as earn an advanced degree in any of these elements.


Learning CSS or HTML can seem daunting at first, but really, there are a few simple tags that anyone can master in order to edit the look and feel of a blog or website. Right now, the industry standard for HTML and CSS is HTML5 and CSS3. Websites have had to upgrade to this, and while there is still plenty of legacy HTML 4 floating out on the web, using HTML5 will ensure that coding is up to date and compatible with current browsers.


The general difference between HTML and CSS is that HTML is the code and content, while CSS is the design or style applied to the HTML. CSS is incorporated into HTML in three different ways. The first is directly to a tag itself, referred to as “in-line,” and this affects a single tag. For example, an in-line CSS style might just change a header size in one part of a post.

The next type of CSS is “internal,” which is applied to a single page. If you have one page on your site that you want to use a specific design for, or you want to change the background, font size, or font type, you would use an internal CSS style.

The final one is “external,” and this is applied to an entire site, and can be saved as a style sheet and used as a consistent theme for the HTML. External CSS styles are useful because edits can be made to the .css file, and it will automatically make the specified changes to the HTML as long as the HTML coding is pointing to that CSS file. With external CSS styles, users can change the blog header for the entire website, or edit the design for each post without having to make each individual change on each and every page, for example.

Most blogging platforms automatically turn standard text entries into HTML format via a WYSIWYG (What You See is What You Get), which has standard Word-like formatting options available with just a click of the mouse. WordPress also allows users to toggle between “Visual” and “Text,” giving users the ability to view how HTML tags affect the standard view, and vice versa.

Knowing the bare basics of coding can be useful when things aren’t lining up right in the visual view, because sometimes the answer lies in a simple HTML tag issue. So to save any editing headaches or the cost of a designer to fix simple errors, here are the basics of HTML that anyone running a site should know. Plus there are plenty of free online resources to learn more, as well as online courses.


An easy way to think of tags is to compare them to quotes. Tags need an opening and a closing; so to bold something, the tag would be: <b> text goes here </b>. This signals for the text within the tag parameters to appear bolded. The same result applies when highlighting text and hitting the “bold” command.

Of course, tags to dictate an entire website wind up lengthy and convoluted, but at their core are basically one long code made from a bunch of smaller commands and codes. Understanding these smaller codes can help locate issues and understand your website more in depth.


The most important tag to HTML? Well, that would be the HTML tag itself. All of the code for an HTML website must lie in between <HTML> </HTML>. Tags are written in plain text, which just means that the text does not feature any specific styling. There are plenty of programs that can do this, including Notepad for Windows and Textedit for Mac, both of which come pre-installed. Using an application like Microsoft Word automatically applies formatting to the text, since a font is employed as well as page breaks, margins, headings and so on.


Applying colors to a font, background, hyperlink, really anything, is easier than it may seem. Every color has its own unique code, which begins with a hashtag. Black starts at #000000, and white is represented as #FFFFFF.

From there, other colors are a unique combination of letters and numbers, all of which can easily be found online. A simple search will return all the color codes you could need, and most blogging platforms or design programs have an option to see the code of a specific color. Using a color code will help maintain continuity on the blog, so that the color can be reused for updated graphics, text, headers, and more.

Banner Design

If bloggers or shop owners design nothing else themselves, the one thing they should consider creating is a banner or a header. This is what pulls people into a website or blog, and especially into an Etsy shop, and much can be said about a site’s content from this seemingly simple image. And, it’s really not that hard to build.

First, figure out the image size needed for the header for your site. Most services will supply this information; otherwise a quick Google will give you the answer. For instance, an Etsy shop uses a banner sized at 760 x 100. This represents the amount of pixels, not inches or centimeters. Any image editing program will let users adjust image or canvas sizes by pixels, since it is a standard way to represent resolution.

The good news is that there are plenty of great image editing programs available, including expensive Adobe products. But for those on a budget, GIMP is free and robust alternative (see below). As for designing a banner, look around at other blogs and shops to see what they have. This typically includes pictures of the products for sale and references to the general blog topic. You don’t want to overdo it, so try to keep things simple, and of course, eye-catching.

When saving a file to upload to a website, it’s important to take note of the DPI, or Dots Per Inch. This is how many pixels it takes to create the desired resolution. The higher the DPI, the larger the image file, and the larger it can be scaled up before it becomes pixelated.


Usually, programs will allow users to save a file “for the web.”This ensures the resolution will be high enough for quality purposes, but not so high it exceeds file maximums and bogs down page load times.

The most common file formats for saving images for the web are .jpg and .png, and they both result in crisp images.  Gifs are also popular, and are saved at lower resolutions, but this usually causes distortion in any image that isn’t a solid color, so saving a photograph this way is not a great idea. Gifs are commonly used to create animated images, generally by layering static images to incorporate movement into things such as banner advertisements.

Editing Programs

Adobe Photoshop is a well-known image editing program, along with the entire Adobe design suite that includes Illustrator, InDesign, and more. However, these are often overkill and not worth the cost for the causal designer. Once again, GIMP is free and can handle most, if not all, imaging editing and banner design needs.

But if you must have the biggest and best, or already own it, check out Adobe Illustrator. This program creates vector based images, which involves lines, shapes, and other simple tools. There are other programs that do the same, but Illustrator is the industry standard.

Vector-based images are a smart choice when designing custom elements, and they can easily be scaled up and down for future use. A vector image, at its most basic, is made up of paths, lines, and other shapes, which live on an x and y axis, and will remain crisp and proportional no matter how big or small. It is best for illustrated graphics, shapes, fonts, and other created graphics that designers want to have free reign over down the line.

The other option is Raster images, and this is best for photographs and other non-illustrated images. They are dependent on the resolution in which they were created, and have a set limit of how large they can be scaled before quality begins to suffer and pixilation occurs.

Buy a Design

Designs can be purchased a la carte through sites such as Etsy, where artists offer their services at flat rates for banners, logo designs, business cards, and more. Most of these are sold for affordable prices, and are a nice option for anyone that doesn’t want to put in the leg work to design their own.

Complete blog designs can be purchased this way as well, and it’s an easy way to quickly get a design without having to hire someone and pay hourly rates. However, it does not allow for much customization, so while it might be a good option in order to get a blog up and running, chances are you will want to change it down the road. But maybe by then, you’ll have brushed up on some coding and HTML, and will be able to customize it yourself.

Page 2 of this how-to feature deals with advertising. Keeping reading to learn how you can make money with your blog.

Pages: 1 2



All content posted on TechnologyGuide is granted to TechnologyGuide with electronic publishing rights in perpetuity, as all content posted on this site becomes a part of the community.