Po ...
How to Create Drop Caps (Big First Letters) in Blogger/Blogspot
30 comments
Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, literature, magazines. So, in this tutorial I will show you how to applyautomaticallya Magazine text style on Blogger Posts and Comments. Let's start adding it...
-> Add Drop Caps For Blogger Posts
-> Add Drop Caps For Blogger Comments
Big First Letter for your Blogger / Blogspot Posts
Step 1.From your Blogger Dashboard, go toTemplateand click on theEdit HTMLbutton:
Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type this piece of code inside the search box then hit Enter to find it:
]]>Note: you might need to click on the arrow next to it to expand the code within and then you need to search]]>one more time.
Step 3.Just above]]>, add the following CSS code:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size:40px;
color:#000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}Color- change the value in blue with the hex of your color
Size- to change the letter size, increase/decrease the value highlighted in pink.
Step 4.Now search for this code:
Step 5.Then immediately before and after add the red fragments you see in the example below:
Step 6.Save the changes by clicking on theSave templatebutton.
Important! If the above code is not working, add one of following codes from this example:
Or try this instead:
Big First Letter For Blogger/Blogspot CommentsStep 1.Log in to your Blogger account > go toTemplate>Edit HTML> click anywhere inside the code area and press CTRL + F keys to open the search box
Step 2.Type the following piece of code inside the search box and hit Enter to find it (if you have already added this code, skip step 2 & 3):
]]>Step 3.Add the following code just above]]>:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size:40px;
color:#000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}Color- to change the letter color, replace the value in blue with the value of your color. Here's a tool that might help you to find the hex of the color that you need: Color Code Generator
Size- to change the letter size, change the value in pink.
Step 4.Then Search for this piece of code:
Step 5.Add the red codes before and afteras you can see in my example below:
Step 6.Save your Template.
That's it! Now you have a cool drop cap first letter on your blog. If you have any question, leave a comment below!
Like
2
Random Posts
CSS3 Transition Property Basics23/02/2014 - 4 Comments
How to add “Email Subscription Form” to Blogger Blogspot01/06/2012 - 50 Comments
How To Remove Blogger Threaded Comments12/03/2012 - 6 Comments
Related Posts:
How to Add CSS code To Blogger usin...
How to add custom Variable definiti...
Understanding the Page Elements of ...
Add a Cool Style to Blogger Threade...
Top Commentators Widget with Avatar...
30 comments:
Anonymous 6/05/2012
hii admin.. ihave 2 doubts please help. First one is how to draw arrows and cirles on a picture? Second one is how can i create a animated image for blogger tutorial? please help........ Reply
probloggerstricks 6/09/2012
intersting post...keep it up...
recent post:Customise About me
Regards,
ProBloggersTricks Reply
saikiransama 6/09/2012
Nice tutorial Dude. i like to Publish Articles With a Drop Cap First Letter.thanks for Sharing Reply
Arun kumar 6/09/2012
what is the name of admin? Reply
probloggerstricks 6/09/2012
@arun Kumar:
I think Anonymous..:D Reply
Dayana 6/15/2012
how to add html code in a box like yours in blog post. please tell me Reply
Blogger Tools 6/17/2012
nice tips...i tried it on my blog. thanx Reply
Nilesh Patil 6/22/2012
Ya... very nice info And Very Useful To Attractive blog post.. Reply
Hemisha 7/03/2012
Thanks its brilliant and it works :)) Keep up the good work! Reply
StatsProfessor 7/13/2012
Not working no matter what method used, not surprised either. Reply
vinod 8/17/2012
Guess the Caps for the Post Doesn't work anymore . and the code for span code should close span not div otherwise template showing error !! Reply
Replies
Admin 8/18/2012
Thanks for telling me, didn't noticed the error. For me it works, try adding the code to the first data:post.body
schnell abnehmen 8/31/2012
very good comment Reply
Cheryl 9/08/2012
My HTML doesn't contain
What can I do?
The following is the only part of my HTML that mentions post-body...
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0;
background: #111111;
border: 1px solid #111111;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 1px;
}
.post-body .tr-caption-container {
color: #134f5c;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
} Reply
wow 9/09/2012
thank's for tutor Reply
Ben Hayward 9/26/2012
Just like to say that your tutorials have helped me a lot. I don't use them all but they've helped me become far more comfortable with coding and blogger in general.
Thanks again. Reply
Replies
Admin 9/27/2012
Thank you too :)
jyothi 12/17/2012
Really Nice Reply
Levis Raju 1/23/2013
Nice one :D Reply
Asma Dinie 2/05/2013
Thank you admin :) Reply
Asar Abbas 2/10/2013
Not Working for me... i had tried it many times.. is three times in my html code Reply
Ahmad Lukman Nulhakim 2/13/2013
Thanks... nice info Reply
SIEVED 2/26/2013
Thank you Reply
Cynthia 3/02/2013
It does not work for me either. Shame,because i would like to add it to my blog. Reply
Rimma Rivera 3/14/2013
I tried this tutorial and it worked for me in a different way! When I previewed the template, the capital letter was present on the post title! What did I do wrong? I just want a capital letter for the post! Thank you Reply
Replies
Admin 3/17/2013
Sorry but it doesn't take effect if your post starts with an image because the code is trying to read the first letter of your text and the html code of your pictures is before it.
blogostrong 4/05/2013
it works on my blog, thanks for the code. Reply
Anonymous 8/26/2013
Brilliant! You are a genius. Reply
Demarco 1/04/2014
did not work for my blog, but thanks anyway Reply
Krishnan 2/27/2014
Thanks Its working Fine Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,784 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
2
Like
So pretty - love to add some coffee filter roses and paint to one of your hats! review about travel cases hat from expert
ReplyDelete