Creating language tabs on the post

To use the language tabs - like on the blog Simply Berenica - you will have to deal with some html codes. But it's just a little and it's not that hard :)

Let's add the codes to your template. First, make a backup of your current theme or work on a test blog to avoid any mess.

Adding the CSS code

You can either paste the code on the Advanced option of the Theme Designer or paste it directly on your HTML code. In this tutorial, I will follow along with the second option because you will have to go there anyway.

  1. Go to Theme
  2. Click on the arrow next to the Customize button
  3. Click on Edit Html
  4. Once the code had loaded, click anywhere inside it to enable the search
  5. Use ctrl+f or cmd+f to open the search box
  6. Search for end CSS
  7. Above the line, paste the following code and save the changes.

ul.post-tab-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  text-align: center;
}

ul.post-tab-links li {
  background: #faf8f4;
  border: 1px solid #000;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0 0.5%;
  padding: 20px 10px;
  transition: all linear 0.15s;
  text-transform: uppercase;
  text-align: center;
  width: 200px;
}

ul.post-tab-links li.current {
  background: #000;
  color: #fff;
}

.post-tab-content {
  display: none;
  background: none;
  padding: 0;
}

.post-tab-content.current {
  display: inherit;
}

ul.post-tab-links > [data-tab="tab1"]::after {
  content: "ENGLISH";
}

ul.post-tab-links > [data-tab="tab2"]::after {
    content: "SLOVENSKY";
}



Adding the jquery code

the jquery is responsible to make the switching of the tabs when we click on them

  1. still on the HTML code, repeat the process to open the search box
  2. search for ]]></b:skin>
  3. Below the line, paste the following code and save the changes

<script>//<![CDATA[
  (function($) {
  $(document).ready(function(){
      $('ul.post-tab-links li').click(function(){
          var tab_id = $(this).attr('data-tab');

          // Make the old tab inactive.
          $('ul.post-tab-links li').removeClass('current');
          $('.post-tab-content').removeClass('current');
          
          // Make the clicked tab active.
          $(this).addClass('current');
          $("#"+tab_id).addClass('current');
      })
  })
    })(jQuery);
//]]></script>


Adding the HTML code on your posts

The code ahead is the one responsible for creating the tabs on the posts. You have to paste directly on your post, on the "HTML" tab. If you plan to use the tabs on all of your posts, I recommend using the code as a "post template" on your Settings page. Done that way, the code will be already on your posts when you create a new one and you won't have to copy and paste the code every time. 

To create a post template:
  1. Go to Settings
  2. Scroll down until Posts
  3. Click on Post template (optional)
  4. Paste the code below and click on the save link

<div class='post-tabs'>
  <ul class='post-tab-links'>
    <li data-tab="tab1"></li>
    <li data-tab="tab2"></li>
  </ul>


  <div id='tab1' class='post-tab-content'>
    first language content goes here inside these two lines
  </div>

  <div id='tab2' class='post-tab-content'>
    Second language content goes here inside these two lines
  </div>

</div>



Now you can create a new post, switch to the HTML tab and check if the code is being displayed.

Contact Form