How to Add Multiple Column to a Blogger Posts

A brilliant writer is one who writes the excellent posts with a stylish look to make them more eye-catching to both search engines and readers. As you know, every writer tries to publish the blog posts by putting the energy into thinking to compose a spectacular article that grabs the reader's attention. However, sometimes it is not enough to include the actionable words without having a pro look. We should give our posts new and unique design by applying the different methods, and one of the modern ways is to break the text into multiple columns. You can not only add the columns to a blogger template but in posts as well.

Multiple Column for Blogger

Check out: How to Create Magnify Glass Effect In Blogger

We often publish textual contents by using the simple and one column method. However, have you ever wondered how to write your articles in multiple columns? You can compose your blog posts in various columns like two columns, three columns and even in four columns just with a piece of CSS code. It will not only decorate your article but will also make it easy to understand the topics in a different style.

Why Use Multiple Column Paragraph to a Blog Post?

In my honest opinion, the multiple columns are the best way to describe the things more clearly. For example, you are going to distinguish the two topics A and B. You can directly apply the two column style to make it effortless and understandable. This trick works in both WordPress and BlogSpot as well.

Steps to Add Multiple Column to a Blog Post:

  1. Login to your BlogSpot Dashboard > Theme > Edit HTML
  2. Click anywhere inside the theme editor
  3. Press Ctrl + F to open the theme search box
  4. Type ]]>/b:skin> or </style> in the search box and press Enter key
  5. Add the following CSS code right above the ]]>/b:skin> or </style>
  6. .two-column, .three-column, .four-column{text-align:justify!important;} .knigulper-para .two-column, .knigulper-para .three-column, .knigulper-para .four-column{ display: block; padding: 0 10px; float: left;!important;} .knigulper-para { margin: 15px 0; } .knigulper-para *, .knigulper-para *:after, .knigulper-para *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .knigulper-para:after, .knigulper-para:before { content: ""; display: block; clear: both; } .knigulper-para .two-column { width: 50%; } .knigulper-para .three-column { width: 33%; } .knigulper-para .four-column { display: block; width: 25%; }
  7. Click Save Theme and you are all set
  8. Now go to your post editor and click New post/page
  9. Switch to HTML mode and use one the following text column style 
  10. <h3>2 Column</h3>
    <div class='knigulper-para'>
        <div class='two-column'>This is the first paragraph</div>
        <div class='two-column'>This is the second paragraph</div>
    </div>
    <h3>3 Column</h3>
    <div class='knigulper-para'>
        <div class='three-column'>This is the first paragraph</div>
        <div class='three-column'>This is the second paragraph</div>
        <div class='three-column'>This is the third paragraph</div>
    </div>
    <h3>4 Column</h3>
    <div class='knigulper-para'>
        <div class='four-column'>This is the first paragraph</div>
        <div class='four-column'>This is the second paragraph</div>
        <div class='four-column'>This is the third paragraph</div>
        <div class='four-column'>This is the fourth paragraph</div>
    </div>
  11. Fill the highlighted areas with your text
  12. Finally, click Publish and you are on the go

Post your valuable comments and let us know your thoughts about this tutorial.

28 Major Differences Between WordPress and Blogger

Have you ever seen the people talking about WordPress and Blogger? Yes, you might have heard most people think that Blogger has fewer features as compared to WordPress. So, Why people lack the power of BlogSpot platform? Is it their technical fault or something else? Whatever the reason may be, but to my personal experience, Blogger is one of the best platforms for everyone to start a killer blog.

WordPress Vs Blogger

Check out: Joomla Vs WordPress: Which One is Best For You & Why?

BlogSpot offers many SEO and theme customization opportunities as compared to free WordPress and it is a blogging service offered by the giant search engine Google. But it does not mean that BlogSpot is 100% SEO ready. You have to pay attention to the site elements manually. Okay, so you want to know the major differences between Blogger and WordPress?

Recommended: How to Start a Killer Blog

Kindly note that this comparison Chart is between WordPress.com and Blogger, not WordPress.org vs Blogger.

Blogger Vs. WordPress Comparison Chart - 2018 (Pros and Cons)

