Electronza
  • Homepage
  • Privacy
    • Privacy Policy
  • Contact
Electronza
  • Homepage
  • Privacy
    • Privacy Policy
  • Contact
Electronza
You are at:Home»Blogger / Blogspot»A pretty text box for Blogger posts

A pretty text box for Blogger posts

0
By Electronza on January 15, 2023 Blogger / Blogspot

In this article I will show you how to create a beautiful text box.

To do this you will need to add the following code in the theme settings, under Custom CSS:

.nice_textbox {
   padding: 0px 10px 0px 10px;
   border-left: 4px solid black;
   font-style: italic;
}

Then, in blog posts, you can use the following syntax to create text boxes:

<div class="nice_textbox"><p>This is a nice textbox</p></div>

to achieve this result

This is a nice textbox

If you need to add such a text box to the current blog post only, then you can edit the HTML code of the blog post and add the following lines, without modifying the custom theme CSS:

<style>
.nice_textbox {
padding: 0px 10px 0px 10px;
border-left: 4px solid black;
font-style: italic;
}
</style>

This is a variation of the above CSS code I use for the photo credits at the end of some blog posts:

<style>
.photo-credit {
padding: 0px 10px 0px 10px;
border-left: 3px solid #0076a1;
font-style: italic;
font-size: 80%;
}
</style> 

In blog posts, you can use the following syntax :

<div class="photo-credit"><p>Photo credit by...</p></div>

The result looks like this:

Photo by Teng Yuhong on Unsplash

Blogger CSS
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email

Related Posts

Cleaning unused images from blogs hosted on Blogger

A gradient divider with CSS

Prettifying preformatted text

Leave A Reply Cancel Reply

Latest posts
January 15, 2023

A pretty text box for Blogger posts

January 15, 2023

New blog section: beginners’ corner

January 15, 2023

Cleaning unused images from blogs hosted on Blogger

Categories
  • Beginners' corner
  • Electronics projects
    • ESP8266
    • Arduino projects
    • IoT
    • 8-bit PIC projects
    • Raspberry PI
    • PIC32 projects
    • Robots
  • Arduino libraries
  • Reviews
    • Tools & equipment
    • Development boards
    • IoT
    • Industrial Arduino
  • Blogger / Blogspot
  • Tutorials
  • Casual stuff
Popular posts
Arduino Uno 4-20mA communication using 4-20mA R click and 4-20mA T click boards from MikroElektronika: MIKROE-1296, MIKROE-1387, Uno Click Shield
August 17, 2016

4-20mA current loop Arduino tutorial Part I: hardware

ESP8266 Thing Dev from Sparkfun
May 15, 2019

ESP8266 – running on battery power

ECG click on Arduino Uno
December 5, 2016

ECG click: Arduino IDE code examples

Working DMX project
July 2, 2015

Arduino DMX master using RS485 click board

Arduino: DMX master and slave
November 2, 2015

Arduino: DMX Master and Slave

Copyright © 2023 Teodor Costachioiu

Type above and press Enter to search. Press Esc to cancel.