Tuesday, 11 February 2014

Professional 'CSS Blockquote' For Your Blogger Posts

Blogger Blockquote

Designing your blog post is the first thing you have to do in order to search engine optimization many people who have tutorials related blogs often posts coding but it looks dirty when it is not in border or a box so today i will tell you how to make a Professional 'CSS Blockquote' For Your Blogger Posts that will give your coding a clean look it will also make your readership strong so follow the steps to install this in blogger.

Steps To Install The Blockquote

  • First Save The Following Picture & Edit it in Photoshop or Other Software add Your Logo or website in the image so it will show it is your property.

  • Now Upload it Somewhere and Take The URL of Image We Will Use it in The Tutorial
  • Now Go to Blogger.com
  • Head over to Template & Here Click Edit HTML
  • Now Find .post blockquote and delete the whole CSS code of .post blockquote To starting & Closing Tag (i.e },{)
  • If You Can't Find The Code Simply Go to ]]></b:skin> and just above it paste the following code:

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; }.post blockquote p { margin: 0; padding-top:10px; }
  • After Placing the code replace the highlighted URL with the image URL you uploaded before.
  • Now Save The Work & You Successfully Added The Blockquote


You have Now a Professional CSS Blockquote that will give your coding and other info a neat & clean Look if you have any problem in implementing the code or other queries ask in the comments below & Dont forget to share this article with Backlink.

No comments:

Post a Comment