Jew 2.0 - Blogger Template

This Templates free. Please keep the credit link in the footer. Thank you for your support!

Demo DOWNLOAD

Customize Templates

0. Setting Mobile

1. Delete label "Asia" homepage

1.1 Delete label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Asia</h3>
      <a href='/search/label/Asia?&max-results=12'>View All</a>
    </div>
    <div id="style1_posts-Asia" class="style1-container">
      <div class="loading-overlay" id="style1_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

CSS

.style1-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 0px;
margin: 0 auto;
height: auto;
width: auto;
}

.style1-container div{
flex: calc(33.33% - 10px);
position: relative;
width: 100%;
}

.style1-container .post-image{
width: 100%;
position: relative;
overflow: hidden;
height: 200px;
border-radius: 12px;
display: grid;
align-content: center;
margin-bottom:5px;
}

.style1-container img{
height:100%;
width:100%;
}

.style1-container h2{
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
transition-duration: 0.3s;
}

.style1-container h2:hover{
color:#0381EF;
}

.style1-container p{
position: absolute;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
padding: 5px;
margin: 5px;
border-radius:20px;
font-weight: bold;
}

______________________________________________________

Delete everything ".style1-container" in @media only screen

Javascript

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);

1.2 Change label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Asia</h3>
      <a href='/search/label/Asia?&max-results=12'>View All</a>
    </div>
    <div id="style1_posts-Asia" class="style1-container">
      <div class="loading-overlay" id="style1_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);

1.3 Add more label

Ex - add label name: The Show

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>The Show</h3>
      <a href='/search/label/The Show?&max-results=12'>View All</a>
    </div>
    <div id="style1_posts-TheShow" class="style1-container">
      <div class="loading-overlay" id="style1_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

<script type='text/javascript'>
//<![CDATA[
function fetchAndShowPosts(label, elementId, numPosts, loadingId, isBigPost) {
  var postsContainer = $(elementId);
  var loadingOverlay = $(loadingId);

  loadingOverlay.show();

  $.get("/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=" + numPosts,
function (data) {
var html = '';
for (var i = 0; i < data.feed.entry.length; i++) {
var post = data.feed.entry[i];
var title = post.title.$t;
var link = post.link[4].href;
var imgUrl = post.media$thumbnail.url.replace("s72-c", "s1600");
var publishedDate = new Date(post.published.$t).toLocaleDateString();

html += '<div' + (isBigPost && i === 0 ? ' class="big-post"' : '') + '>';
html += '<div class="post-image"><a href="' + link + '"><img src="' + imgUrl + '" alt="' + title + '"></a></div>';
html += '<div class="post-title"><h2><a href="' + link + '">' + title + '</a></h2></div>';
html += '<p>' + publishedDate + '</p>';
html += '</div>';
}

          postsContainer.html(html);
          loadingOverlay.hide();
      },
      "jsonp"
  );
}

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);
fetchAndShowPosts("The Show", "#style1_posts-TheShow", 3, "#style1_loading", false);
fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");
fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");
//]]>
</script>

2. Delete label, change and add more "North America" and "South America" from homepage

2.1 Delete label

HTML

<div class='label-tit2'>
  <div class='label-title2'>
    <div class='label-titlein2'>
      <h3>North America</h3>
      <a href='/search/label/North America?&max-results=12'>View All</a>
    </div>
    <div id="style2_posts-NorthAmerica" class="style2-container">
      <div class="loading-overlay" id="style2_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

______________________________________________________

<div class='label-tit2'>
  <div class='label-title2'>
    <div class='label-titlein2'>
      <h3>South America</h3>
      <a href='/search/label/South America?&max-results=12'>View All</a>
    </div>
    <div id="style2_posts-SouthAmerica" class="style2-container">
      <div class="loading-overlay" id="style2_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

CSS

.style2-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}

.style2-container div{
position: relative;
}

.style2-container img{
height:100%;
width:100%;
}

.style2-container .big-post{
grid-column: span 2;
}

.style2-container .big-post .post-image{
height:280px;
}

.style2-container .post-image{
width: 100%;
position: relative;
overflow: hidden;
height: 150px;
border-radius: 12px;
display: grid;
align-content: center;
margin-bottom:0;
}

.style2-container .post-title{
width: 100%;
bottom: 0;
height:45px;
}

.style2-container .big-post .post-title{
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
color: white;
width: 100%;
bottom: 0;
border-radius: 0px 0px 20px 20px;
height:60px;
}

.style2-container .big-post .post-title h2{
padding: 0 5px 0 5px;
}

.style2-container .big-post .post-title h2:hover{
color:#7fccff;
}

.style2-container .post-title h2{
margin: 0;
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
transition-duration: 0.3s;
margin-top:5px;
}

.style2-container h2:hover{
color:#0381EF;
}

.style2-container p{
position: absolute;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
padding: 5px;
margin: 5px;
border-radius:20px;
font-weight: bold;
}

.style2-container .loading-overlay{
position: sticky;
top: 0%;
left: 0%;
right: 0%;
transform: translate(50%, -0%);
height: 271px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 1;
border-radius: 12px;
}

______________________________________________________

Delete everything ".style2-container" in @media only screen

Javascript

fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);

2.2 Change label

HTML

<div class='label-tit2'>
  <div class='label-title2'>
    <div class='label-titlein2'>
      <h3>North America</h3>
      <a href='/search/label/North America?&max-results=12'>View All</a>
    </div>
    <div id="style2_posts-NorthAmerica" class="style2-container">
      <div class="loading-overlay" id="style2_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

______________________________________________________


<div class='label-tit2'>
  <div class='label-title2'>
    <div class='label-titlein2'>
      <h3>South America</h3>
      <a href='/search/label/South America?&max-results=12'>View All</a>
    </div>
    <div id="style2_posts-SouthAmerica" class="style2-container">
      <div class="loading-overlay" id="style2_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);

2.3 Add more label

Ex - add label name: The Earth

HTML

<div class='label-tit2'>
  <div class='label-title2'>
    <div class='label-titlein2'>
      <h3>The Earth</h3>
      <a href='/search/label/The Earth?&max-results=12'>View All</a>
    </div>
    <div id="style2_posts-TheEarth" class="style2-container">
      <div class="loading-overlay" id="style2_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

<script type='text/javascript'>
//<![CDATA[
function fetchAndShowPosts(label, elementId, numPosts, loadingId, isBigPost) {
  var postsContainer = $(elementId);
  var loadingOverlay = $(loadingId);

  loadingOverlay.show();

  $.get("/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=" + numPosts,
function (data) {
var html = '';
for (var i = 0; i < data.feed.entry.length; i++) {
var post = data.feed.entry[i];
var title = post.title.$t;
var link = post.link[4].href;
var imgUrl = post.media$thumbnail.url.replace("s72-c", "s1600");
var publishedDate = new Date(post.published.$t).toLocaleDateString();

html += '<div' + (isBigPost && i === 0 ? ' class="big-post"' : '') + '>';
html += '<div class="post-image"><a href="' + link + '"><img src="' + imgUrl + '" alt="' + title + '"></a></div>';
html += '<div class="post-title"><h2><a href="' + link + '">' + title + '</a></h2></div>';
html += '<p>' + publishedDate + '</p>';
html += '</div>';
}

          postsContainer.html(html);
          loadingOverlay.hide();
      },
      "jsonp"
  );
}

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);
fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("The Earth", "#style2_posts-TheEarth", 5, "#style2_loading", true);
fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");
fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");
//]]>
</script>

3. Delete label, change and add more "Africa" and "Europe" from homepage

3.1 Delete label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Africa</h3>
      <a href='/search/label/Africa?&max-results=12'>View All</a>
    </div>
    <div id="style3_posts-Africa" class="style3-container">
      <div class="loading-overlay" id="style3_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

______________________________________________________


