How to make blogger custom quotes looks right?


#1

Hi , I try to make my post quotes custom with the examples from this link using this code

.post blockquote { 
  font: italic 1em  "comic sans ms", Tahoma, sans-serif; 
  padding-top: 10px; 
  margin: 5px; 
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left; 
  text-indent: 65px; 
  } 
  .post blockquote div { 
    display: block; 
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right; 
padding-bottom:10px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

The result is that the last bottom right quote is not showing .

How can I make it looks right ? my website is this.


#2

I don’t understand what do you mean by this Sir!


#3

@Nafees If you apply above code you have to see 2 quotes icons ,one on top left and one on botton right. I applied this code and bottom right quote icon is not there.Please check above image also.


#4

OH! Okay Now I understand your problem :sweat:

Use this HTML (Replace it with your blockquote)


<blockquote>
  <div>
Το συνεργείο μας διαθέτει την εμπειρία και τη τεχνογνωσία που χρειάζεται για να κάνει παράλληλα με τη συντήρηση και το λουστράρισμα του ξύλινου πατώματος σας <b>και το βάψιμο του, σε χρώμα και απόχρωση της αρεσκείας σας </b>.<br>Εσείς δεν έχετε παρά&nbsp;να μας υποδείξετε το χρώμα που θέλετε να έχει πλέον το ξύλινο πάτωμα σας.</div></blockquote>

Everytime you use a blockquote enter div tags inside the starting and ending blockquotes.


#5

Or if you want only to use blockquote directly use this css instead of that

.post blockquote p { 
margin: 0; 
padding-top:10px; 
}
.post blockquote {
  font: italic 1em "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left,url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
  text-indent: 65px;
  padding-bottom: 10px;
}

Now you can directly use blockquote without adding that div tag :smiley:


#6

it works ,thanks a lot Nafees for your effort