Search This Blog

Sunday, August 26, 2007

First alphabet of post in large uppercase and color plus background color

Most magazine style website have the first alphabet of the post larger than the rest of the post and often in different color as well. An example is Good Health Magazine. Some have a colored background as well like Podcasting Magazine. Here is how you can do it:

First alphabet of post large and colored

This was how Good Health Magazine was made to have the first alphabet colored and colored. After signing into Blogger Dashboard, click on SETTINGS tab followed by FORMATTING sub-tab. Right at the bottom of the page is the post template. Whatever you put into the post template will appear in every new post you create. You must first decide on the font size of the first alphabet as well as the color. For the color, you can use this site to help you decide on the color code to use in the script you must put into the post template:

http://www.mandarindesign.com/color.html#namedcolors

A better alternative is to use an existing color from your site, for example, the post title font color. A great tool you can use is ColorPic which you can download from

http://iconico.com/colorpic/

I used it a lot. To use ColorPic, you must have the page from which you want to determine the hexadecimal color code opened together with ColorPic. Hover the mouse cursor over the area which you want to know the hexadecimal code. Nowever, if you intend to use the color of the post title for the color of the first alphabet, a problem will be when you hover the mouse cursor over the post title which for most Blogger template, is a clickable link, the post title changes color. To overcome this, use a very good free photo editor Irfanview (click BACK button to get back to this page). At your blog or website, press PRINTSCREEN key, open Irfanview and click EDIT > PASTE from the menu bar. The image of the page will be pasted into the Irfanview window. This time, when you hover your mouse cursor over the post title, it will no longer change color because it is only an image. Open ColorPic and hover your mouse cursor over the post title and the hexadecimal color code of the font of the post title will be displayed in ColorPic. Note it down. In the case of Good Health Magazine, the blog uses Hackosphere modified 3 column template and using the technique described, it was found that the hexadecimal color code of the post title was #CC6600, so this was the color code used for the script in scroll box below (colored red). You will also have to specify the font size (colored orange) and the font family, a list of browser safe font family you can use can be obtained from

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

for Windows and MAC. The font family I used is colored green in the script in the scroll box below:

<p style="text-align:justify;">
<span style="float:left;color:#CC6600;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family: Times New Roman, serif,;">First alphabet</span>Rest of text.</p>


Once you have decided on your font color, size and family, change the relevant part of the script in the scroll box above, sign into Blogger to get into the Dashboard, click SETTINGS for the blog you want to install this in, followed by FORMATTING sub-tab, and right at the bottom of the page, you will see a large box for the post template. Paste the script into the post template window and save. Once you have done that, each time you create a new post, you will see the script in the post editor window. Type your post above the script, and when you are finished, highlight the script

<span style="float:left;color:#CC6600;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family: Times New Roman, serif,;">


press ctrl+C or right-click and select "copy" to copy into the clipboard. Scroll to the top of your post, and paste this just before the first alphabet you want to be large and colored. Immediately after this first alphabet, either copy </span> from the script at the bottom of the post and paste it immediately after the first alphabet, or, this is what I myself preferred as it is easy to do, type </span> myself immediatlely after the first alphabet.

Now scroll to the bottom of the post, and highlight all the text plus spaces between the last alphabet and </p>, click the DELETE key to delete everything except </p> at the end of the post, and publish.

To illustrate, I will show the first part of the post in What is Advanced Healt Care Directive and why we need it and also the last part:

FIRST PART:

<h2>What is an Advanced Health Care Directive and Why Do I Need One?</h2>By Barbara C. Phillips
<p style="text-align:justify;">
<span style="float:left;color:#CC6600;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family: Times New Roman, serif,;">A</span>dvanced health care


LAST PART:

Source: <a href="http://www.isnare.com">www.isnare.com</a></p>


First alphabet of post font large, colored and with background color

The method used for Podcasting Magazine is about the same as the above, except you add one more attribute

background-color:#D4FFFF; to the script:

<p style="text-align:justify;">
<span style="float:left;color:#CC6600;font-size:80px;background-color:#D4FFFF;line-height:60px;padding-top:2px;padding-right:5px;font-family: Times New Roman, serif,;">First alphabet</span>Rest of text.</p>

12 comments:

  1. Thanks Peter. Wow,this is complex and require some effort for each post just for the cosmetic effect.

    It was simpler during the classic template days.

    ReplyDelete
  2. Hi Daniel,

    I don't agree this is complex and require lots of effort. It is just a matter of keeping the script at the bottom of the post, then when you are finished, copy the relevant part (you can also cut, but I prefer copy just in case something happens), paste it into the proper position, copy-paste </span> after the first alphabet, then deleting everything not wanted (except </p>) from the script at the bottom of the post. While preparing the demonstration blogs, I found it very easy.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  3. thanx, peter. My question: Is this also how you change the font and color for post titles in Blogger? If so, I assume the script is different. Got it?

    ReplyDelete
  4. Peter,

    What if I want to always have the same text before the body of each post followed by the same closing text after the body of each post? Is that possible?

    ReplyDelete
  5. Hi Work at Home for Dummies,

    Regarding your request, I don't know of an automatic way of doing it and have no time to research. Anyway, if you want, you can try the manual method by using inline CSS for the last alphbets of each post where you want such feature.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  6. Hi Peter, I'm trying this out on a blog I haven't gone public with yet and it works like a charm:) Have to ask though: What do you need the justify-line for in the first place when you're just gonna delete it anyway? Is it important?

    ReplyDelete
  7. Uh-oh Peter, there seems to be a problem... As long as I stay in html mode everything is fine and dandy but the moment I go to compose mode, the design falls apart. Is there any way to avoid this?

    (I'm talking about the simple initial, not the one with a background. Haven't tried out the latter.)

    ReplyDelete
  8. "What do you need the justify-line for in the first place when you're just gonna delete it anyway? Is it important?"

    Sorry don't understand. Can you elaborate.

    "but the moment I go to compose mode, the design falls apart.

    In what way did it "fall apart"? Why don't you try publishing the post and check the result or preview instead of going to COMPOSE mode

    ReplyDelete
  9. Hi Peter, here's a screenshot of what I mean by the design falling apart: an example

    (Hope you can see the initial, it's there, in the same color as the title but very small.) As you say, it does work when you write in html mode and publish directly. But if you want to switch to compose mode as a simple way to change - for instance - the colour of a single word, this is what happens. (Whether you do it while writing, or even if you publish first and edit later - the result is the same.) Also, sometimes when I click 'New Post' Blogger is already in compose mode, and when it is, this happens - even though I switch to html mode before writing.

    As for my question about the necessity of the justify-line, well, following your instructions does entail removing that line in the final step:

    "Now scroll to the bottom of the post, and highlight all the text plus spaces between the last alphabet and < / p>, click the DELETE key to delete everything except < /p > at the end of the post, and publish."

    ReplyDelete
  10. :-) I had to read my own post again to refresh my memory on what I wrote. However, I don't know if I have a solution for your problem re: Compose mode, just my practices. I practically never use COMPOSE mode as it can mess up the codings, so I have never experienced the problems you faced. In fact, Blogger.com provides a way to disable COMPOSE mode account wide (meaning for ALL blogs in the same account or global settings) so I think they are aware of what COMPOSE mode can do.

    ReplyDelete
  11. Okay Peter, thanks for replying. You have a great blog, I've found lots of useful stuff here:)

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications