Saturday, June 9, 2018

June 09, 2018
How to add  two or multi column Paragraphs into blogger post?

How to post multiple columns in bloger.

Hello friends,
Today we discuss about How to post multiple columns in bloger post.

Blogging is a great way to share our knowledge with rest of the world. As bloggers we can write the latest newsletters about tech, economy, entertain, life and more knowledgeable things in our blog sites and share with others. So writing is a brilliant thing, but if we can be writing that with a style, that is an even brilliant!  ;-) Yes,

If writer can write the excellent posts with a style, then that posts became a more attractive and eye catching to both Readers and Search engines. If blogger can attract the both readers and search engines that blogger can be success in blogging very easily. So we must know to include not only words but also need to include some pro look for our blog post. We should include some designs to our post. But you know that if we compare among blogging platforms, in the Blogger blog platform there is a limited feature. If you wanted to do advanced things, you want to use HTML knowledge as well as CSS knowledge. By using the HTML codes and CSS we can customize our blogger template as well as blog post.


Most of bloggers interested to publish their blog content by using the multiple columns because blogger help to post on a single line/column post. Have you ever try to publish your blog post content by using multiple columns? Or Are you searching How to post a multiple column text in blogger post? Sometimes you may be wondered how to post a multiple column text in blogger post? Yes, you can post a multiple column text in blogger post. But blogger doesn’t provide any direct method or feature for that. We have to use HTML codes & CSS knowledge. With that you can post a two columns, three columns or four columns pot very easily by using only a simple code. Because of using a multiple column, we can describe things clearly. Also it makes easy to understand.
Sometimes you may be think like that Why we don’t use MS word sheet for that task, first write-down the content as columns and after that copy & past into the post page?
That’s not a good idea. Because that MS word or other Text editors mostly aren’t use for web, Also not compatible with HTML formats. So we cannot recommend that method.

Ok. Then without any late let see how to post  multiple columns post in blogger blog?  There are lot of methods to post a post layout in two columns, three columns or multiple columns. Let start with some easy method. Most of time I used that method to post a post layout in double columns.

Let see how to post a post layout in double columns?


1.       Log into your Blogger blog account -->> Go to Dashboard

2.     Click on the posts section and create a new post or click edit button on existing post. Then click where you want to create columns.

3.       By default, your post editor opens with COMPOSE mode. So click on HTML tab to open Html mode.

4.       Then copy the one of below code and paste it where you want to create a column in your blog post.

5.       Then fill out that column with your content (Go back to compose mode and fill out that column with your content) and
  Go back to compose mode and check your post content.

6.       Finally, click on the publish button to publish your post.

Among the below codes you can select the one of suitable code as you prefer. Appearance of that codes will be given under the below of each code.


Method 01.
Code for two columns :

<div style="border: 5px ridge; float: left; padding: 2px; margin-bottom:8px; width: 45%;">Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here  </div>
<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 45%;">Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here   </div>
<div style="clear: both"></div>

Above code will look like;
 
Text of your Left Column is in here. This demo text of left Column. Please Enter the content Here
Text of your Right Column is in here. This demo text of Right Column. Please Enter the content Here

That is the best and easy way to create columns in your blogger post. Only need to used simple HTML code. Through this code you just have a Floating two columns. Yo have only use the HTML codes. Not need to use CSS code. Personally I recommend that method because I use that codes successfully. For see a live example in my blog please visit  Ptchostpot page.


Code for three columns:
<div style="border: 5px ridge; float: left; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here </div>
<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Middle Column is in here. This demo text of Middle Colum. Please Enter the content Here   </div>
<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here   </div>
<div style="clear: both"></div>

Above code will look like;
Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here
Text of your Middle Column is in here. This demo text of Middle Colum. Please Enter the content Here
Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here

Customize the highlighted values as you prefer.

Method 02.
Code for two columns :

<table cellpadding="0" cellspacing="10"><tbody>
<tr>
<td align="justify" valign="top" width="200"> Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here </td>
<td align="justify" valign="top" width="200"> Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here </td>
</tr>
</tbody></table>


* Cellpadding: Change the value of the range between post and the column.
* Cellspacing:  Change the value of the range between the two columns.
* Width:           Change the value of the wide of the column.
* Align:            Change the value of the text is to be aligned to right, left, or center. Change it to right to align to right side. Change it to
                            left to align to left side. Center to center align. While justify is to align to both right and left side.
* Valign:          Change the value of align vertically to top, bottom, or middle.


* Customize the highlighted values as you prefer.
Above code will look like;
Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here



Method 03.
Code for two columns :

<div style="float: left; width: 50%;">
<ul>
<li>Left Item 01</li>
<li>Left Item 02</li>
<li>Left Item 03</li>
<li>Left Item 04</li>
<li>Left Item 05</li>
</ul>
</div>
<div style="float: right; width: 50%;">
<ul>
<li>Right Item 01</li>
<li>Right Item 02</li>
<li>Right Item 03</li>
<li>Right Item 04</li>
<li>Right Item 05</li>
</ul>
</div>


Above code will look like;
  • Left Item 01
  • Left Item 02
  • Left Item 03
  • Left Item 04
  • Left Item 05
  • Right Item 01
  • Right Item 02
  • Right Item 03
  • Right Item 04
  • Right Item 05




Code for three columns :
<div style="float: left; width: 33%;">
<ul>
<li>Left Item 01</li>
<li>Left Item 02</li>
<li>Left Item 03</li>
<li>Left Item 04</li>
<li>Left Item 05</li>
</ul>
</div>
<div style="float: left; width: 33%;">
<ul>
<li>Middle Item 01</li>
<li>Middle Item 02</li>
<li>Middle Item 03</li>
<li>Middle Item 04</li>
<li>Middle Item 05</li>
</ul>
</div>
<div style="float: right; width: 33%;">
<ul>
<li>Right Item 01</li>
<li>Right Item 02</li>
<li>Right Item 03</li>
<li>Right Item 04</li>
<li>Right Item 05</li>
</ul>
</div>


Above code will look like;
  • Left Item 01
  • Left Item 02
  • Left Item 03
  • Left Item 04
  • Left Item 05
  • Middle Item 01
  • Middle Item 02
  • Middle Item 03
  • Middle Item 04
  • Middle Item 05
  • Right Item 01
  • Right Item 02
  • Right Item 03
  • Right Item 04
  • Right Item 05


Codes:
For two columns
    <div class=' multiple-para '>
        <div class='two-column'>This is the first paragraph. Enter content Here </div>
        <div class='two-column'>This is the second paragraph. Enter content Here </div>
    </div>

For three columns
    <div class=' multiple-para '>
        <div class='three-column'>This is the first paragraph. Enter content Here </div>
        <div class='three-column'>This is the second paragraph. Enter content Here </div>
        <div class='three-column'>This is the third paragraph. Enter content Here </div>
    </div>

For four columns
<div class=' multiple-para '>
    <div class='four-column'>This is the first paragraph. Enter content Here </div>
    <div class='four-column'>This is the second paragraph. Enter content Here </div>
    <div class='four-column'>This is the third paragraph. Enter content Here </div>
    <div class='four-column'>This is the fourth paragraph. Enter content Here </div>
</div>




After copy & paste above HTML codes you should need to copy & paste the below CSS codes. For that,
1.Log into Blogger account -->> Dashboard -->> Theme -->> Edit HTML
2. Click inside the theme editor and press Ctrl + F buttons and open the search box.
3. Then type   ]]>/b:skin> or </style> in the search box and press Enter button.
4. Then copy & paste the below CSS codes before or above the   ]]>/b:skin> or </style>

.two-column, .three-column, .four-column{text-align:justify!important;} .multiple-para.two-column, .multiple-para.three-column, .multiple-para.four-column{ display: block; padding: 0 10px; float: left;!important;} .multiple-para{ margin: 15px 0; } .multiple-para*, .multiple-para*:after, .multiple-para*:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .multiple-para:after, .multiple-para:before { content: ""; display: block; clear: both; } .multiple-para.two-column { width: 50%; } .multiple-para.three-column { width: 33%; } .multiple-para.four-column { display: block; width: 25%; }

5. Click save theme and check the post.

So, I think that article have successfully help you for post  multiple columns post in your blogger blog post. I think it’s working for you. If you have any problem, please comment in the below or give your feedback about this post in the below comment section.



For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger