March 22, 2020

Textual description of firstImageUrl

How To Add Vertical Line Blockquote For Blogger

|
Let me show you how to add vertical line blockquote for Blogger, just like the one as seen in WordPress sites.

It is very easy and you can do it right away with your Blogger/ Blogspot sites.

You don't have to search for any code from the HTML template.

All you need to do is just add a set of CSS code.

how to add vertical line blockquote for Blogger

This is an example of what I mean by a vertical line blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu lacus, maximus rutrum sagittis quis, sollicitudin ut eros. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris luctus neque non risus congue, nec posuere quam cursus. Praesent dignissim massa et nibh dictum, in hendrerit justo placerat. Nunc sodales convallis feugiat.

You can customize the font-type, font-size, the vertical line thickness and its color.

So, are you interested in customizing your Blogger blockquote layout?

Then, let's do it.

How To Add Vertical Line Blockquote For Blogger


This is what you do:

1. Log in to Blogger account.

2. Click on "Theme".

3. Next click on the "Customize" button.

4. Click on "Advanced".

5. Pull the slider down, until you see "Add CSS".

6. Click on "Add CSS".

7. Now paste this set of CSS code in the box provided.

blockquote { font: 14px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 4px solid #ff5606;}
8. Now click on "Apply to Blog" button at the top right hand corner of the page.

9. That's all.

Note: As I have mentioned above, you can customize the font and the vertical line.

To change the font size, change the 14px to other size of your preference.

To change the font-type, replace 'normal helvetica, sans-serif'.

To change the vertical line thickness, change 'border-left: 4px' to other size of your choice.

To change the vertical line color, replace 'solid #ff5606' to other html color code.

I hope this simple on how to add vertical line blockquote for Blogger is helpful to you.