How to Add Multi-Column Theme Featured Content in Blogger?

You have already noticed in WordPress theme selling sites they frequently display theme features within multiple boxes. Generally it shows s...

Related posts:

You have already noticed in WordPress theme selling sites they frequently display theme features within multiple boxes. Generally it shows side by side in 2 columns. In many website this job done by using simple image. But if you use large image then it can affect your content loading speed. In Blogger site this is more difficult to create multi-box inside Blog post. Even in the most popular web design selling site themeforest you will see they are simply using large image to display theme or template features inside content body. 

Multi-Column Theme Featured Content in Blogger Blog Post

But I will show you a simple way to create multi-Column Theme or template Featured Content in Blogger Blog post. However to make it more attractive I will use FontAwesome icons. Please follow the guidelines to integrate multi-column Theme Featured Content in Blogger Blog post. 

Step #1: Log in to your Blogger Account and go to Dashboard

Step #2: From vertical options click on Template ->Edit HTML->

Step #3: Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #4: (Optional) If your Blogger template already containing FontAwesome file then simply skip this step, If not yet integrated then add the below FontAwesome script before/above </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

  Step #5: Once you added the FontAwesome script, copy the below code block and Paste it code Before/above ]]></b:skin>

/* Trick by www.bloggerspice.com */
#themefeatures{text-align:left;padding-top:20px;padding-bottom:10px;border-bottom:3px solid #FAFBF9;border-top:3px solid #FAFBF9}
.themefeature{width:44%;display:inline-block;vertical-align:top;margin-right:10px;margin-left:10px;margin-bottom:15px}
.themefeature:nth-child(2n+2){margin-right:0}
.themefeature .fa{margin-left:10px;float:left;font-size:38px;color:#FA5356}
.themefeaturetext{margin-left:70px;margin-top:-40px;float:left}
.themefeature h2{color:#243746;font-size:22px;margin-bottom:20px}

Step #6: You can simply change the multi-column icon color by altering color:#FA5356  color code. Once you have change the color code click Save template from the top.

We have completed the CSS Part that will help to tweak your multi-column appearance. But without HTML this is pointless. HTML script you have to add each time on specific post where you want to display the theme or template features. Please follow the instruction from below. 

Step #1: Go to your Blogger Dashboard Click Posts -> New post you will head to post editor.

Step #2: Now switch to HTML editor from Compose editor. Here you should add the widget code.

Step #3: Copy the HTML script from below. Remember that in some blogger site after adding script if you switch to Compose editor and publish the post then script can be break. So first write your post in Compose editor and then switch to HTML editor and add the widget script.

<div id="themefeatures">
<div class="themefeature">
<i class="fa fa-check-square-o"></i>
<div class="themefeaturetext">
<h2>
Compatible with Latest Blogger</h2>
We continuously test our templates so you will know they are always compatible with the latest version of Blogger Platform.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-code"></i>
<div class="themefeaturetext">
<h2>
No Encrypted Scripts</h2>
All our Premium template will be deliver to you without Encrypted Scripts</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-file-o"></i>
<div class="themefeaturetext">
<h2>
Extensive Documentation Files</h2>
We have written detailed documentation which guides you through the process of using your new template.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-support"></i>
<div class="themefeaturetext">
<h2>
Customer Support</h2>
We have customer support system, if you ever need any help with your template.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-laptop"></i>
<div class="themefeaturetext">
<h2>
Fully Responsive Design</h2>
All our templates are responsive so they look great no matter what size screen you are viewing them on.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-list"></i>
<div class="themefeaturetext">
<h2>
Widgetized Areas</h2>
We include just the right amount of useful widget areas and sidebars so you can place your content.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-cogs"></i>
<div class="themefeaturetext">
<h2>
Template Customizer</h2>
Upload a logo, change your theme colors, change footer text and add tracking scripts all in real-time.</div>
</div>
<!-- End Themefeature by www.bloggerspice.com -->
<div class="themefeature">
<i class="fa fa-font"></i>
<div class="themefeaturetext">
<h2>
Icons and Fonts</h2>
We include FontAwesome Icons &amp; Hundreds of Google Fonts to Choose from to customize your site.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-columns"></i>
<div class="themefeaturetext">
<h2>
Custom Widgets</h2>
We include our own widgets for Social Media, Displaying Advertising and showing off your Flickr images.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-globe"></i>
<div class="themefeaturetext">
<h2>
Localized and Multi Language Compatible</h2>
All our template are fully localized so you can translate them into any language you choose.</div>
</div>
<!-- End Themefeature -->
</div>

Step #4: Finally hit the Publish button to make it live.

Check your Blog post now and see beautiful multi-column theme featured in your Blog post. Some pre-caution you should take after adding this widget. In future if you edit your post then you must edit your post in HTML editor and update it in HTML editor. This multicolumn featured table simply crushes if you update your content in Compose editor.

I hope you would like this widget and you can discuss below for any further help. I would try to help you with my level best. Thank you.