Dropcaps like in a fancy magazine is what you see in this post. I saw instructions for this trick at Mandarin Design and I wanted to share this beauty with you all.
It is done by putting the first letter of your post within <span>-tags, with a class named "dropcaps". In your CSS-definitions, you can set this first letter to Very Big, and in a different color. I use the following CSS-definition:
In your post, the first letter is inside a span like this: <span class="dropcaps">D</span>. The result is very nice: a large capital that stretches over 5 lines.
Posts
This is what people say:
Your tips and hacks have been really useful. I kinda adapted this one to change the date for my site
I don't have much knowledge of html but your instructions are easy to follow and I am liking how my blog is looking. Can't wait to see your next tip. Thanks!!
Hey Hans, many thanks for this tip, together with the pullquotes it's a great visual improvement on the post text look...
I've included it in my template (of course with full credits to you and Hackosphere), which I explained in a post for dummies to allow anyone to set up such a template without writing a line of code.
Mick, Hernán: I visited your Blogs and it really looks kewl with the dropcaps! Good work!
Thanks Hans, very kind... I'm going a bit off topic here... is there a way to fix the problem when you upload images, in any case (from the web or computer, in visual or code mode) the image gets placed at the top of the post (no matter where the cursor actually is) and I have to drag it down in visual mode or cut and paste the code... also it seems the images uploaded to Blogger don't link anymore to the original sized ones (that's why at the moment I'm using Photobucket).
Many thanks.
Greetings from a fellow half Dutch (born in Breda but my mum is Italian and my parents came in Italy when I was a baby so I don't speak a word of Dutch though I'm missing those Muijses for breakfast!)
Another cool hack Hans=D Enjoying it tremendously and, as always, looking forward to more from you=)
I'm missing something, I can't get it to work. I feel like there is a step I don't know about.
@Angel: you're welcome!
@Deb: I took a look at Debs Web and you seem to have the dropcaps up & running. If you still have problems, please give a description of the problem you are encountering, and I'll be gald to help you.
@Mick: I noticed too that the Editor has some strange things, such as the uploading, changing fonts, etcetera. What I usually do is host pictures from another place, link to them, and place them on the spot where I want to have them using html.
i need beta blogger template
can u help me?
Xprodoksit, I will be glad to help, if you explain what your problem is.
Hans thanks for your reply, seems we're all having the same problems...
We should probably use external editors... at the moment the only one to support Blogger beta seems the Windows Live Writer, which is also a pretty advanced editor... if you're anti-Microsoft and a Firefox user you may use the Performancing extension, it doesn't support Blogger Beta but you can copy and paste the code on Blogger's editor...
thanks a lot for this dropcap feature.I have included this in my english & regional blogs,though with minor changes to suit my template style.(I have also included u & ramiani in credits)
Thanks again
Deepa
http://horizonwitinus.blogspot.com/
Just wanted to say thanks for one of the most useful sites about blogging I've seen. Great tips, great hacks. I like the way you make more and more improvements to your blog and keep sharing the hacks with us. Great work, Hans.
(request: keep your instructions clear enough for us non-HTML educated)
@Juanito: thanks, and I will do my best!
Hi, I just wanted to say thank you, arigatou gozaimuchness for this very useful hack (I'm still exploring the rest of your site for others) ^^.
I modified it slightly to drop three lines instead of five b/c of the narrow post width of the Minima template (I personally think it still works ^^).
~huamulan03 who offers profuse thanks again
PS I placed your credits in my sidebar (the "support" section) before the Blogger logo
Hi Hans,
Am pretty novice with all this blog customising. Was interested in this Dropcap but don't understand how to implement it.. what are you refering to with CSS.. etc.. Do I have to enter that code into the HTML code? Do i have to enable widgets??
As you can see, am a little lost with all this!
Thanks in advance,
Marc
euroreflekt.blogspot.com
@Marc: HTML is used to bring structure to your web-document. <h1> indicates a heading. <p> indicates a paragraph. <ul> indicates an unordered list. And so on. All these 'things' are called elements. The styling of each element is defined using CSS. CSS means: cascading style sheet. With CSS-definitions you format the color, font, alignment, and so of your html-elements.
Now to the dropcaps. The dropcap-styling is CSS, and has to be put in your template, somewhere between <style> and </style>. It is most practical to put it just above the </style>-tag. Save the template, and you are ready to use dropcaps.
The dropcaps themselves are created in a post. Create a new post, go to HTML-mode, and enter the following text: <span class="dropcaps">T</span>his is a big dropcap..
Publish the post and you will see a big capital T as the first letter of your post.
Hello Hans,
Again great job on the site! Not sure if you had any contact with Meg over at Mandarin Design, But I see the site has expired!! Oh me oh my! She was great... If you have her email tell her, her fans appreciated all the cut and paste coding. Well at least I did. I am still in the early stages of my design and am thankful for the coding she provided and the hacks you offer. She will be missed....
Just curious is there any site similar? Although I prefer her, I have searched but to know avail.
Thank you CD! I did indeed learn from Mandarin.
Dear Hans,
Thanks very much for your feedback. Sorry I had not seen you answer! Have used the dropcaps on my blog, but sometimes it does not work properly. Even if I change the size, etc.. it stays really small. Maybe I should avoid fiddling around with the code.
Thanks for your help,
Your blog is great, I have subscribed to your posts!
Thanks, Marc!
Good day Hans! Dropcaps is really nice looking. I am going to implement it later...but, sad to say that i couldn't have this effects applied to all my archive posts, which will be tedious job.
By the ways, I have made a post regarding dynamic adsense code display in accordance to post's author, in a team blog setup. I will appreciated very much, if you could give me hints or possibilities to resolve the javascripts problem. Note, I have emailed to Ramani hours ago, and I am not sure he will entertain me.
@BloggerDigest: I experimented a little with my testblog. I added a <b:if>-test for the authorname to the postbody, and added javascript in the same way you did. On my testblog it works fine. It lets you add author-dependant text or code to the post. So what exactly is the problem you faced? What did not work?
hans, i appreciate your method, but this involves span tags, and cannot be applied for previous posts easily.
there is an easier method,
go to this.
Will you promote me? i am only 14, and have several posts, but little traffic.
Hi Hans,
Please help me...how do I insert the dropcap tag in HTML...I could find the style...style...I am using the new beta blogger.
Hello. It is me once again. I tried to apply this drop caps into my blog but it took me till morning and nothing happened. I am using the new blogger template, and i am just new about html, can you show me where in my template do i have to paste this code. if you can see my blogsite , is it possible for this drop cap in my page? here is my link http://shiptalk.blogspot.com
thanks.
@Navigator: the .dropcaps{blabla} code goes in your template, in the skin, so that means between the <b:skin> and the </b:skin>-tags.
When you are writing your post, edit in html-mode (not rich text), and add <span class="dropcaps">X</span>, where X is your capital that has to drop.
I think that design is the really important part if you want your magazine to be in top women's magazines!
thanks for sharing it with us!!
thank you so much Hans for you tips and hacks!
you've helped me a lot in learning about
enhancing my blog., I recently found this blog and have been looking for more tricks here since, it's probably addictive!(though this probably sounds geeky, and worse I'm not exactly knowledgeable about this HTML/CSS stuff)
I'll probably look here for more tips in my free time...
the frop cap is cool..thanks again!
It's worked!! I did again!
I've just started making a blog one month ago -never before. people like you makes my new blogging experience become more interesting.
thank you!!!
thx for this tricks,...
thx for tricks,
success forever
I cannot make the dropcaps work. I've put the code into my template directly above the '/b:skin' tag.
When I save, I get an error that says 'Invalid variable declaration in page skin: Variable is used but not defined. Input: headerBgColor'
And the dropcaps don't work. Suggestions?
Thank you so very much, it is so beautiful.
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.
Look who's linking here!
0 Backlinks point here