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

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.

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

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.

How to Add Text Frames and Borders to Blogger Blogspot Post

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&nbsp;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&nbsp;different.</i></span></li><li><span style="font-size: x-small;"><b>The text was modified in the visual editor</b></span> &nbsp;&nbsp;</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>

---

Have fun using the above codes!!!

Update (MAY 16, 2012): Check the CSS 3.0 Maker text borders ideas.

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

Creating Patterns and Backgrounds with COLOURlovers

Another free (the lite version) online patterns editor/generator, similar to the PatternCooler's advanced editor is available at COLOURlovers.

If you've never stumbled upon this website before, then I suggest that you first visit the pattern gallery. By clicking on any of the patterns you'll be redirected to a page where you can

• browse for similar patterns to the one that you've chosen, or
• color this pattern with different colors (up to five, depending on the pattern) by clicking on the small rectangles that appear below the pattern and selecting a new color from the color picker that will pop-up. 

recoloring a pattern

Alternatively, you can browse the seamless pattern template gallery and, after selecting a pattern template, you can recolor it as described above.

Another cool feature of this online pattern generator is that you can create (for free) your own seamless pattern template with the Seamless Lite pattern template creator.

creating a pattern template

You can use shapes from different sets of shapes, draw lines, create layers. Each shape can be re-sized, rotated, re-positioned and, if you don't like you can remove it.

If you want to save a pattern template or a pattern that you've recolored, then you have create an account. Each time you have to name your creation. This will serve as a key word for finding it. To find all of the patterns or pattern templates you've created, in the search form, in the "Lover" field, just type the username that you've used. Leave everything else blank.

After choosing the pattern, or a pattern template for further coloring

coloring the pattern template

to download the final result, look on the right side and click on "Preview".

Your pattern will be opened in new window. Then right-click and "Save image as...".

Note: You don't have to create an account if you want to download a pattern that found in the gallery.

Have fun!!!