Quote the Codes in Google Blogger

It is a good practice to Quote the codes when writing a blog post in Google Blogger. It is because programming source code and Linux shell command sometimes can be very long. It is better to make the codes can be scrolled horizontally for easier reading.

Google Blogger comes with the "Quote Text" button which allows the writer to quote specific text area. Blog write can customize the style of the quoted text using CSS.

To customize the style of quoted text in Google Blogger using CSS:

1. In Blogger Main Menu, select the Theme button:

 2. In Theme menu, click the Customize button:

3. In Blooger Theme Designer, click the Advanced button:

4. In the Advanced menu, scroll down to the bottom of the second column menu and select the Add CSS button:

5. In the Add custom CSS menu, I added the following CSS codes for my blog:

blockquote {
margin:1em 20px;
background: #ff6666;
padding: 8px 8px 8px 8px;
font-style: bold;
font-family: "Courier New";
white-space: nowrap;
overflow-x: auto;
}

6. Click the Apply to Blog button:

References:
How to Style Up Your Quotes in Blogger
https://www.maketecheasier.com/style-up-quotes-in-blogger/

Change the design of your blog
https://support.google.com/blogger/answer/176245?hl=en

how to scroll text area horizontally?
http://stackoverflow.com/questions/19292559/how-to-scroll-text-area-horizontally