Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger Tutorial » How-to » Use A Drop Cap Large First Letter In Posts On Blogger

Use A Drop Cap Large First Letter In Posts On Blogger

You might seen a drop cap large first letter in some magazines or newspapers paragraph. well, that same effect can be used into blogger posts too. here i gonna share a snippet of CSS code which will make your all post's first letter large automatically. You can see the screenshot below, to know how it look likes in your post paragraph.

As you can see the screenshot above, there is a large first letter with blue color, but you are also enable to change the first latter color as well as font style as you like. so, let's move tho the steps of enabling this effect to your blog.

To make your blog post's first letter large ans stylish, all you have to do is just go to blogger dashboard > Template > Edit HTML > Then search for ]]></b:skin> tag in your blog's HTML.

Next, copy and paste the below code above ]]></b:skin> tag.


p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#0033CC;
font-size:60px;
font-family:Georgia;
}

To change color ans size of font you have to just edit above CSS code and change the value of color and font-size that's it.

If you have any query about the widget you can ask by joining the discuss here to find out the best answers by the admin or community.
Add Comment
Blogger Tutorial How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot
  • Flipper Social Sharing Widget for Blogger
    Flipper Social Sharing Widget for Blogger
  • Add Auto Read More with Thumbnail to Blogger/Blogspot
    Add Auto Read More with Thumbnail to Blogger/Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ▼  February (24)
      • Mashable Style AJAX Navigation Menu Widget for Blo...
      • How to Add Related Posts Widget with Thumbnails to...
      • Color Code Generator for CSS
      • How To Remove Blogger Navbar
      • How to Add Facebook Like/Fan Box To Blogger
      • How to Add Google AdSense Below Post Title in Blogger
      • Recent Comments with Avatar Widget Generator
      • Enable YouTube Video Comments on Blogger
      • Add Floating Social Sharing Buttons Below Blogger ...
      • Remove Subscribe To Posts Atom Feed Links On Blogger
      • Use A Drop Cap Large First Letter In Posts On Blogger
      • Animated Flying Twitter Bird Widget Generator
      • jQuery Slide Out Social Sharing Box Widget Generator
      • Animated Flash Clock Widget Generator
      • Blogger Recent Posts Widget With Thumbnail Generator
      • Google Flag Translate Widget for Blogger
      • Blogger XML Sitemap Generator
      • Recommended Posts Slide out Widget Generator
      • Flash SWF file Embed Code Generator
      • jQuery Pop-up Facebook Like box Widget Generator V1
      • Facebook Invite Friends Button Generator
      • Blogger Meta Tag Generator Tool
      • HTML iFrame Code Generator
      • How to Add Widget or Gadget to Blogger / Blogspot

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates