Text customization - Magazine Style Text

November 11, 2008

Here's another way you can customize your Blog. In this case, your Post. This tutorial will be about Magazine text style in Blogger Posts. You often see this style in newspapers, literature, magazines....It looks all right.

And here are two different Magazine styles:

• Drop CAPS
• Big size of the First letter in the Post

To achieve this effect, you have to place some code in your EDIT HTML section of Post Editor.

Code for DROP CAPS:

<span style="float:left;color:#000000;font-size:100px;
line-height:70px;padding-top:2px;font-family: Times, serif, Georgia;">L</span>

Ok. You have to "surround" your letter with this code. For example, I've surrounded letter L (in orange), which will be on the beginning of my Post.
You can change some settings if you like:

- color: #000000 (black) to whatever hex color you like (you can use color names also)
- font-size: just change 100px to whatever
- font-family: Times, Arial, Verdana....
- padding

Code for BIG FIRST LETTER:

<span style="font-family:Georgia,;color:#000000;
font-size:56px;font-weight:normal;line-height:80%;letter-spacing:-6px;">L</span>

Same thing here. Here's the example of some text in editor, and placed code:



If you are going to do this often, and it bothers you to copy so much code every time, you can create some CSS style in your HTML template code. Go to:
DASHBOARD --> LAYOUT --> EDIT HTML, place the following code (white), above existing (orange):

.dropcap {
float:left;
color:#000000;
font-size:100px;
line-height:70px;
padding-top:2px;
font-family: Times, serif, Georgia;
}


body {
background:$bgcolor;
margin:0;
color:$textcolor;

Save Settings. Now, next time you want to "surround" your first letter with code, it will look like this:

<span class="dropcap">L</span>

This was a CSS for DROP CAPS, for BIG FIRST LETTER it's the same story, just change the CSS part, so it will look like this:

.bigfirst {
font-weight:normal;
color:#000000;
font-size:56px;
line-height:80%;
letter-spacing:-6px;
font-family: Times, serif, Georgia;
}

When you're "surrounding" your letter, you'll use this code:

<span class="bigfirst">L</span>

NOTE:
- it is recommended to apply code at the end, and publish it from EDIT HTML mode (sometimes, if you switch from compose to HTML, it can undo the change - this doesn't happen if you placed CSS in your template)
- you can (and sometimes you'll have to) adjust font size, padding, color in the code
- you can use paragraphs to gain some line space between Post title and Content text

<p>
<span style="float:left;color:#000000;font-size:100px;line-height:70px;padding-top:2px;font-family: times;">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Duis id odio quis ipsum fermentum dapibus. Nam magna. Aenean quis dolor ac enim luctus tristique. Aliquam sagittis accumsan est.
</p>

That's about it. Remember to change some colors! You can find some hex values here...

Smile!