Ads Top

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

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 apply automatically a Magazine text style on Blogger Posts and Comments. Let's start adding it...

-> Add Drop Caps For Blogger Posts

drop caps, blogger blogspot, tutorials

-> Add Drop Caps For Blogger Comments

drop caps, first letter, blogger

Big First Letter for your Blogger / Blogspot Posts


Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:


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:
]]></b:skin>
Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3. Just above ]]></b:skin>, 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:
<data:post.body/>
Step 5. Then immediately before and after add the red fragments you see in the example below:
 <div class='capital'><data:post.body/></div>
Step 6. Save the changes by clicking on the Save template button.

Important! If the above code is not working, add one of following codes from this example:
<p class="capital"><data:post.body/></p>
Or try this instead:
<span class="capital"><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

Step 1. Log in to your Blogger account > go to Template > 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):
]]></b:skin>
Step 3. Add the following code just above ]]></b:skin>:
.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:
<data:comment.body/>
Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:
<p class="capital"><data:comment.body/></p>
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!

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.