How To Customize Blockquote Style On Blogger With CSS

http://www.allblogthings.com/2014/03/Customize-Blockquote-Style-On-Blogger-Using-CSS.html
This is another article for newbies at blogger. Blockquote is mostly used by technology niche blogs. Thy use it to show some special offer or news to users in a different style. You can use it on blogger blogs too. Here I use Blockquote for showing HTML/JavaScript codes, if you want to use it on your blog then read below article for easy tips on How To Customize Blockquote Style On Blogger With CSS.

How To Customize blockquote Styles with CSS ?

1, Go to blogger.com > Sign in,
2, Select your desired blog > Template ) Edit HTML,
3, Click on any side of coding and press Ctrl + F a search box will appear,
4, Type ]]></b:skin> in search box and press Enter,
5, Now copy below coding and paste it just above ]]></b:skin>
/*www.AllBlogThings.com*/
blockquote {
background: #B9DF11;
margin: 0 9px;
padding: 19px;
color:#333333;
border-radius:12px;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 1.6em;
box-shadow: 3px 3px 8px #e3e3e3;
}
blockquote p {
margin: 0;
}
6, Click on Save Template That's it your blockquotes now have a unique style.
  • Customizations :Replace B9DF11 with your favorite color for Blockquote background. Replace 333333 with your favorite Text color for Blockquote. For changing curve of Blockquote decrease/increase 12px with your choice.
Read Must : Professional 404 Page Error For Blogger

How To Add Blockquote Text In Blogger Blog Post ?

1, Go to blogger.com > Select blog > Create new post,
2, Now type any lines for blockquote style > Select that text with mouse cursor,
3, Then click on Blockquote icon as shown in below image

How To Customize Blockquote Style On Blogger With CSS

4, Publish your post now.

Last Words On Customizing Blockquote in Blogger

So friends and bloggers I thinks above article was explained all tips and methods to add and customize blockquote on your blogger blogs. If you want more stylish Blockquote box then leave comment or if you have any suggestion then let me know via comments form below.
Use sharing buttons below!

Previous Post
Next Post

4 comments:

  1. Replies
    1. Thanks! Keep visiting for more nicer tutorials. Peace!

      Delete
  2. UMER pyhly website xyada neat and clean the :/

    ReplyDelete
    Replies
    1. Then you can suggest us anything that you want in new design ?

      Delete

It's free and takes only a minute to comment and show your love for this article, even if you want anything to be changed here or created as a blog post. You can suggest by commenting below.