<div class='label-tit3'>
  <div class='label-title3'>
    <div class='label-titlein2'>
      <h3>Europe</h3>
      <a href='/search/label/Europe?&max-results=12'>View All</a>
    </div>
    <div id="style3_posts-Europe" class="style3-container">
      <div class="loading-overlay" id="style3_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

CSS

.style3-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}

.style3-container div{
position: relative;
}

.style3-container img{
height:100%;
width:100%;
}

.style3-container .post-image{
width: 100%;
position: relative;
overflow: hidden;
border-radius: 12px;
display: grid;
align-content: center;
margin-bottom:0;
object-fit: cover;
}

.style3-container .post-title{
width: 100%;
bottom: 0;
height:45px;
}

.style3-container .post-title h2{
margin: 0;
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
transition-duration: 0.3s;
margin-top:5px;
}

.style3-container h2:hover{
color:#0381EF;
}

.style3-container p{
position: absolute;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
padding: 5px;
margin: 5px;
border-radius:20px;
font-weight: bold;
}

.style3-container .loading-overlay{
position: sticky;
top: 0%;
left: 0%;
right: 0%;
transform: translate(50%, -0%);
height: 271px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 1;
border-radius: 12px;
}

______________________________________________________

Delete everything ".style3-container" in @media only screen

Javascript

fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");

3.2 Change label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Africa</h3>
      <a href='/search/label/Africa?&max-results=12'>View All</a>
    </div>
    <div id="style3_posts-Africa" class="style3-container">
      <div class="loading-overlay" id="style3_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

______________________________________________________

<div class='label-tit3'>
  <div class='label-title3'>
    <div class='label-titlein2'>
      <h3>Europe</h3>
      <a href='/search/label/Europe?&max-results=12'>View All</a>
    </div>
    <div id="style3_posts-Europe" class="style3-container">
      <div class="loading-overlay" id="style3_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");

3.3 Add more label

Ex - Add label name: News

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>News</h3>
      <a href='/search/label/News?&max-results=12'>View All</a>
    </div>
    <div id="style3_posts-News" class="style3-container">
      <div class="loading-overlay" id="style3_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

<script type='text/javascript'>
//<![CDATA[
function fetchAndShowPosts(label, elementId, numPosts, loadingId, isBigPost) {
  var postsContainer = $(elementId);
  var loadingOverlay = $(loadingId);

  loadingOverlay.show();

  $.get("/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=" + numPosts,
function (data) {
var html = '';
for (var i = 0; i < data.feed.entry.length; i++) {
var post = data.feed.entry[i];
var title = post.title.$t;
var link = post.link[4].href;
var imgUrl = post.media$thumbnail.url.replace("s72-c", "s1600");
var publishedDate = new Date(post.published.$t).toLocaleDateString();

html += '<div' + (isBigPost && i === 0 ? ' class="big-post"' : '') + '>';
html += '<div class="post-image"><a href="' + link + '"><img src="' + imgUrl + '" alt="' + title + '"></a></div>';
html += '<div class="post-title"><h2><a href="' + link + '">' + title + '</a></h2></div>';
html += '<p>' + publishedDate + '</p>';
html += '</div>';
}

          postsContainer.html(html);
          loadingOverlay.hide();
      },
      "jsonp"
  );
}

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);
fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");
fetchAndShowPosts("News", "#style3_posts-News", 4, "#style3_loading");
fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");
//]]>
</script>

4. Delete label "Oceania" from homepage

4.1 Delete label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Oceania</h3>
      <a href='/search/label/Oceania?&max-results=12'>View All</a>
    </div>
    <div id="style4_posts-Oceania" class="style4-container">
      <div class="loading-overlay" id="style4_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

CSS

.style4-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}

.style4-container div{
position: relative;
}

.style4-container img{
height:100%;
width:100%;
}

.style4-container .post-image{
width: 100%;
position: relative;
overflow: hidden;
border-radius: 12px;
display: grid;
align-content: center;
margin-bottom:0;
object-fit: cover;
}

