Pages

Tuesday, May 15, 2012

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.

81 comments:

  1. This article about Add a Floating Text to Blogger Blogspot Post is really good for learners.It teaches more via HTML language.A leading affordable web development portland maine, ME. We are offering creative Website graphics Design, SEO Services, Mobile App Development at reasonable Cost.

    ReplyDelete
  2. Zinavo Company is backed with professionals who have years of experience in this webdesinging.
    website designing companyy bangalore | wesite development company bangalore

    ReplyDelete
  3. Useful options and attractive design for gaining the users towards our blogs beyond this code. Thanks you very much for the sharing.

    Best web site developer | professional seo company in Dindigul

    ReplyDelete
  4. Been trying to figure this out, thank you!

    ReplyDelete
  5. Informative article on responsive web sythesis!!! With the qualification in phones, most by far of us find the opportunity to web from our flexible and other obliging contraptions. Having responsive site for your business will help you to target customers for the most part.
    excellent web designer service in india
    professional of seo services companies in bangalore
    experts in professional web developer service company in bangalore

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. would like to express that this particular article is wonderful, good published and may include around many sizeable infos. I will observe additional blog posts like that .Led Lights Sydney | Led lighting Sydney

    ReplyDelete
  9. When you buy a new HP printer, you try to connect it using the user manual. The manual provided by the 123.hp.com/setup manufacturer may not be in detail. Hence, our technical experts have given simple instructions that guide you through the HP Printer setup and troubleshooting issues if any. We also offer free 123hp driver (Both Basic and Full-feature) to make your printer function efficiently. The navigation is too easy such that all instructions are available on one single page. www.123.hp.com/setup

    ReplyDelete
  10. Great post! I am actually getting ready to across this information, It's very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well. must visit at Best Website development Company whoo are making best creative website as per your requirements.

    ReplyDelete

  11. Thanks for sharing such important information your contant is very impressive. I like your explanation of topic and ability to do work.I really found your post very interesting .
    Brighthouse Spectrum | Brighthouse annuities | Brighthouse pay my bill | Brighthouse financial metlife | Bright House email login | Brighthouse Webmail | Brighthouse Email | Spectrum brighthouse login

    ReplyDelete
  12. Welcome to RealPrinterFix247 right place to online help for HP Printer Tech Support Phone Number offered by best technicians to resolve any issues with HP computers, laptops, printers, desktop, and alternative parable devices, etc. We are remote HP Printer Tech support services for HP users facing a totally different level of technical problems with their Hewlett Packard Enterprise devices like Desktop Computers, Laptops, Printers, Scanners and Tablets business customer support.

    Canon Printer Tech Support Phone Number | QuickBooks Tech Support Phone Number | Norton Tech Support Phone Number

    ReplyDelete
  13. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    SEO services provider in Delhi

    Website developer in Delhi NCR
    SEO services provider in Delhi
    SEO services in Delhi NCR
    Best SEO services company Delhi
    Website Design and Development Company in Delhi
    Top website development company in Delhi NCR
    SEO Company in Delhi
    Best seo services Delhi

    ReplyDelete
  14. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    Best website developer in Delhi

    SEO packages in Delhi
    Best website designer in Delhi
    Best website designer in Delhi
    Top Website Designing Company in Delhi
    Best website developer in Delhi

    ReplyDelete
  15. I have read this whole blog and it is an amazing blog for developers who are dealing daily with the new challenges and tasks.
    Thank You for sharing such a valuable, informative and useful thoughts for users in your blog.
    SEO services in Delhi NCR

    Website developer in Delhi NCR
    SEO services provider in Delhi
    SEO services in Delhi NCR
    Best SEO services company Delhi
    Website Design and Development Company in Delhi
    Top website development company in Delhi NCR
    SEO Company in Delhi
    Best seo services Delhi

    ReplyDelete
  16. Troubles Related To Fixing The 2-Factor Authentication

    Call 1833-464-7652 If you are having a problem at the time of fixing Binance two-factor authentication error? Binance two-factor authentication is the major element that keeps your account safe and secure from unwanted troubles. If you are unable to deal with the error and need guidance, you can always call on Binance helpdesk number which is always functional and the team is ready to guide you at every step. Call them for availing fruitful results and fix all kinds of queries under their guidance. Avail the best remedies for the better functioning of the account.

    ReplyDelete


  17. This is very informative post, good work, i like this content and wish to read more from you. thanks for such a informative post. i also like to share some useful links

    www.office.com/setup
    office.com/setup

    ReplyDelete
  18. In Ledger Nano S. Sometimes Bitcoin Transactions Become Difficult

    Ledger Nano S. platform provides a platform where users can trade multiple coins like Bitcoin. Bitcoin got the popularity since its inception and when users face difficulty in making bitcoin transactions, it is advised to gain solutions from the skilled professionals who are there to help you. You can always call on Ledger Nano S. support number which is always active and the team is ready to assist you at every step. You can always connect with the team when you need guidance and speak to the team to avail of productive results which are easy to execute. For more details visit https://www.cryptophonesupport.com/wallet/ledger/ or call us 1-877-846-2817.

    ReplyDelete
  19. Codeaxia Digital Solutions is a digital agency based out of Delhi/NCR. We provide valuable & economical digital solutions for the customers in areas such as website designing, development & maintenance, graphic designing, digital marketing and mobile applications development.
    Codeaxia provides best solutions for -
    Web Designing
    Web Development
    Ecommerce Web Development
    Digital Marketing
    SEO Services

    ReplyDelete
  20. Very useful and nice article , If you want to make your career in USA , Indeedusa is the portal which provide you the latest US jobs and
    indeedusa Contract jobs assistance for free and also post your Us jobs and Hotlist for free anytime anywhere
    you can check this for various job opportunity
    indee dusa

    ReplyDelete
  21. This is the perfect blog I am looking this type of blog its awesome blog here I just want to let you know that we provide our client with 100% satisfaction in every aspect of their marketing goals in web development services in Delhi NCR, so, what are you waiting for Connect to the team of best SEO Expert, Google Ads Experts, Website Designing Experts, Social Media Experts & more to boost your Digital Presence today with the high quality Digital Marketing Services in Delhi NCR.

    ReplyDelete
  22. Thank You for sharing such an informative post. I like the way you present the things and make the post more presentable. At PegaLogics, You will get the best industry-leading experience in the field of Mobile App Development & Web Designing. Visit our website for more information.
    mobile app development company in Delhi
    mobile application development company in Delhi
    app development company in Delhi
    web development company in Delhi
    web designing company in Delhi
    website development company in Delhi

    ReplyDelete
  23. Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks 안전놀이터

    ReplyDelete
  24. I want to start a blog to write about everything that happens at school and
    with friends…anonymously…any sugestions?.해외선물사이트

    ReplyDelete
  25. Very efficiently written information. It will be valuable to everyone who uses it, including myself. Thanks.
    I can say this is the best way to know gain knowledge thank You!!
    Regards

    seo company mumbai

    ReplyDelete
  26. Great content, amazing post altogether! keep posting such quality posts would be delighted to be updated with the latest on your blog,
    Regards

    seo mumbai

    ReplyDelete
  27. I m very glad after Read Your Article . Get also best Accounting Software For QuickBooks Error at quickbooks customer service

    ReplyDelete
  28. You gave me such an amazing article to read I can't tell you that how thankful I am after reading this beautiful article. I just can say that thanx for sharing this with us.

    Cheap Seedbox

    ReplyDelete
  29. Very good info. Lucky me I discovered your site by chance (stumbleupon). I have saved it for later! Here is my web site:Sattaking

    ReplyDelete
  30. Very good info. Lucky me I discovered your site by chance (stumbleupon). I have saved it for later! Here is my web site:http://marioiheb23334.kylieblog.com/7771097/all-about-satta-king

    ReplyDelete
  31. Well explained article, loved to read this blog post and bookmarking this blog for future.http://landenrpnk55667.atualblog.com/8831319/all-about-satta-king

    ReplyDelete
  32. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up

    Best Private Colleges in India
    NEET
    Career after commerce graduation
    MBA Pharma
    Top 10 LLB colleges in india
    GATE 2022
    IIT Jam 2022
    XAT 2022
    CMAT

    ReplyDelete
  33. This is an excellent blog post, i am quite impress with your style of writing, please follow below links may they are useful to you.

    Letting Agency Glasgow
    Property Management Glasgow

    ReplyDelete
  34. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up
    Power Bi Partners In Dubai
    Customer Solutions In Dubai
    Microsft Dynamics 365 CRM Implementaion Partners In Saudi Arabia

    ReplyDelete
  35. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up
    Dynamics AX Upgrade Partners in Saudi Arabia
    Power Implementaion Partners in Saudia Arabia
    Microsoft Dynamics 365 Partners in Saudia Arabia

    ReplyDelete
  36. This article is very much helpful and i hope this
    will be an useful information for the needed ones.
    Customer Service Quality
    Salesforce QA

    ReplyDelete
  37. This article is very much helpful and i hope this
    will be an useful information

    To Let Glasgow
    Letting a property in Scotland

    ReplyDelete
  38. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up
    Cheap SEO Services in Delhi
    Cheap SEO in Delhi
    Website Designing Company in Delhi

    ReplyDelete
  39. This article is very much helpful and i hope this
    will be an useful information
    Web Development Company india

    ReplyDelete
  40. This is an excellent blog post, i am quite impress with your style of writing, please follow below links may they are useful to you.

    Best Web Design Company india

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. If you are looking best accounting Software then QuickBooks is perfect choice for you accounting need task then

    why r you waiting just click at Quickbooks Support Phone Number+18556753194and find all information related Quickbooks Error Support

    ReplyDelete
  43. During Covid-19 Period if you need any help related to quickbooks you can call to our

    quickbooks customer service number +1 877-603-0806 any time.

    ReplyDelete
  44. Useful options and attractive design for gaining the users towards our blogs beyond this code. Thanks you very much for the sharing.
    Web Design Agencies in India
    Web Development Company india
    Web Development Services India
    Best Web Design Company india

    ReplyDelete
  45. CL 4K UHD Video Player - HD video player for android – App

    CL 4K UHD Player- High Quality Video Player app allows you to watch your favorite movies, shows and other videos in Ultra HD quality. You can watch high quality videos from your device or SD card and stream from web. This app also works as whatsapp status downloader.

    Install CL 4K UHD Player- High Quality Video Player on your android device and enjoy 4K ultra HD videos anytime, anywhere. Best all format hd video player

    ReplyDelete
  46. Web Design Experiments: How To Add A Floating Text To Blogger Blogspot Post >>>>> Download Now

    >>>>> Download Full

    Web Design Experiments: How To Add A Floating Text To Blogger Blogspot Post >>>>> Download LINK

    >>>>> Download Now

    Web Design Experiments: How To Add A Floating Text To Blogger Blogspot Post >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  47. I am James Smith. I provide assignment help at the budget price. I provide assignment for different subjects.

    ReplyDelete
  48. Wow, this tutorial on adding floating text to Blogger posts is a game-changer! Thanks for the clear instructions and enhancing my blog's visual appeal! Nutrient Innovation INC

    ReplyDelete
  49. The examples you provided are particularly helpful in illustrating how to achieve this effect in different browsers. boats for sale abu dhabi

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. The examples are a great learning resource, helping developers grasp the core concepts and principles by showing how they work in various browser environments. Cisco distributors in dubai

    ReplyDelete