How to Add a Lines, Table, Text Frame, Floating text and Pattens to Blogger Blogspot Post

How To Create a Vertical Line

Text Content

<div style="border-left: 4px solid red; border-radius: 3px; clear: right; float: right; font-style: italic; margin-bottom: 5px; margin-left: 20px; padding-left: 15px; width: 250px;">
<i class="fa fa-quote-left" style="font-size: 24px; font-style: italic; color:gray; margin-right: 5px;"></i> Text Content
</div>

<div style="border-left: 4px solid red; border-radius: 3px; clear: left; float: left; font-style: italic; margin-bottom: 5px; margin-right: 20px; padding-left: 15px; width: 250px;">
<i class="fa fa-quote-left" style="font-size: 24px; font-style: italic; color:gray; margin-right: 5px;"></i> Text Content
</div>

TEXT CONTENT

<table align="center" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 0px; margin-right: 0px; width: 100%;"><tbody>
<tr> <td style="background-color: #fcd092; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #ffe0b4; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #fff59e; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #e1efa0; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #b1daef; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #1852e6; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
<tr> <td style="background-color: #b530ce; padding: 10px; text-align: justify; width: 100%;"><span style="color: auto; margin-left: 10px; margin-right: 10px;">TEXT CONTENT</span></td> </tr>
</tbody> </table>

How to Add a Horizontal Line (Rule) to Blogger Blogspot Post

Another option that the latest visual Blogger's post editor is lacking is the "Insert horizontal line" option (this option is available in the Google Sites's visual editor of the page content).

A horizontal line (or, horizontal rule) is a line which can be

with different length (or width),
aligned on the left, at the center, or on the right,
with different thickens (or size),
with different color,
solid, dashed, dotted etc.

Mainly, it is used as a section divider.

To add a horizontal line in a Blogger Blogspot post, you have to write an appropriate code through the HTML editor. Below are some HTML code examples for horizontal line.

Note #1: The visual result may slightly differ in different browsers (the page was tested in IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5 installed on Windows Vista SP2).

Adding Horizontal Line with the HTML <hr> Tag

1. The Basic <hr> Tag

The code:

<hr>

The visual result:

2. Additional Attributes for the <hr> Tag

The code for a horizontal line with added attributes is

<hr align="center" color="green" size="2" width="80%">

The align attribute should be added to the code if the width of the horizontal line is less than the text width. Values for this attribute are: left, center or right.
The width attribute should be added to the code if you want a horizontal line with a width is less than the text width. Values for this attribute can be expressed in pixels (e.g. 200px - you can skip the "px" after the number) or in percent (e.g. 50%).
The color attribute should be added to the code if you want a colored horizontal line. Values for this attribute can be express as a color name (e.g. red green, blue, orange - for additional HTML color names check any of these links: link 1, link 2, link 3, link 4) or the color's hex code (we recommend the Multitoolbox's Color picker and this simple "hex to rgb" and "rgb to hex" code converter)
The size attribute should be added to the code if you want a thicker horizontal line. Values for this attribute are 1, 2, 3, etc.

Note #2: The tag <hr> is the same as <hr align="center" size="2" width="100%"> and in most browsers the visual result is a horizontal line with shade. For larger sizes, the horizontal line looks more like a rectangular frame, but once you add the color attribute it turns to a fully colored line (in Firefox with rounded corners - visible when the size is larger).

Here are some examples:

Example #1

The code:

<hr align="right" color="orange" size="3" width="500">

The visual result:

Example #2

The code:

<hr align="center" color="#ff1100" size="5" width="60%">

The visual result:

Example #3

The code:

<hr size="5">

The visual result:

Example #4

The code:

<hr size="5" color="#999999">

The visual result:

Example #5

The code:

<hr color="green" width="45%">

The visual result:

Adding Horizontal Line with the HTML <div> Tag

The horizontal lines can be styled by adding appropriate CSS properties, but the ones I've tested did not produce the result I've expected in all of the five browsers (IE9, Mozilla Firefox 12.0, Chrome, Opera 11.62 and Safari 5.1.5), especially when I wanted to insert dotted or dashed horizontal line. If you still want to try this type of styling check these links: link 5, link 6 or link 7.

1. Adding left aligned horizontal line

Example #6: Full width horizontal line

The code

An example of a dashed horizontal line
<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>
The first line of text after the horizontal line

