Add the html code in blog page

<div class=”row”>
<div class=”blog-posts mainblog”>

{% assign blPost = “News,Sourcing,Materials” | split: ‘,’ %}
{% assign count =0 %}
{% assign i = 0 %}
{% assign a = 0 %}
<div class=”tabheading”>
<ul class=”tabs”>
{% for bloghead in blPost %}
{% assign blg = blPost[i] %}
<li class=”tab-link {% if i == 0 %} current {% endif %}” data-tab=”tab_{{i}}”>{{ blogs.[blg].title }}</li>
{% assign i = i | plus: 1 %}
{% endfor %}
<li class=”tab-link” data-tab=”tab_{{i}}”>See All</li>
</ul>
</div>

{% for blogpost in blPost %}
{% assign blg = blPost[count] %}
<div class=”allblog_post tab-content {% if count == 0 %} current {% endif %}” id=”tab_{{count}}”>

{% for article in blogs.[blg].articles limit:5 %}

<div class=”col-sm-4 col-md-4 col-xs-12″>
<div class=”blogimg”>
<a href=”{{ article.url }}”>
{% if article.image.src %}
<img src=”{{ article.image.src | img_url: ‘medium’ }}”>
{% else %}
{% if article.content contains “<img” %}
{% assign src = article.content | split: ‘src=”‘ %}
{% assign src = src[1] | split: ‘”‘ | first | replace: ‘//cdn’, ‘http://cdn’; | replace: ‘http:http://’;, ‘http://’; | remove: ‘https:’ %}
<img src=”{{ src }}”>
{% endif %}

{% endif %}
</a>
</div>

<div class=”blogcondiv”>
<p class=”blogtitle”> <a href=”{{ article.url }}”>{{ article.title }}</a></p>
<p class=”blogcontent”> {{ article.content | strip_html | truncate:160 }} </p>
</div>

</div>

{% endfor %}
</div>
{% assign count = count | plus: 1 %}

{% endfor %}

<div class=”allblog_post tab-content” id=”tab_{{count}}”>
{% for blogposts in blPost %}
{% assign blgpp = blPost[a] %}
<div class=”allblog_post”>
<h1>{{ blogs.[blgpp].title }}</h1>
{% for article in blogs.[blgpp].articles limit:5 %}

<div class=”col-sm-4 col-md-4 col-xs-12″>
<div class=”blogimg”>
<a href=”{{ article.url }}”>
{% if article.image.src %}
<img src=”{{ article.image.src | img_url: ‘medium’ }}”>
{% else %}
{% if article.content contains “<img” %}
{% assign src = article.content | split: ‘src=”‘ %}
{% assign src = src[1] | split: ‘”‘ | first | replace: ‘//cdn’, ‘http://cdn’; | replace: ‘http:http://’;, ‘http://’; | remove: ‘https:’ %}
<img src=”{{ src }}”>
{% endif %}

{% endif %}
</a>
</div>

<div class=”blogcondiv”>
<p class=”blogtitle”> <a href=”{{ article.url }}”>{{ article.title }}</a></p>
<p class=”blogcontent”> {{ article.content | strip_html | truncate:160 }} </p>
</div>

</div>

{% endfor %}
</div>
{% assign a = a | plus: 1 %}

{% endfor %}
</div>

</div>
</div>

 

Add the Css in .css file

<style>
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: black;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
font-size:17px;
}

ul.tabs li.current{
background: #ededed;
color: #222;
font-size: 17px;
font-weight: bold;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-left: 1px solid gray;
}

.tab-content{
display: none;
background: #ededed;
padding: 15px;
}

.tab-content.current{
display: flow-root;
}
.allblog_post h1 {
text-align: center;
}
</style>

Add js code in .js file

<script>
$(document).ready(function(){

$(‘ul.tabs li’).click(function(){
var tab_id = $(this).attr(‘data-tab’);

$(‘ul.tabs li’).removeClass(‘current’);
$(‘.tab-content’).removeClass(‘current’);

$(this).addClass(‘current’);
$(“#”+tab_id).addClass(‘current’);
})

})
</script>

 

Open chat