How To Utilisation Drib Caps (Big Kickoff Letters) Inwards Blogger/Blogspot

Here's roughly other means to customize your Blog. In this case, your Posts in addition to Comment's commencement letter. The resultant is a large commencement missive of the alphabet stretching downwardly 3 or 4 lines amongst the text wrapped around. The drib cap missive of the alphabet tin also move a dissimilar font in addition to convey a dissimilar color from the residuum of the text. This means tin last oft seen inwards newspapers, literature, magazines. So, inwards this tutorial I volition exhibit you lot how to utilise automatically a Magazine text means on Blogger Posts in addition to 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, larn to Template in addition to click on the Edit HTML button:

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the Blogger' search box. Type this slice of code within the search box hence hitting Enter to detect it:

]]></b:skin>

Note: you lot powerfulness ask to click on the arrow side yesteryear side to it to expand the code within in addition to hence you lot ask to search ]]></b:skin> one to a greater extent than time.

Step 3. Just higher upward ]]></b:skin>, add together the next 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 - modify the value inwards bluish amongst the hex of your color
Size - to modify the missive of the alphabet size, increase/decrease the value highlighted inwards pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then at 1 time earlier in addition to afterwards add together the reddish fragments you lot run across inwards the illustration below:

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

Step 6. Save the changes yesteryear clicking on the Save template button.

Important! If the higher upward code is non working, add together 1 of next codes from this example:

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

Or endeavour this instead:

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

Step 1. Log inwards to your Blogger describe organization human relationship > larn to Template > Edit HTML > click anywhere within the code expanse in addition to press CTRL + F keys to opened upward the search box

Step 2. Type the next slice of code within the search box in addition to hitting Enter to detect it (if you lot convey already added this code, skip stride two & 3):

]]></b:skin>

Step 3. Add the next code simply 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 modify the missive of the alphabet color, supervene upon the value inwards bluish amongst the value of your color. Here's a tool that powerfulness aid you lot to detect the hex of the color that you lot need: Color Code Generator
Size - to modify the missive of the alphabet size, modify the value inwards pink.

Step 4. Then Search for this slice of code:

<data:comment.body/>

Step 5. Add the reddish codes earlier in addition to afterwards <data:comment.body/> every bit you lot tin run across inwards my illustration below:

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

Step 6. Save your Template.

That's it! Now you lot convey a cool drib cap commencement missive of the alphabet on your blog. If you lot convey whatever question, move out a comment below!