.style4-container .post-title{
width: 100%;
bottom: 0;
}

.style4-container .post-title h2{
margin: 0;
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
transition-duration: 0.3s;
margin-top:5px;
}

.style4-container h2:hover{
color:#0381EF;
}

.style4-container p{
position: absolute;
top: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
padding: 5px;
margin: 5px;
border-radius:20px;
font-weight: bold;
}

.style4-container .loading-overlay{
position: sticky;
top: 0%;
left: 0%;
right: 0%;
transform: translate(50%, -0%);
height: 271px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 1;
border-radius: 12px;
}

______________________________________________________

Delete everything ".style4-container" in @media only screen

Javascript

fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");

4.2 Change label

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Oceania</h3>
      <a href='/search/label/Oceania?&max-results=12'>View All</a>
    </div>
    <div id="style4_posts-Oceania" class="style4-container">
      <div class="loading-overlay" id="style4_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");

4.3 Add more label

Ex - Add label name: Blogger templates

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <h3>Blogger templates</h3>
      <a href='/search/label/Blogger templates?&max-results=12'>View All</a>
    </div>
    <div id="style4_posts-Bloggertemplates" class="style4-container">
      <div class="loading-overlay" id="style4_loading">
        <i class="fa fa-spinner fa-spin"></i> Loading...
      </div>
    </div>
  </div>
</div>

Javascript

<script type='text/javascript'>
//<![CDATA[
function fetchAndShowPosts(label, elementId, numPosts, loadingId, isBigPost) {
  var postsContainer = $(elementId);
  var loadingOverlay = $(loadingId);

  loadingOverlay.show();

  $.get("/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results=" + numPosts,
function (data) {
var html = '';
for (var i = 0; i < data.feed.entry.length; i++) {
var post = data.feed.entry[i];
var title = post.title.$t;
var link = post.link[4].href;
var imgUrl = post.media$thumbnail.url.replace("s72-c", "s1600");
var publishedDate = new Date(post.published.$t).toLocaleDateString();

html += '<div' + (isBigPost && i === 0 ? ' class="big-post"' : '') + '>';
html += '<div class="post-image"><a href="' + link + '"><img src="' + imgUrl + '" alt="' + title + '"></a></div>';
html += '<div class="post-title"><h2><a href="' + link + '">' + title + '</a></h2></div>';
html += '<p>' + publishedDate + '</p>';
html += '</div>';
}

          postsContainer.html(html);
          loadingOverlay.hide();
      },
      "jsonp"
  );
}

