Home
Blogging

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

How to use column shortcodes in Blogger? You can integrate this Advanced Blogger column to display your Blogger template or WordPress theme features.
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.

html-cod-for-columns

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.
How to use column shortcodes in Blogger?
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>



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}



.themefeaturetext{margin-left:70px;margin-top:-40px;float:left}







.themefeature:nth-child(2n+2){margin-right:0}



.themefeature .fa{margin-left:10px;float:left;font-size:38px;color:#FA5356}



.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.

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

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>


We continuously test our templates so you will know they are always compatible with the latest version of Blogger Platform.</div>







Compatible with Latest Blogger</h2>

</div>


<div class="themefeaturetext">

<!-- End Themefeature -->



<div class="themefeature">



<i class="fa fa-code"></i>

<h2>


<!-- End Themefeature -->

No Encrypted Scripts</h2>



All our Premium template will be deliver to you without Encrypted Scripts</div>

</div>
<div class="themefeature">
<i class="fa fa-file-o"></i>


We have written detailed documentation which guides you through the process of using your new template.</div>







<div class="themefeaturetext">

<h2>


Extensive Documentation Files</h2>

</div>
<!-- End Themefeature -->


<i class="fa fa-support"></i>

<div class="themefeature">


<!-- End Themefeature -->







<div class="themefeaturetext">

<h2>


We have customer support system, if you ever need any help with your template.</div>

Customer Support</h2>


<div class="themefeature">

</div>


</div>







<i class="fa fa-laptop"></i>

<div class="themefeaturetext">


Fully Responsive Design</h2>

<h2>


All our templates are responsive so they look great no matter what size screen you are viewing them on.</div>



We include just the right amount of useful widget areas and sidebars so you can place your content.</div>







<!-- End Themefeature -->



<div class="themefeature">



<i class="fa fa-list"></i>

<div class="themefeaturetext">


</div>

<h2>
Widgetized Areas</h2>


<div class="themefeature">

<!-- End Themefeature -->


<!-- End Themefeature by www.bloggerspice.com -->







<i class="fa fa-cogs"></i>

<div class="themefeaturetext">


Template Customizer</h2>

<h2>


Upload a logo, change your theme colors, change footer text and add tracking scripts all in real-time.</div>

</div>
<div class="themefeature">


<div class="themefeature">







<i class="fa fa-font"></i>

<div class="themefeaturetext">


We include FontAwesome Icons &amp; Hundreds of Google Fonts to Choose from to customize your site.</div>

<h2>
Icons and Fonts</h2>


<i class="fa fa-columns"></i>

</div>
<!-- End Themefeature -->


<div class="themefeaturetext">







<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>
<h2>


</div>







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 -->



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 multi-column 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.

6 comments

  1. Hallo Rabbi,

    How are you?

    I need your help again. Actually i am trying to add Contact Form in my blogger template. When i add Contact Form it is added successfully but it is not shown in my blogger layout and also when i see the preview or visit the page there is no contact form appear. Will you please help me

    Thanks in advance
    • Hi Sumit,

      Please locate the below code line from your Blogger theme


      #navbar-iframe,.ContactForm,.comment-content a {display:none !important;}


      now replace it by below code line.


      #navbar-iframe{display:none !important;}


      I hope now contact widget will display in your layout section.
      Thank you. :up
  2. Asslam o Alekum Rabbi Khan

    its Working Thankxxx..
    • Walaikumus salam Brother
      I am very glade to hear that. :up
Go Up