FEATURES BLOGGER WORDPRESS CHAMPION
Registeration Free Free Both
Custom Domain Available Available on Upgrade BlogSpot
SSL Certificate (HTTPS) Available Available Both
Categories & Tags Only Tags are Allowed Both are allowed WordPress
Post Editor Advanced Advanced Both
Supports Schema Microdata Yes Yes, but on Upgrade BlogSpot
Theme Customization Available N/A in Free Version BlogSpot
Coding Required HTML, XML, JSON, CSS & JavaScript Advanced coding required like PHP, MySQL & JavaScript BlogSpot
SEO Plugin Available N/A in Free Version BlogSpot
Custom Widgets Available N/A in Free Version BlogSpot
Default Templates Available Available Both
Custom Templates Allowed Not Allowed in Free Version BlogSpot
SEO Optimization Need Technical Skills In Paid:
Install & Activate
WordPress
Video Storage Files under certain size limits don’t count towards this free storage limit Only 3GB More space on upgrade BlogSpot
Image storage Files under certain size limits don’t count towards this free storage limit 3000 Megabytes. More space on upgrade BlogSpot
Stats System Powerful Default stats system Same here Both
Advertisements No advertisement of its own Remove Ads on Upgrade BlogSpot
Blog Monetization Available Only sites with a custom domain can apply BlogSpot
Google Adsense Available You can not run Google Adsense or other advertising programs to serve ads in Free Version BlogSpot
Writing Paid Posts Allowed You can not write paid posts, sell links, review products, etc. BlogSpot
Monetization Opportunities As much as you'd like In Free Version, you can only apply for WordAds BlogSpot
Account Suspension Suspend blogs suspected of activities prohibited in their terms of service Same here Both
Blog Migration BlogSpot blog to another Platform WordPress to another Platform Both
Number of Authors Up to 100 members per blog You can have as many authors as you'd like WordPress
Custom Permalink Allowed Not allowed in free version BlogSpot
Comment Blacklist Not Available When a comment contains any of word, name, URL, e-mail, or IP, that you have blacklisted, it will be put in the trash WordPress
Blog Administrators 100 Administrators per blog Only 35 Administrators per blog BlogSpot
No. of Static Pages Not Confirmed (I currently have 31 Pages) There is no limit on how many pages you create Pending

Wish to do everything any of these features from Blogger or WordPress? Sorry, no may do. But as I described the comparison chart, you can calculate the rating score by yourself. I am not against the WordPress or Blogger neither I am affiliated with these services. Both have pros and cons to some extent and the above chart is solely my personal review.

Conclusion:

If you are serious about starting a blog and can develop your future make money blogging, starting your favorite blog is the best way to go, and that requires investing small to large money for setup.

How to Create Magnify Glass Effect In BlogSpot Blogs

When it comes to BlogSpot design, we use jQuery and CSS3 to develop advanced widgets and plugins for the specific functionality that already exists in Blogger. BlogSpot has many excellent features. One of the impressive features is magnifying glass effect that offers zooming functions in tiny objects like images and texts to draw attention to a particular part of an image.

Magnify Glass Effect

Check out: How to Add Automatic Page Scroll Widget to Blogger

You might have seen product images on E-commerce sites they use magnify plugins to see the product images in detail. The plug-in brings the actual size of the image on mouse hovering that lets a user enlarge the small photos without affecting the image quality.

How Does Magnify Glass Effect Works in Blogger?

A small piece of jquery and CSS3 makes your little images large and readable on hover. The plugin does not make your entire picture large at once, but it magnifies the parts of photos where we point the mouse. It contains a set of jQuery plugin that makes your images large.

Steps to Create Magnify Glass Effect in Blogger

