Drop Caps like the Professionals

Iget questions periodically about to to edit blogs and how to be different without a lot of programming. One of those questions is creating a drop cap like the newspapers and magazines do. Drop caps are eye catching and a simple little design character that separates your blog from the next blog. Can a drop cap be created on the net. The answer is YES.

There are two different ways you can create a dropcap is by adding a quick CSS line to a post or add a few lines to the style sheet. As you know, or don't know that many blogs allow you to edit the RAW HTML and some do not. Don't worry. The two work arounds work so you can choose your script.

Blogging WITH the ability to edit the RAW HTML:
Add this to the CSS code that is located inside the <head> of your website. Editing is easy. Just change the attributes like "red" and "verdana" to "black" and "arial". Copy all including the very last " } ". Make sure you don't delete the last " ; " of each line. If one is missing the code won't work (or show) properly.

.drop {
float:left;
color: red;
font-size: 100px;
line-height: 80px;
padding-top: 1px;
padding-right: 5px;
font-family: verdana;
}

Now to get the first letter of your post to become a drop cap. Just change the "first-letter-here" to the letter you want to be a dropcap:

<span class="drop">First-Letter-Here</span>

The <span></span> tags call the script in the <head> and needs to be added to every post or paragraph you wish to make a dropcap. If you don't add this code to your posts... you won't have a dropcap.

Blogging WITHOUT the ability to edit the RAW HTML:
Now to get the first letter of your post to become a drop cap. Just change the "first-letter-here" to the letter you want to be a dropcap. Editing the attributes is easy. Just change the attributes like "dark red" and "verdana" to "black" and "arial". Copy all including the very last " } ". Make sure you don't delete the last " ; " of each line. If one is missing the code won't work (or show) properly.

<span style="float:left; line-height: 80px; padding-top: 1px; padding-right: 5px; ">first-letter-here</span>

The <span></span> tags call the script in the <head> and needs to be added to every post or paragraph you wish to make a dropcap. If you don't add this code to your posts... you won't have a dropcap.

No comments:

Post a Comment