I was sitting idle, i was totally out of ideas. It does not mean that i am really out of new idea, it was just because i wanted to sleep. Well suddenly something flashed in my mind and that was another post on something new. Today i thought to post about pseudo-element CSS. Its little bit unusual but It is supported by a lot of browsers. so let me tell you about it, but i know you want to see any type of Demo of it? You can see the Demo in my own blog :)

What is Awesome?

I think there is nothing awesome in it, it is just unique. People love it just because its a new thing to them. Lon time ago i saw it in a news website and today i thought to share it with you guys. I don’t know maybe you find it awesome.

Change in Posts

Log into your blogger account

Go to Template > Edit HTML

Now check the box at the top left of the text box

search for this tag now

]]></b:skin>

Now post this code just above the ]]></b:skin> tag.

.sarakuj_upper:first-letter {
float: left;
display: block;
font-size: 38px;
margin:0px 6px 0 0;
padding:0 0 0 9px;
}

 

Now if you have done it correctly then search this tag.

<data:post.body/>

Replace <data:post.body/> with the following code.

<div class='sarakuj_upper><data:post.body/></div>

Hmm i know there is not just one <data:post.body/> tag. Let me give you a hint, your desired <data:post.body/> tag is second one, i assume it can be different in your template but try the second then try the other. If it doesn’t work with div tag you can use p or span tag like this.

<div class='sarakuj_upper><data:post.body/></div>

or

<p class='sarakuj_upper><data:post.body/></p>

or

<span class='sarakuj_upper><data:post.body/></span>

Change in Comments

It is pretty same in comment as well, you just have to do the same thing with a little change.

Log into your blogger account

Go to Template > Edit HTML

Now check the box at the top left of the text box

search for this tag now

]]></b:skin>

Now post this code just above the ]]></b:skin> tag.

.sarakuj_upper:first-letter {
float: left;
display: block;
font-size: 38px;
margin:0px 6px 0 0;
padding:0 0 0 9px;
}

 

Now if you have done it correctly then search this tag.

<data:comment.body/>

Ok i know there is confusion again, there are again multiple <data:comment.body/> tags, i think you must try it on second tag. Replace the second <data:comment.body/> tag with the following

<div class="capital"><data:comment.body/></div>

or

<span class="capital"><data:comment.body/></span>

or

<p class="capital"><data:comment.body/></p>

You are done, you can check your new modified posts. This is simple method but i am sure you will love it.

Before You Go

You can customize the color of the first capital text by changing the above code.

.sarakuj_upper:first-letter {
float: left;
display: block;
font-size: 38px;

color: #EEEEEE
margin:0px 6px 0 0;
padding:0 0 0 9px;
}

You can use any other color code instead of #EEEEEE. Try it and tell me if you like it, feel free to comment.