The visual result:

An example of a dashed horizontal line

The first line of text after the horizontal line

Note #3: The above code adds a full width, colored (#DB1200), dashed, 2px thick horizontal line. If you use this code for adding horizontal line, or any from the following examples, and you want to switch from the HTML to the visual Blogger Blogspot post editor right after entering the code, make shore that , before that you add some text instead of the line "The first line of text after the horizontal line" before switching. I don't know why, but when I inserted only "<div style="border-top: 2px dashed #DB1200; margin-top: 1em; padding-top: 1em;"> </div>" and switched to the visual editor, the above horizontal line start appearing every time I hit the enter button.

Note #4: The dashed attribute, also known as a CSS border-style property, has the following alternatives: dotted, solid, double, groove and ridge. Here are the results of the above code after changing only the dashed attribute (for the last three attributes the line thickness is set to 6px):

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line

An example of a ridge horizontal line

The first line of text after the horizontal line

Example #7: Horizontal line with predefined width

A left aligned horizontal line with width smaller than the text width can be inserted similarly. You only need to add the width attribute (pixels or percentage) to the code in Example #6, that is

The code

An example of a dashed horizontal line
<div style="border-top: 2px dashed #0B5394; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
The first line of text after the horizontal line

The visual result for the horizontal lines from Example #6 with the width attribute added and color changed to #0B5394:

An example of a dashed horizontal line

The first line of text after the horizontal line

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line

An example of a ridge horizontal line

The first line of text after the horizontal line

2. Adding centered or right aligned horizontal line

To add a horizontal line which is centered or right aligned (this makes sense if the line width is smaller than the text width) with the <div> tag, I got the desired result by using another <div> tag "around" the <div> tag in the code from the Example #7 as follows:

The code for centered horizontal line

An example of a dashed horizontal line
<div align="center">
<div style="border-top: 2px dashed #38761D; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line

The visual result for the centered horizontal lines from Example #7 with color changed to #38761D:

An example of a dashed horizontal line

The first line of text after the horizontal line

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line

An example of a ridge horizontal line

The first line of text after the horizontal line

The code for right aligned horizontal line

An example of a dashed horizontal line
<div align="center">
<div style="border-top: 2px dashed #C27BA0; margin-top: 1em; padding-top: 1em; width: 400px"> </div>
</div>
The first line of text after the horizontal line

The visual result for the right aligned horizontal lines from Example #7 with color changed to #C27BA0:

An example of a dashed horizontal line

The first line of text after the horizontal line

An example of a dotted horizontal line

The first line of text after the horizontal line

An example of a solid horizontal line

The first line of text after the horizontal line

An example of a double horizontal line

The first line of text after the horizontal line

An example of a groove horizontal line

The first line of text after the horizontal line

An example of a ridge horizontal line

The first line of text after the horizontal line

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 1)

The latest visual Blogger's post editor is still lacking the "Insert Table" option. Adding this option (for example, like the one available in the Google Sites's editor of the page content) would be quite useful for the users, especially those how are unfamiliar with HTML coding. Until this option is added (if ever), the only way to insert a table in a Blogger post is trough the HTML Editor. But, writing manually an appropriate HTML code for a table, can be a tedious, time consuming task, even for simple tables like these:

Tables with borders

1x4 table

7x1 table

3x4 table

Tables without borders

1x4 table					6x1 table


3x4 table

Using Tables for Arranging Images

Adding two or more images in a Blogger post that are nicely aligned, using only the "Insert Image" option, can be quite frustrating. The solution is: create an appropriate table which will serve as a placeholder for those images.

First of all, make sure that the outer width the of desired arrangement will not exceed the width of the post text (as in Figure 1).

post text width
	outer width of the arrangement
	image 1		image 6	image 8
	image 1
	image 2	image 3
	image 4	image 5	image 7
Figure 1

If the outer width of the arrangement approximately equals the post text width, which is the same for every post, or if you don't mind if the whole group of images is aligned at left, then you may skip the Step 1.

Step #1: Adding the initial code in the HTML editor in the Blogger's post editor

If the outer width of the arrangement is less then the post text width, then it would be nice if the whole group of images is centered. Open the HTML editor, add a few empty lines below the text where you what to place the a group of images and, copy and paste the following code:

<table style="text-align: center; width: 99%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">
INNER TABLE
<br>
</td>
</tr>
</tbody>
</table>

The visible result after Step #1:

INNER TABLE

Tip #1: Replace, if necessary

the value 99 in 99% with a smaller one (or replace 99% with, for example, 500px, 650px - the values expressed in % do not function well in some browsers); for the basic example that follows, this value is 90%
the value 0 in border="0" with 1, 2 or more if you want a visible outer border for the whole group of images
top with middle or bottom

Step #2: Generating the code for the INNER TABLE

The Basic Example

Here is a group of six images, all with same width and height, arranged in 2 rows and 3 columns.

Note: Each image is placed in cell of a table with 2 rows and 3 columns. A tiny, light-grey colored border with a shadow should be visible around every image in the above group. But these borders are not borders of any of the used tables. They are automatically added around every image in all off the posts in this blog. If you are using a Blogger template, go to: Blogger's Template Designer >> Advanced >> Images to see these settings.

In this step, still working in the HTML editor, the text INNER TABLE was replaced with the following code:

<table style="text-align: center; margin-left: auto; margin-right: auto;">
<tr>
<td>IMAGE 1</td>
<td>IMAGE 2</td>
<td>IMAGE 3</td>
</tr>
<tr>
<td>IMAGE 4</td>
<td>IMAGE 5</td>
<td>IMAGE 6</td>
</tr>
</table>

The visible result after Step #2:

IMAGE1	IMAGE2	IMAGE3
IMAGE4	IMAGE5	IMAGE6

The above code, with the exception of description style="text-align: center; margin-left: auto; margin-right: auto;" , was generated with one of the simplest online HTML code generators: Multitoolbox's Table generator and editor.

Of course, instead IMAGE1, IMAGE2, etc, you can enter any text.

Step #3: Adding the images

The Basic Example - continued

Now, working inside the visual editor or inside the HTML editor, select IMAGE1 and click on the "Insert Image" icon to add the image that you want to appear instead of IMAGE1. Repeat this for IMAGE2, IMAGE3, etc. If you haven't used this option before, follow this elementary tutorial.

Other simple online HTML table code generators

Here is an example of a group of four images arranged in one row.

The Code for INNER TABLE:

<table>
<tr>
<td>IMAGE1</td>
<td>IMAGE2</td>
<td>IMAGE3</td>
<td>IMAGE4</td>
</tr>
</table>

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 2)

Tables with colored cells

All of the suggested online HTML table code generators in the last post can generate only simple tables. Those that have the option for generating tables with colored cells, can produce an HTML code for a table with all of it's cell colored with the same color.

For creating tables like these two, there is another free online HTML generator which, among many other options, can be used for generating HTML code for tables like these two.

Table with header row
List A	List B	List C	List D
Item A1	Item B1	Item C1	Item D1
Item A2	Item B2	Item C2	Item D2
Item A3	Item B3	Item C3	Item D3
Item A4	Item B4	Item C4	Item D4

COLOR TONE	LIGHTER SHADES	DARKER SHADES
#F11F0D	#F5665A	#b71709
#FB8518	#FCA758	#DC7515
#EDD711	#EFDD37	#D0BD0E
#88EA14	#B2F168	#5C9F0D
#1BE3B3	#6DEDCE	#13A380
#1852E6	#7497F0	#10379C
#B530CE	#C969DB	#822294

<table border="0" cellpadding="3" cellspacing="3" style="height: 289px; margin-left: auto; margin-right: auto; text-align: left; width: 390px;"><tbody>
<tr> <td style="background-color: #333333; color: white; text-align: center; width: 111px;"><b>COLOR</b>
<b>TONE</b></td> <td style="background-color: #666666; color: white; text-align: center; width: 111px;"><b>LIGHTER SHADES</b></td> <td style="background-color: black; color: white; text-align: center; width: 111px;"><b>DARKER SHADES</b></td> </tr>
<tr> <td style="background-color: #f11f0d; height: 30px; text-align: center; width: 111px;"><span style="color: white;">#F11F0D</span></td> <td style="background-color: #f5665a; height: 30px; text-align: center; width: 111px;"><span style="color: white;">#F5665A</span></td> <td style="background-color: #b71709; height: 30px; text-align: center; width: 111px;"><span style="color: white;">#b71709</span> </td> </tr>
<tr> <td style="background-color: #fb8518; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#FB8518</span></td> <td style="background-color: #fca758; text-align: center; width: 111px;"><span style="color: white;">#FCA758</span> </td> <td style="background-color: #dc7515; text-align: center; width: 111px;"> <span style="color: white;">#DC7515</span></td> </tr>
<tr> <td style="background-color: #edd711; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#EDD711</span></td> <td style="background-color: #efdd37; text-align: center; width: 111px;"> <span style="color: white;">#EFDD37</span></td> <td style="background-color: #d0bd0e; text-align: center; width: 111px;"><span style="color: white;"> #D0BD0E</span></td> </tr>
<tr> <td style="background-color: #88ea14; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#88EA14</span></td> <td style="background-color: #b2f168; text-align: center; width: 111px;"><span style="color: white;">#B2F168</span> </td> <td style="background-color: #5c9f0d; text-align: center; width: 111px;"><span style="color: white;">#5C9F0D </span></td> </tr>
<tr> <td style="background-color: #1be3b3; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#1BE3B3</span></td> <td style="background-color: #6dedce; text-align: center; width: 111px;"> <span style="color: white;">#6DEDCE</span></td> <td style="background-color: #13a380; text-align: center; width: 111px;"><span style="color: white;">#13A380 </span></td> </tr>
<tr> <td style="background-color: #1852e6; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#1852E6</span></td> <td style="background-color: #7497f0; text-align: center; width: 111px;"> <span style="color: white;">#7497F0</span></td> <td style="background-color: #10379c; text-align: center; width: 111px;"><span style="color: white;"> #10379C</span></td> </tr>
<tr> <td style="background-color: #b530ce; height: 30px; text-align: center; width: 111px;"> <span style="color: white;">#B530CE</span></td> <td style="background-color: #c969db; text-align: center; width: 111px;"> <span style="color: white;">#C969DB</span></td> <td style="background-color: #822294; text-align: center; width: 111px;"><span style="color: white;"> #822294</span></td> </tr>
</tbody> </table>

It's the Multitoolbox's WYSIWYG editor (WYSIWYG = What You See Is What You Get).

All the table editing buttons will become active after you've created a table and positioned the cursor inside any cell.

Explore the rest this editor capabilities. You will be pleasantly surprised.

How to Add Text Frames and Borders to Blogger Blogspot Post

<div align="center">
<div style="background: #efefef; border-radius: 4px; border: solid 1px #ccc; box-shadow: inset 0 0 25px #246476; margin: 10px 0; padding: 35px; text-align: justify; width: 540px;">
Text content</div>
</div>

<div align="center">
<div style="background: #efefef; border-radius: 4px; border: solid 1px #ccc; box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px; margin: 10px 0; padding: 35px; text-align: justify; width: 540px;">
Text content</div>
</div>

<div align="center">
<div style="background: #efefef; border-radius:20px 120px 120px 20px; border: solid 1px #ccc; box-shadow: inset 0 0 25px #246476; margin: 10px 0; padding: 35px; text-align: justify; width: 540px;">
Text content</div>
</div>

<div align="center">
<div style="background: #efefef; border-radius:20px 20px 0 0; border: solid 1px #ccc; box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px; margin: 10px 0; padding: 35px; text-align: justify; width: 540px;">
Text content</div>
</div>

Have you ever wanted to add a simple frame or border around some text in your Blogger Blogspot post like the ones below?

Text inside solid border/frame.

Text inside dashed border/frame.

Text inside dotted border/frame.

Text inside groove border/frame.

Text inside ridge border/frame.

Text inside double border/frame.

Text inside inset border/frame.

Text inside outset border/frame.

Text inside solid border/frame and colored background.

Text inside border/frame with differently colored borders.

Text inside border/frame with rounded borders (not supported in IE).

Note #1: For each of the examples that follow copy the code in the Blogger's HTML editor after the text where you want the border/frame to appear. Return to visual Blogger's post editor to edit as you like (font, font size, color etc.) these lines

Type Your Text Here,
The Text Line After the Border.

Have in mind that, if you want to return to the HTML editor, a code may be rearranged (this can be quite tricky).

Few Basic Codes

The code for all of the above borders/frames, with exception of the last two frames (the one with the differently colored borders and the one with rounded corners), is similar and is a modification of the codes in the next to examples.

Example #1:

<div style="
border: solid 5px #aaaaaa;
background: #FF93E7;
font-size: 18px;
margin: 40px;
padding: 30px;
text-align: justify;
">
Type Your Text Here
</div>
The Text Line After the Border.

The visual result:

Type Your Text Here

The Text Line After the Border.

Example #2:

<div style="
width: 300px;
height:70px;
border: double 6px #00385B;
">
Type Your Text Here
</div>
<br/>
The Text Line After the Border.

The visual result:

Type Your Text Here

The Text Line After the Border.

Attributes explanation:

The width attribute should be added (with values in pixels or percent, e.g. 500px or 67%) if the width of the whole border/frame is less than the text width.
The height attribute should be added (with values in pixels e.g. 500px) if you want a border/frame with exact height. Keep in mind that adding this attribute may result in text overflow. So, I recommend skipping this attribute.
After the border attribute has are three types of values:
1. solid or, alternatively, dashed, dotted, groove, ridge, double, inset and outset (read carefully the text inside the first 8 frames above),
2. 5px, which is the border widht,
3. #aaaaaa which is hex code for the border color.
The background attribute should be added if you want a colored background inside the text (DIY: try adding a code without the border attribute).
The font-size attribute refers to the text size. Since this you can edit the text in the visual Blogger's post editor, you may skip this line in the above code.
The value after the margin attribute is the distance from each border (top, bottom, right and left) to the surrounding post elements (usually above and below the border/frame).
The value after the padding attribute is the distance from each border (top, bottom, right and left) to the text inside the border/frame.
The text-align attribute controls the text alignment (left, center, right, justify) inside the borders. Since the text alignment can be controlled trough the visual Blogger's post editor, you can skip this attribute too.

Example #3: Controlling the width, height and alignment of the border/frame

The border/frame I was looking for is this one

A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!

As with the alignment of the horizontal line when added via the <div> tag (explained in the previous post) , the code in Example #1 or Example #2 should be "wrapped" with another <div> tag (the red colored text of the code) as follows:

<div align="center">
<div style="
border: double 5px #aaaaaa;
font-size: 24px;
margin: 40px;
padding: 30px;
width: 50%;
height: 150px;
">
A NICE DOUBLE BORDER AROUND TEXT THAT WILL STAND OUT!!!
</div>
</div>

Differently styled top, right, bottom and left border, margin and padding

The top, right, bottom and left border, margin and padding can be differently styled, for example like this: You can like this you can add in the HTML editor a code.

The outer border/frame is a 1x1 table (e.g. a table with one row and one column).
The inner borders are on different distances from the corresponding outer borders.
The distances from this text (which is left aligned) to the top, right, bottom and left inner border are different.
The text was modified in the visual editor

The corresponding HTML code is:

<table border="2" cellpadding="0" cellspacing="0" style="text-align: left; width: 100%;"><tbody><tr><td style="vertical-align: top;"><div style="border-bottom: solid 6px orange; border-left: solid 3px darkgreen; border-right: solid 6px blue; border-top: solid 6px red; margin-bottom: 10px; margin-left: 50px; margin-right: 20px; margin-top: 65px; padding-bottom: 10px; padding-left: 65px; padding-right: 15px; padding-top: 65px;"><br /><ul><li><span style="font-family: 'Courier New', Courier, monospace;"><b>The outer border/frame is a 1x1 table (e.g. a table with one row and one column).</b></span></li><li><span style="color: #741b47;"><b>The inner borders are on different distances from the corresponding outer borders.</b></span></li><li><span style="font-family: Georgia, 'Times New Roman', serif;"><i>The distances from this text (which is left aligned) to the top, right, bottom and left inner border are different.</i></span></li><li><span style="font-size: x-small;"><b>The text was modified in the visual editor</b></span>   </li></ul></div></td></tr></tbody></table>

Rounded Borders

Rounded border/frame is not supported in IE (current version 9) when the following code is added trough the Blogger's HTML post editor, but it is supported in Firefox, Chrome, Opera and Safari (current versions running on Vista SP2).

Note #2: When I added the next code to one of my sites created with Google Sites, the rounded corners where visible in IE9!?!

The Code for the Rounded Borders Used in This Post

<div style="
-khtml-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: solid 5px #bbbbbb;
margin: 0;
padding: 10px;
text-align: justify;">
Text inside border/frame with rounded borders (not supported in IE).
</div>

How to Add a Floating Text to Blogger Blogspot Post

What is a Floating Text?