Before you jump to the steps, it is highly recommended to backup your theme.

  1. Login to your BlogSpot Dashboard
  2. Go to the Theme > Edit HTML
  3. Press Ctrl + F to activate the theme search bar
  4. Type </body> in the search bar and press Enter key
  5. Past the given jQuery just above the </body>
  6. <script type='text/javascript'> // Magnifying Glass copyright knigulper.com: eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(C).B(l(){4 d=0;4 f=0;$(".3-5").q("D","E(\'"+$(".3-a").n("h")+"\') A-F");$(".3-G").z(l(e){j(!d&&!f){4 b=x y();b.h=$(".3-a").n("h");d=b.8;f=b.6}o{4 i=$(g).N();4 9=e.O-i.s;4 7=e.H-i.p;j(9<$(g).8()&&7<$(g).6()&&9>0&&7>0){$(".3-5").M(m)}o{$(".3-5").I(m)}j($(".3-5").J(":K")){4 w=v.u(9/$(".3-a").8()*d-$(".3-5").8()/2)*-1;4 r=v.u(7/$(".3-a").6()*f-$(".3-5").6()/2)*-1;4 k=w+"c "+r+"c";4 c=9-$(".3-5").8()/2;4 t=7-$(".3-5").6()/2;$(".3-5").q({s:c,p:t,L:k})}}})})',51,51,'|||knigulper|var|large|height|my|width|mx|small|image_object|px|native_width||native_height|this|src|magnify_offset|if|bgp|function|100|attr|else|top|css|ry|left|py|round|Math|rx|new|Image|mousemove|no|ready|document|background|url|repeat|magnify|pageY|fadeOut|is|visible|backgroundPosition|fadeIn|offset|pageX'.split('|'),0,{})) </script>
  7. Now find the </style> and add the following CSS right below the </style>
  8. <style type='text/css'> * {margin: 0; padding: 0;} .knigulper-magnify {width: 300px; margin: 50px auto; position: relative; cursor: none} .knigulper-large {  width: 195px; height: 195px;  position: absolute;  border-radius: 100%;  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 7px 7px rgba(0, 0, 0, 0.25),  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);  display: none; } .knigulper-small { display: block; } </style>
  9. Finally, add the HTML code where you want to create the magnifying glass effect
  10. <div class="knigulper-magnify"> <div class="knigulper-large"> </div> <img class="knigulper-small" src="https://4.bp.blogspot.com/-uuUN9NGNDbs/WdkLSItGJUI/AAAAAAAACxE/sajbq3v7I5sgxiPbOhVe6ylC1TQRC003gCLcBGAs/s1600/magnify-glass.jpg"/>   </div>
  11. Replace the blue text with your image URL and click Save Theme

Now your plugin is ready to work for your Blogger images.

How to Add Automatic Page Scroll Widget to Blogger

Do you know you can enable the auto page scroll effect in your blogger posts/pages with play and pause button? Whether you may know it or not, but I must say that automatic page scroll widget is impressive. You have the free options to choose the widget placement anywhere in your template. You can align the widget to the bottom left corner, bottom right corner or just next to the post title. Don't confuse yourself by Scroll saw.

Automatic Page Scroll Widget

Read Also: How To Disable Text Selection On Blogger With CSS

How Does Auto Scroll Widget Works?

When you land on your blog homepage or post page, the page scroll widget will start showing. I have used the two buttons to control the play and pause functionality likewise in blogger media player. As you press the play button, the page will start the scrolling automatically from the top to the bottom until you hit the pause button. If you press the scroll icon twice or thrice, the scrolling speed will get increased dramatically. In this way, you can stop the scroll effect following by the same procedure.

Check out: How to Show Your Blogger Visitor's Their IP Address on Your Blog

The more you hit the play icon, the more you will gain the speed. For instance, if you click the scroll icon thrice then you have to click the stop icon three times too to pause the scrolling effect.

To Add the Auto Page Scroll to Blogger, Follow the Steps:

  1. Within your, Blogger jump to Dashboard
  2. Navigate to Theme click Edit HTML
  3. Look for the </body> and place the widget code before the </body>
  4. Click Save Theme
<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#abt-scroll a.abt-scroll{font-family:FontAwesome;border-radius:50%;}
#abt-scroll a.abt-stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#abt-scroll a.abt-stop{background: url("https://3.bp.blogspot.com/-y7CTiiR2aBU/Wcu4H7AkmtI/AAAAAAAACwM/8mmry5ttOPgCOwJIKIpNM2n_ZyIr95ZngCLcBGAs/s1600/pause.png");}
  #abt-scroll a.abt-scroll{width:33px;height:33px;!important;}
 #abt-scroll a.abt-stop{width:34px;height:34px;}
#abt-scroll a.abt-scroll{background: url("https://1.bp.blogspot.com/-gpimEvetJGo/Wcu2gRFCkiI/AAAAAAAACwA/KIlNSQEG8t0JCw7nwC0cjChy8huaE_TdACLcBGAs/s1600/play.png");}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,80)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Play'>Play</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Pause'>Pause</a>
</div>

Customization:

If you wish to change the icon set, simply replace the blue text with your preferred one. The value 80 defines the default speed of the widget. You may like to change the value to increase or decrease the scrolling speed.