Stylish New CSS Blockquote With Author Section For Blogger Blogs




| 12 comments

The standard Blockquote on Blogger is very boring, just a slightly shaded background in most cases.Also many bloggers don't use blockquotes which is a shame as they can be an eye catching feature in your posts.Blockquotes can be stylish and informative when used correctly and styled as you might see in newspapers and magazines.

So when recently working on a blog the owner wanted the blockquote to be a real feature.They used a lot of quotes in posts and wanted these quotes to stand out.Using just some simple CSS I styled a blockquote that readers would love and I will share it with you in this post.

OK so this style places the quote within a box with the text large and colored, we use quotation marks at the top and bottom and finally you can add the quote authors name if required.You can see a screenshot of the blockquote or check out a Live Demo Here.


Add Stylish CSS Blockquote To Blogger


OK first we have to add the CSS as shown in the steps below.

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

/* CSS Style Blockquote By Spice Up Your Blog */

blockquote {
color:rgb(255,150,100);
font-family:georgia, serif;
font-size:32px;
line-height:1.2;
text-align:center;
padding:24px 60px;
margin:0 120px;
margin-bottom:18px;
border:solid 1px rgb(220,220,220);
position:relative;
}

blockquote:before,
blockquote:after {
position:absolute;
width:48px;
height:48px;
content:".";
font-size:0;
}

blockquote:before {
background-image:url('http://i.imgur.com/uoHCjSK.png');
top:0;
left:0;
}

blockquote:after {
background-image:url('http://i.imgur.com/m3HnqqU.png');
bottom:0;
right:0;
}

.author {
display:block;
text-align:right;
font-size:18px;
padding:4px;
color:rgb(150,150,150);
font-style:italic;
}

Note : You can of course change the colors to suit your blog.

Now when writing your posts and you want to use this blockquote you can use the blockquote button but this wont allow you add the author part.So in HTML mode of the post editor add this to your post :

<blockquote>
There are no strangers here, only friends that have not yet met.
<span class="author">~ William Butler Yeats</span>
</blockquote>

Note : You can see the quote is highlighted in yellow and the author in green, simply change these to your quote and author.

That's it I will look to share some more cool blockquotes with you in the future, if you have any requests for blockquote styles let us know in the comments.Make sure to check out some more of our Blogger Tutorials.

Drop your comments and questions below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

12 comments:

  1. Thanks for this wonderful tip; I was in search of it because on my blog I have to place several quotes and sayings with my contents to optimize it. Once again thanks a lot

    ReplyDelete
  2. Thanks for this great article. i searched same thing on google but nothing helpful found. You really rocks. keep blogging

    ReplyDelete
  3. Thanks a lot!Very beautiful!!

    ReplyDelete
  4. OK. I'm going to try this. I missed classes when we went over CSS. Thanks.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. I wanna place this beautiful blockquote today at my site. Thanks!.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us