The current versions of most of the browsers (like IE, Mozilla Firefox, Chrome, Opera, Safari) support the float attribute of the <div> and the heading tags which can be used to create a text that will "float" (on left or right) "inside" another text. In other words, a part of a post text can be wrapped with another part of the post text, similarly as if the first text was an image. The text in the upper left corner at the begging of this post (e.i. the italic, red colored question "What is a floating text?") is an example of a floating text. Below are some examples which can help you add a floating text to your Blogger Blogspot post. The code has to be added in the HTML editor.

Example #1: Adding text that floats on left

The code:

<div style="width: 100%;">
<div style="
float: left;
margin-bottom: 5px;
margin-right: 10px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON LEFT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. The text that floats on left will not appear in red color. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON LEFT

This is the wrapping text. The text that floats on left will not appear in red color. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

Code explanation:

The width attribute in the first <div> tag controls the width of the whole block: the floating text and the wrapping text. The values for this attribute can be given in percent (e.g. 60%) or pixels (e.g. 650px). When this value results in an block that has a width less than the regular post text width, the block will be displayed on the left. To display it in the center or on the right, add <div align="center"> or <div align="left"> at the beginning of the above code and </div> at the end. The result for changing the width value to 60% and replacing the three dots in: <div align="right">... </div> is:

THIS TEXT FLOATS ON LEFT

This is the wrapping text. The text that floats on left will not appear in red color.Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

The text that floats is controlled with the <div> tag at the second line and eighth line </div> tag at the eight line of the code.
The values of float attribute are "left" or "right". You can put "center" as a value, but it will result with displaying the wrapping text below the floating text.
The margin-bottom attribute (with values in pixels) is the height of the blank space between the floating text and the line of the wrapping text that appears right below the floating text. You should add the margin-top attribute if the floating text appears in the middle as in the Example #2.
The margin-right attribute (with values in pixels) is the width of the blank space between the floating text and the wrapping text that's on the right. If the value for the float attribute is "right", then the margin-left attribute should be used instead.
The width attribute in the the sixth line of the code controls the width of the floating text.
The text-align: center describes the alignment of the floating text, while text-align: justify; describes the alignment of the wrapping text.

Example #2: Adding text that floats on left and in the middle

The code:

<div style="width: 70%;">
<div style="text-align: justify;">
This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.<br />
<div style="float: left; margin-bottom: 5px; margin-right: 10px; margin-top: 20px; width: 150px;">
<div style="text-align: center;">
THIS TEXT FLOATS ON LEFT</div>
</div>
This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON LEFT

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

Note #1: Skip the <br/> in the code for a continuous text display.

Example #3: Adding text that floats on right

The modification of the code in Example #1:

<div style="width: 100%;">
<div style="
float: right;
margin-bottom: 5px;
margin-left: 10px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON RIGHT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. To see the full "potential" of the code, an extra line of text is added. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON RIGHT

This is the wrapping text. To see the full "potential" of the code, an extra line of text is added. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

The modification of the code in Example #2:

<div style="width: 70%;">

<div style="text-align: justify;">
This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

<div style="float: right; margin-bottom: 5px; margin-left: 10px; margin-top: 20px; width: 150px;">

<div style="text-align: center;">

THIS TEXT FLOATS ON RIGHT</div>

</div>

This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>

<br /></div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON RIGHT

Example #4: Adding a floating text with borders

To add a border/frame of the floating text, you can combine the codes from the previous post with the above ones. The most simple way to do this is by adding few lines of code as below (the added lines are in red).

The modification of first the code in Example #3:

<div style="width: 100%;">
<div style="
border: double 4px #ff0000;
float: right;
margin-bottom: 5px;
margin-left: 10px;
padding: 2px;
width: 150px;">
<div style="text-align: center;">THIS TEXT FLOATS ON RIGHT</div>
</div>
<div style="text-align: justify;">
This is the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
<br /></div>

The result:

THIS TEXT FLOATS ON RIGHT

This is the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like.

The modification of the second code in Example #3:

<div style="
border: solid 2px #00ff00;margin: 5px;padding: 3px;width: 70%;">
<div style="text-align: justify;">
This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.
<div style="
border: dotted 2px #0001fc;float: right;
margin-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 10 px;padding: 4px;width: 150px;">
<div style="text-align: center;">
THIS TEXT FLOATS ON RIGHT</div>
</div>
This is the rest the wrapping text. Once you've added this code in the HTML editor, you can return to the visual Blogger editor to add your own floating text and/wrapping text, to change color of each parts of the text, change the font, font size, font color, alignment, make it bold, italic e.t.c., just as you like. </div>
</div>

