Wednesday

Pin It

Widgets

3

How to customize blockquote style

  • Wednesday
  • Andy Law
  • Share
  • 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:

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

      .post blockquote p {
      margin: 0; }

      EXAMPLE 2:

      .post blockquote {
      margin: 1em 20px;
      padding-left: 50px;
      background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyJ7KaCHUS1KsWjj0UeD0359PmtfB9-fTMkWq4ZbpGksE1V9kV8wigbCT8kx66iD2FVvQa7TXj8fGg0XMd3Iyn-cVeAYm1aeNDhatFitC7Jfg9ZeTixEs8XOtF1YCQMlE3yjPYo9dKCDN/s1600/Next-icon.png) no-repeat; }

      EXAMPLE 3:

      .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 !


      3 Responses to “How to customize blockquote style”

      Jesus is Lord said...
      2 December 2012 at 07:17

      Hi,
      I really like your tutorial about customizing blockquote on blogger. I have a blog and I was looking for to customized my blockquote so I went to my template and clicked on edith html in order to access the script but I couldn't locate the .postblockquote inside! I'm quite a beginner at this so I could be at the wrong location. Do you have an idea of what I did wrong?
      Thanks in advance,
      Yan


      MJ said...
      2 February 2013 at 07:48

      I cannot find ".post blockquote" in my HTML either. Is there an updated version of this post?


      MJ said...
      2 February 2013 at 08:07

      I finally found it. It's called ]]></, followed by b:skin (it wouldn't let me put them together). Search for that. Also, do these examples work for blockquotes NOT inside posts (i.e. stand alone text)?
      Thanks for the post!


      Post a Comment

      SUBSCRIBE NOW to get the latest posts