How To Add Blockquote Blogger

If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.


Insert CSS Style Sheet in Blogger Template:


First we will insert the CSS style Sheet to stylize our quote box.
  • Go to Blogger >> Your Blog >> Template >> EDIT HTML >> Proceed 
  • And now Search For ]]></b:skin> With (CTRL+F)
  • After you find ]]></b:skin> just above it paste the following coding
.post blockquote {
  • background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0wJdQkF6nMmDhXcpvxvdxSopAk4cqp3ZEjxsklqaeONNJpYiKDJrhkYMSaWT040nY4dh-N-dk1l118LktsSodhUE-PSgkiKsSYiD7mpLZY99PXUHlHmxLfq4RvkVwPmcFlBz8uYiZuk4/s1600/1.png);
  • background-position:top left;
  • background-repeat:repeat-y;
  • margin: 0 20px;
  • padding: 10px 20px 10px 45px;
  • border-top: 2px solid #DDD;
  • border-right: 5px solid #666;
  • border-left: 2px solid #DDD;
  • border-bottom: 5px solid #666;
  • font-size: 0.9em;
  • }
  • .post blockquote p {
  • margin: 0;
  • padding: 0 0 15px;
  • }
  • .blockquote {
  • font: 18px normal  sans-serif,Tahoma;
  • padding-top: 10px;
  • margin: 5px;
  • text-indent: 65px;
  • }
  • .blockquote div {
  • display: block;
  • padding-bottom:10px;
  • }
  • .blockquote p {
  • margin: 0;
  • padding-top:10px;
  • }

  • Now After pasting the above code save your template by pressing Save Template Button

  • Publish your Post.

Thankx For Visit Geo Png
Previous
Next Post »

Note: Please do not Spam Comments will be Deleted immediatley upon review.
if You Like This Post Kindly Share with Your Friends
Anyone Comment Me ConversionConversion EmoticonEmoticon