The result:

This is the above part of the wrapping text. Once you've added the whole code in the HTML editor, you can remove/edit this text trough the visual editor. This line only completes the upper text.

THIS TEXT FLOATS ON RIGHT

Creating Patterns and Backgrounds with bgMaker

If don’t you have experience with some kind of image editing software and you want to make some simple, eye-catching backgrounds, then bgMaker is an ideal tool to start with. This free online pattern/background generator works like a pixel editor with an instant preview of your design. You can create stunning backgrounds in few minutes.

Overview of the bgMaker Editor (click to enlarge)

The editor is quite simple. By default, you will see 12x12 grid. Each square in the grid represents a pixel. You can add an extra row of pixels by clicking on the plus sign on the left side of the grid. To remove a row of pixels, click on the minus sign on the left side of the grid. To add or remove a column of pixels click on the corresponding sign above the grid. Be aware that the editor adds rows at bottom and columns on the right side of the grid. The same goes for removing rows and columns. You can create a pattern with up to 99 rows or columns of pixels. Instead of clicking on the plus or minus signs, you can click between the signs and replace the number 12 with any number between 1 and 99.

Creating a Pattern/Background - Simple Example

Pick a color from the color palette in the left corner (to start, just click on the any color). Alternatively, you can edit the hexadecimal code for the desired color. Use the “Fill” button to fill the whole area with a single color. Below is the fill result for color with hex code DB99CD for 9x9 pixels pattern.

(click to enlarge)

Let’s pick a darker shade of the same color by clicking on the rectangle right next to the color palette (notice that both the hex code and the numbers for rgb percent have automatically changed). Then click on each square in the grid along the diagonal, starting from the upper left to the lower right. You should have a result like this one:


(click to enlarge)

If you repeat this with the opposite diagonal, you will get this result:

(click to enlarge)

Now, suppose that you want to use some of the colors that you've used before but you don’t know which shade (or the hexadecimal code) you've used. Never mind, bgMaker has a feature similar to a color picker. To do this, click on the area that indicates the selected color and move over the editor. The small hand should change in cross-shaped pointer. Click on the square that’s colored with the desired shade and once again you can work with a color that’s already used

After creating the final version of your pattern click on the “Save” button. The pattern you’ve created will be downloaded to your computer. This pattern will also be saved in the bgMaker’s Gallery. You can access the Gallery, which contains more than 244500 user created patterns, via the “Gallery” button. You can view, edit and download (in PNG format) any pattern in the Gallery.

Color Codes - Useful Online Resources

For more information about color codes see any (preferably all) of the following websites:

Have fun!

Breaking

Home Top Ad

Post Top Ad

How to Add a Lines, Table, Text Frame, Floating text and Pattens to Blogger Blogspot Post

How to Add a Horizontal Line (Rule) to Blogger Blogspot Post

Adding Horizontal Line with the HTML <hr> Tag

Adding Horizontal Line with the HTML <div> Tag

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 1)

Using Tables for Arranging Images

How to Add a Table to Blogger Blogspot Post - The Easier Way (Part 2)

Tables with colored cells

How to Add Text Frames and Borders to Blogger Blogspot Post

How to Add a Floating Text to Blogger Blogspot Post

Creating Patterns and Backgrounds with bgMaker

Creating a Pattern/Background - Simple Example

Color Codes - Useful Online Resources

Không có nhận xét nào:

Đăng nhận xét

Post Bottom Ad

Author Details

Tìm kiếm Blog này

Việt Mỹ News trên Facebook

Chia sẽ bài viết trên "Việt Mỹ News"

Bài Mới

Xem Nhiều Nhất

Lời Bình

Tin Đáng Chú Ý

Tìm Tác Giả

Lưu trữ Trong Tháng

Bầu Cử Mỹ

POTUS

VANEWS TV CHANNEL

Giáo Dục

Biển Đông

Văn Học-Nghệ Thuật

Y Tế - Sức Khỏe

Pages

Người Việt xấu xí

Người Việt 5 Châu

Biểu mẫu liên hệ

Hoa Kỳ