As like me, I reckon you are hungry to style up your blogger blog. However, I searched a lot about getting a good block-quote style for my blog; finally, I have got what I have desired for. Here in this Tutorial, I will discuss, and show you how to style block-quotes of your blogger blog. Basically, I will show you 3 things.
Making your own block-quote style:
Well, this process is not complicated as you may think about it. It's quite simple and easy. All you have to do is just changing the codes as you like it and using your desired image (if you want). To style with image, I will use the 1st quote style I have offered you. Look at the following codes,
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm6k7Dh1smIa9VzTdL-3dkxCGbT2IY_tFE-eceG9slwe9TdryG71kR70tcKP8mH5iknW4bzU3ZCq8SwcDHmRuZgEpp5x7HrAVFHaHM8V7HK1l1z6G87JKPssZyppyWNAMCIZcQedXsks/s1600/blockquote.gif);
background-position:top left;
background-repeat:repeat-y;
which are inside the 1st blockquote style. The url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm6k7Dh1smIa9VzTdL-3dkxCGbT2IY_tFE-eceG9slwe9TdryG71kR70tcKP8mH5iknW4bzU3ZCq8SwcDHmRuZgEpp5x7HrAVFHaHM8V7HK1l1z6G87JKPssZyppyWNAMCIZcQedXsks/s1600/blockquote.gif) is referring to the image which is used at the left side of this block-quote. You can change this url with your own image url, if you have an image to show at the left of your block-quote. Other than the image, the styling of other things in blockquote with or without image are the same. So, read more at below.
What if you don't want images? Just kick the 3 lines code above. Now at the block-quotes codes, all the 6 digit codes after "#" tags are referring to colors. So, you can chage the colors of everything as you like. Just get the color's HTML code and replace it with the existing HTML color code. More on, 1px after border codes are referring to the thickness of the borders; you're completely free to increase or decrease it.
Liked someone's block-quote style? Why don't you grab it! ;)
Easy game. Liked someone's block-quote? To grab this block-quote style and integrate it into your blog follow the process below. [ Unfortunately, not always you'll get the exact replica, but I assure you that it'll be somewhat similar and rarely dissimilar when you understand the codes well.]
- Getting a simple block-quote style for your blog.
- Making your own block-quote style.
- Liked someone's block-quote style? Why don't you grab it! ;)
Getting a simple block-quote style for your blog:
I have only one block-quote style for you. However, to make this block-quote style your own, all you have to do is: to Copy the codes inside the below block-quote style, and Paste them just before your ]]></b:skin> code (Which is in your Edit HTML page, just go to Design >> Edit HTML).
A simple block-quote style with image:
YET AGAIN, Copy the code and paste it before ]]></b:skin> code of your blogger Edit HTML page; then click on Save Template.
.post blockquote {
font: 12px/18px normal "Courier New", sans-serif;
text-indent: 23px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
background: #F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm6k7Dh1smIa9VzTdL-3dkxCGbT2IY_tFE-eceG9slwe9TdryG71kR70tcKP8mH5iknW4bzU3ZCq8SwcDHmRuZgEpp5x7HrAVFHaHM8V7HK1l1z6G87JKPssZyppyWNAMCIZcQedXsks/s1600/blockquote.gif);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 10px 10px 35px;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.post blockquote p {
margin:.75em 0;
}
Making your own block-quote style:
Well, this process is not complicated as you may think about it. It's quite simple and easy. All you have to do is just changing the codes as you like it and using your desired image (if you want). To style with image, I will use the 1st quote style I have offered you. Look at the following codes,
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm6k7Dh1smIa9VzTdL-3dkxCGbT2IY_tFE-eceG9slwe9TdryG71kR70tcKP8mH5iknW4bzU3ZCq8SwcDHmRuZgEpp5x7HrAVFHaHM8V7HK1l1z6G87JKPssZyppyWNAMCIZcQedXsks/s1600/blockquote.gif);
background-position:top left;
background-repeat:repeat-y;
which are inside the 1st blockquote style. The url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXm6k7Dh1smIa9VzTdL-3dkxCGbT2IY_tFE-eceG9slwe9TdryG71kR70tcKP8mH5iknW4bzU3ZCq8SwcDHmRuZgEpp5x7HrAVFHaHM8V7HK1l1z6G87JKPssZyppyWNAMCIZcQedXsks/s1600/blockquote.gif) is referring to the image which is used at the left side of this block-quote. You can change this url with your own image url, if you have an image to show at the left of your block-quote. Other than the image, the styling of other things in blockquote with or without image are the same. So, read more at below.
What if you don't want images? Just kick the 3 lines code above. Now at the block-quotes codes, all the 6 digit codes after "#" tags are referring to colors. So, you can chage the colors of everything as you like. Just get the color's HTML code and replace it with the existing HTML color code. More on, 1px after border codes are referring to the thickness of the borders; you're completely free to increase or decrease it.
Liked someone's block-quote style? Why don't you grab it! ;)
Easy game. Liked someone's block-quote? To grab this block-quote style and integrate it into your blog follow the process below. [ Unfortunately, not always you'll get the exact replica, but I assure you that it'll be somewhat similar and rarely dissimilar when you understand the codes well.]
- Go to the page where you have seen the block-quote style.
- Click on the right button of your mouse, and click on View Page Source.
- Now press Ctrl+F, and search for blockquote.
- Copy the blockquote codes from opening second bracket "{" to ending second bracket "}". Then, taste them with your test blog. [mostly effective for blogspot blog's quote styles]
I assume, you have it now. ;) Enjoy!