fetchAndShowPosts("Asia", "#style1_posts-Asia", 3, "#style1_loading", false);
fetchAndShowPosts("North America", "#style2_posts-NorthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("South America", "#style2_posts-SouthAmerica", 5, "#style2_loading", true);
fetchAndShowPosts("Africa", "#style3_posts-Africa", 4, "#style3_loading");
fetchAndShowPosts("Europe", "#style3_posts-Europe", 4, "#style3_loading");
fetchAndShowPosts("Oceania", "#style4_posts-Oceania", 4, "#style4_loading");
fetchAndShowPosts("Blogger templates", "#style4_posts-Bloggertemplates", 4, "#style4_loading");
//]]>
</script>

5. Delete "Breadcrumbs navigation" from posts

HTML

                    <a class='post-meta' href='/'>Home</a>

                    <span class='post-meta'>
                      <b:loop values='data:post.labels' var='label'>

                        <a expr:href='data:label.url + &quot;?&amp;max-results=12&quot;' rel='tag'>
                          #<data:label.name/>
                        </a>
                      </b:loop>
                    </span>

                    <span class='post-meta'>
                      <data:post.title/>
                    </span>

CSS

.meta-data{
font-size:12px;
font-weight:400;
line-height:34px;
color:#aaa;
margin:0;
}

6. Delete "tags" from posts

HTML

                  <span class='tag-name'>

                    <span>Tags</span>
                      <b:loop values='data:post.labels' var='label'>

                        <a expr:href='data:label.url + &quot;?&amp;max-results=12&quot;' rel='tag'>
                          #<data:label.name/>
                        </a>
                      </b:loop>
                  </span>

CSS

.tag-name span{
background-color:#000;
color:#fff;
padding:3px 8px;
font-size:13px;
}

.tag-name a{
background-color:#f9f9fa;
color:#25a186;
padding:3px 8px;
font-size:13px;
}

7. Delete "You May Also Like" from posts

HTML

<div class='label-tit1'>
  <div class='label-title1'>
    <div class='label-titlein1'>
      <p>You May Also Like</p>
    </div>
    <div class='posts-container' id='random_posts'>
      <div class='loading-overlay' id='random_loading'>
        <i class='fa fa-spinner fa-spin'/> Loading...
      </div>
    </div>
  </div>
</div>

CSS

.posts-container{
display: flex;
flex-wrap: wrap;
gap: 15px;
width: 100%;
margin: 0 auto;
}

.posts-container > div{
flex: 1 1 calc(33.33% - 10px);
max-width: calc(33.33% - 10px);
position: relative;
}

.posts-container .post-image{
width: 100%;
border-radius: 12px;
overflow: hidden;
background-color: #eef1f5;
display: flex;
align-items: center;
justify-content: center;
}

.posts-container .post-image img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.posts-container p{
position: absolute;
top: 8px;
right: 8px;
margin: 0;
background: rgba(255,255,255,0.85);
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
z-index: 2;
}

.posts-container h2{
margin-top: 5px;
font-size: 17px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
transition-duration: 0.3s;
font-weight: bold;
color: #203656;
}

.posts-container h2 a:hover{
color: #0381EF;
}

______________________________________________________

Delete everything ".posts-container" in @media only screen

Code

<script type='text/javascript'>
//<![CDATA[
function fetchAndShowRandomPosts(elementId, numPosts, loadingId) {
  var postsContainer = $(elementId);
  var loadingOverlay = $(loadingId);

  loadingOverlay.show();

  $.get("/feeds/posts/default?alt=json-in-script",
      function (data) {
          var html = '';
          var entries = data.feed.entry;
          var indices = [];
          while(indices.length < numPosts){
              var randomIndex = Math.floor(Math.random() * entries.length);
              if(!indices.includes(randomIndex)){
                  indices.push(randomIndex);
              }
          }

          for (var i = 0; i < indices.length; i++) {
              var post = entries[indices[i]];
              var title = post.title.$t;
              var link = post.link[4].href;
              var imgUrl = post.media$thumbnail.url.replace("s72-c", "s1600");
              var publishedDate = new Date(post.published.$t).toLocaleDateString();

              html += '<div>';
              html += '<div class="post-image"><a href="' + link + '"><img src="' + imgUrl + '" alt="' + title + '"></a></div>';
              html += '<p>' + publishedDate + '</p>';
              html += '<h2><a href="' + link + '">' + title + '</a></h2>';
              html += '</div>';
          }

          postsContainer.html(html);
          loadingOverlay.hide();
      },
      "jsonp"
  );
}
fetchAndShowRandomPosts("#random_posts", 3, "#random_loading");
//]]>
</script>

8. Delete "About Author"

HTML

                  <div class='author_info'>
                    <h3>About Author</h3>
                    <div class='author_photo'>
                      <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url'/>
                    </div>
                    <b><data:post.author/></b>
                    <p>Hi, I&#39;m Kienn. This template is free. No ads, no redirect link. So you can delete everything that you want. Come to my website &quot;kientemplates.com&quot; for more templates. Every templates is free.</p>
                  </div>

CSS

.author_info{
padding:5px;
border:1px solid #e0e0e0;
margin-bottom:15px;
margin-top:15px;
border-radius:12px;
height:auto;
width:auto;
}

.author_info h3{
margin-bottom:10px;
padding-bottom:7px;
border-bottom:1px solid #e6e6ef;
color:#203656;
font-weight:400;
font-size:25px;
}

.author_info b{
color:#203656;
}

.author_photo{
min-height:70px;
min-width:70px;
float:left;
margin:0 0 0 10px;
}

.author_photo img{
padding:3px;
border:1px solid #ddd;
margin-right:10px;
height:70px;
width:70px;
border-radius:100px;
}

9. Delete "Top week, Top month, Top year"

HTML

<div class='boctabcss'> 
        <div class='tabcss'> 
        <div class='tabs effect'> 
          <input checked='checked' id='tab-1' name='tab' type='radio'/> <span href='#tab-item-1'>Top Week</span>
          <input id='tab-2' name='tab' type='radio'/> <span href='#tab-item-2'>Top Month</span> 
          <input id='tab-3' name='tab' type='radio'/> <span href='#tab-item-3'>Top Year</span> 
        <div class='line ease'/> 

        <!-- tab-content --> 

        <div class='tab-content'> 
        <section id='tab-item-1'> <b:section class='sidebar sidepro' id='tab1' maxwidgets='1' preferred='yes' showaddelement='yes'>
   <b:widget id='PopularPosts1' locked='false' title='Top Week' type='PopularPosts' version='1'>
     <b:widget-settings>
       <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
       <b:widget-setting name='showThumbnails'>true</b:widget-setting>
       <b:widget-setting name='showSnippets'>false</b:widget-setting>
       <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
          <b:if cond='data:title != &quot;&quot;'><h3><data:title/></h3></b:if>
          <div class='widget-content popular-posts'><ul><b:loop values='data:posts' var='post'> <li><b:if cond='!data:showThumbnails'>
                  <b:if cond='!data:showSnippets'>
        <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><b:else/>
        <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div>
        </b:if><b:else/><div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
        <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'><div class='item-thumbnail'>
        <a expr:href='data:post.href' expr:title='data:post.title'><b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
        <img alt='' border='0' expr:src='data:image'/></b:with></a></div></b:if><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <b:if cond='data:showSnippets'><div class='item-snippet'><data:post.snippet/></div></b:if></div>
        <div style='clear: both;'/> </b:if></li> </b:loop> </ul>
        </div>
        </b:includable>
   </b:widget>
 </b:section> </section> 
        <section id='tab-item-2'> <b:section class='sidebar sidepro' id='tab2' maxwidgets='1' preferred='yes' showaddelement='yes'>
   <b:widget id='PopularPosts2' locked='false' title='Top Month' type='PopularPosts'>
     <b:widget-settings>
       <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
       <b:widget-setting name='showThumbnails'>true</b:widget-setting>
       <b:widget-setting name='showSnippets'>false</b:widget-setting>
       <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
   </b:widget>
 </b:section> </section> 
        <section id='tab-item-3'> <b:section class='sidebar sidepro' id='tab3' maxwidgets='1' preferred='yes' showaddelement='yes'>
   <b:widget id='PopularPosts3' locked='false' title='Top Year' type='PopularPosts'>
     <b:widget-settings>
       <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
       <b:widget-setting name='showThumbnails'>true</b:widget-setting>
       <b:widget-setting name='showSnippets'>false</b:widget-setting>
       <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
   </b:widget>
 </b:section> </section>  
        </div> 
        </div> </div> </div>

CSS

<style type='text/css'>
nav{background-color:#FEE476;position:relative;width:100%;z-index:3;height:auto}
.ease {-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.tabcss {width:100%; margin:0 auto}
.tabs {background:#fff;position:relative}
.tabs &gt; input,.tabs &gt; span {width:33.33%;height:38px;line-height:38px;position:absolute;top:0;border-bottom:2px solid #ede8e8}
.tabs &gt; input {cursor:pointer;filter:alpha(opacity=0);opacity:0;position:absolute;z-index:1}
.tabs &gt; span {background:#E9FCFB;text-align:center;overflow:hidden}
.tabs &gt; span i,.tabs &gt; span {-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.tabs &gt; input:hover + span {background:rgba(255,255,255,.1)}.tabs &gt; input:checked + span {background:#fff}
.tabs &gt; input:check + span {border:1px solid #000}
.tabs &gt; input:checked + span,.tabs &gt; input:hover + span {color:#3498DB}
#tab-1,#tab-1 + span {left:0} #tab-2,#tab-2 + span {left:33.33%} #tab-3,#tab-3 + span {left:66.67%}
.tab-content {padding:40px 0 0;width:100%;min-height:310px}.tab-content section {width:100%;display:none}
.tab-content section h1 {margin-top:15px;font-size:100px;font-weight:100;text-align:center}
#tab-1:checked ~ .tab-content #tab-item-1 {display:block;padding: 5px;}
#tab-2:checked ~ .tab-content #tab-item-2 {display:block;padding: 5px;}
#tab-3:checked ~ .tab-content #tab-item-3 {display:block;padding: 5px;}
.effect .line {background:#3498DB;width:33.33%;height:2px;position:absolute;top:38px}
#tab-1:checked ~ .line {left:0} #tab-2:checked ~ .line {left:33.33%} #tab-3:checked ~ .line {left:66.67%}
.boctabcss{width:100%;height:auto;border:1px solid #ede8e8;margin:2px 0 12px;overflow:hidden}.boctabcss h3.title,.boctabcss h3{display:none}
.tabs .widget li{margin: 0;padding: 0;float:none}
</style>

______________________________________________________

Css body#layout:

body#layout .tab-content{
display:flex;
gap:10px;
padding:0;
min-height:auto;
align-items:flex-start;
}

body#layout .tab-content section{
display:block !important;
width:33.33%;
padding:0;
margin-bottom:0;
}

body#layout .tabs > input,
body#layout .tabs > span,
body#layout .effect .line{
display:none;
}

10. Delete "Follow us"

Code HTML

CSS

.sidebar-wrapper .LinkList ul li{
padding:0 5px;
margin:5px;
width:20%;
display:block;
height: 40px;
font-size:25px;
text-align:center;
border-radius:3px;
line-height:40px;
float:left;
}

/* Auto Font Awesome 6 icons for Link List */
.LinkList ul li a[href*="facebook.com"]::before,
.LinkList ul li a[title="facebook"]::before{
content: "\f39e";
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}

.LinkList ul li a[href*="instagram.com"]::before,
.LinkList ul li a[title="instagram"]::before{
content: "\f16d";
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}

.LinkList ul li a[href*="twitter.com"]::before,
.LinkList ul li a[href*="x.com"]::before,
.LinkList ul li a[title="twitter"]::before{
content: "\e61b";
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}

.LinkList ul li a[href*="youtube.com"]::before,
.LinkList ul li a[title="youtube"]::before{
content: "\f167";
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}

.LinkList ul li a[href*="tiktok.com"]::before,
.LinkList ul li a[title="tiktok"]::before{
content: "\e07b";
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}

11. Delete "Follow us" from footer

HTML

CSS

.footer-content .fa{
float:left;
margin-left:7px;
font: normal normal normal 14px/1 FontAwesome;
background-color:#3e3e3e;
color:#fff;
padding:9px;
border-radius:5px;
}

Jew 2.0 - Blogger Template

Customize Templates

0. Setting Mobile

1. Delete label "Asia" homepage

1.1 Delete label

1.2 Change label

1.3 Add more label

Ex - add label name: The Show

2. Delete label, change and add more "North America" and "South America" from homepage

2.1 Delete label

2.2 Change label

2.3 Add more label

3. Delete label, change and add more "Africa" and "Europe" from homepage

3.1 Delete label

3.2 Change label

3.3 Add more label

4. Delete label "Oceania" from homepage

4.1 Delete label

4.2 Change label

5. Delete "Breadcrumbs navigation" from posts

6. Delete "tags" from posts

7. Delete "You May Also Like" from posts

8. Delete "About Author"

9. Delete "Top week, Top month, Top year"

10. Delete "Follow us"

11. Delete "Follow us" from footer

Comments

Post a Comment