Seven Tips to Make Your Blog Posts Sparkle

1 Add a Shadow to Your Subheadings

Style notes:

  • color: controls text color
  • text-shadow: offset horizontal offset vertical color
  • NOTE: Minus numbers shift direction in the opposite direction. For example, to shift left use a minus number in the horizontal location.

The code that creates what you see below:
<h1 style=’color: blue ; text-shadow: 4px 4px 10px grey>Blue text on grey shadow</h1>

Blue text on grey shadow

 

The code that creates what you see below:
<h1 style=’color: navy ; text-shadow: 4px 4px 10px yellow>

Navy text on yellow shadow

2 Indent a Paragraph

Why go to this trouble of indenting your paragraphs? Studies have shown that indented paragraphs are more likely to be read. And we all want to give our content every advantage we can to have it read.

The code that creates what you see above is:

<p style=’text-indent: 30px’>Why go to this trouble of indenting your paragraphs? Studies have shown that indented paragraphs are more likely to be read. And we all want to give our content every advantage we can to have it read.

3 Make a Phone Dialer Button

The code that creates what you see above is:

<a href=”tel:18007001234″> <button> 1 (800) 700-1234</a>

4 Add Rounded Corners to Your Button

The code that creates what you see above:

<button style=”border-radius: 15px;”>This Button Has Rounded Corners</button>

5 Make Your E-mail Address Unspammable

The code that creates your unspammaable e-mail link is:

Edit what yo see below. Replace Left with what is to the left of the @ character in your e-mail and replace Right.com with what is to the right of the @ character in your e-mail.

For example: if your e-mail is dog@mutt.com. Replace Left with dog and Right.com with mutt.com.
<script language=”JavaScript”>
<!–
var name = “Left”;
var domain = “Right.com”;
document.write(‘<a href=\”mailto:’ + name + ‘@’ + domain + ‘\?subject=Subject Title Goes Here”>’);
document.write(name + ‘@’ + domain + ‘</a>’);
// –>
</script>

 

6 Add a Shadow to a Table

This table has a shadow.

 

 

The code that creates what you see above is:

<table align=left width=500px style=”box-shadow: 4px 4px 10px grey”>
<tr>
<td>
<h1>This table has a shadow.</h1>
</td>
</tr>
</table>

 

7 Remove the Underline From Your Links

This link is a working link, but is not  underlined.

The code that creates what you see above is:

<a href=”Link Address Goes Here” style=’text-decoration:none’>This link is a working link, but is not underlined.</a>