SEO Tips and all things Blogging

How to customize blockquote style

H

In this tutorial, I will show you how to customize blockquote style in blogger. I will do all of these changes in CSS style. By using CSS, we can change the look of the blockquote such as changing margin, background, colour, padding, etc..So, you just need to follow the steps below:

  1. Go to Layout >> Template >> Download full template >> Click on Expand Widget Template
  2. Press Ctrl + F, search for ” .post blockquote “, you will see something like this:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

If you use custom template, and cannot find it, search for ” .entry blockquote ” ; it looks very similar with the codes above.

  • I have a few examples, so just replace the codes in Step 2 with the code in each example
    1. EXAMPLE 1:

      blockquote style

      .post blockquote {
      margin: 1em 3em;
      padding: .5em 1em;
      border-left: 5px solid #fce27c;
      background-color: #f6ebc1; }

      .post blockquote p {
      margin: 0; }

      EXAMPLE 2:
      blockquote style

      .post blockquote {
      margin: 1em 20px;
      padding-left: 50px;
      background: transparent url(http://4.bp.blogspot.com/-pzuEwVDNsKk/TiZTQSKJgFI/AAAAAAAAAOE/1jAHsTKqmho/s1600/Next-icon.png) no-repeat; }

      EXAMPLE 3:
      blockquote style

      .post blockquote {
      margin: 1em 2em;
      border-left: 1px dashed #999;
      padding-left: 1em; }

      .post blockquote p:first-letter {
      float: left;
      margin: .2em .3em .1em 0;
      font-family: “Monotype Corsiva”, “Apple Chancery”, fantasy;
      font-size: 220%;
      font-weight: bold; }

      .post blockquote p:first-line {
      font-variant: small-caps; }

      EXAMPLE 4:

      .post blockquote {
      background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
      background-repeat:no-repeat;
      background-position:top center;
      margin: 6px 6px 6px 6px;
      padding: 8px 36px 8px 40px;
      font-size: 14px;
      line-height:1.4em;
      }

      4. Click SAVE and check result. If you don’t know how to add a blockquote to your post you can see How to make a blockquote

      Enjoy !

      Add comment

      By domdom rung
      SEO Tips and all things Blogging

      Subscribe to Blog via Email

      Enter your email address to subscribe to this blog and receive notifications of new posts by email.

      Categories

      Recent Posts

      Recent Comments

      Archives