Monday, 7 June 2021

Free Blogspot Templates

Free Blogspot Templates
June 07, 2021

 


Free Blogspot Templates

Free Premium Blogspot Template From Jettheme. Free and premium blogger template owned by jettheme com. Already given permission to be shared with bloggers who use blogspot.


Search Keyword: Free blogger templates, free blog templates, free blogspot templates , free blog templates , free blogger templates, free templates, blogspot themes, blogger themes, blog themes, blogger themes, seo blogger templates, latest free blog templates, premium blogspot templates free


The template mode has 2 lists and a grid, what is being shared now for free is a grid mode template.


The speed load can be seen from the following GTMetrix reporttri



Here is a guide on how to install the correct jettheme template

First backup the previous theme, make sure to backup and save the file, then please go to Theme> Edit HTML

Use the blank template below by copying the code below then replacing all the existing code in the previous theme. Its function is to completely reset the previous theme settings.

BLANK BLOGSPOT TEMPLATE FORMAT


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>a
<b:section id='1' showaddelement='yes'/>
<b:if cond='!data:view.isPreview'>
&lt;div id=&quot;element-r&quot; style=&quot;display:none&quot;&gt;
&lt;textarea disabled readonly&gt;
&lt;!--</b:if>
</body>
<b:if cond='!data:view.isPreview'>
--&gt;&lt;/textarea&gt;&lt;/div&gt;
<script type='text/javascript'>//<![CDATA[
document.getElementById('element-r').outerHTML = '';
const _WidgetManager = {};_WidgetManager['_PopupConfig'] = function(){};
//]]></script></b:if><b:if cond='!data:view.isPreview'>
&lt;/body&gt;
</b:if>
</html>

Then save, and finally go to theme page > Use new.xml file to restore/restore input

Finally, don't forget to go to "Themes" > "Cellular Settings" and select "Desktop".

JetTheme Template Settings

Maybe some of you are still confused about how to set the JetTheme template, I will give detailed advice on settings in terms of appearance, layout and SEO.

Settings in HTML theme

The first step is to edit in the HTML theme page. Due to the limitations of bloggers, this is very unfortunate. Some settings need to be made in HTML theme, so please go to "Theme" > "Edit HTML" page

I have checked what to fill with ##### (5x pager), please find the following code by directing your customer to the code page and then click "CTRL + F". This is a top-down explanation

1. Tagline Title on the homepage

<b:with value='data:view.isHomepage ? data:blog.title + &quot; – ##### &quot; : 
Replace ##### with your title tagline which can also improve SEO, as in the homepage title: JetTheme-Blogger No.1 template, so you only enter the No.1 Blogger template.
<b:with value='data:view.isHomepage ? data:blog.title + &quot; – Template Blogger No.1 &quot; : 

2. Blog page image

<b:with value='data:view.featuredImage ? data:view.featuredImage : &quot; ##### &quot;' var='meta_image'>
Here, you need the image URL for the cover of the home page. If there are no images on other pages, you need the default image URL. To get an image, please upload your image or logo in a blog post, with a width of about 1600px.

https://3.bp.blogspot.com/-tPL1gFodXic/XkpynVR_i5I/AAAAAAAAADk/LSSXRzeaxAk4gxcrqLkRzmL93cUpwpCaACPcBGAYYCw/s1600/jettheme-cover.png
Then replace it with your image URL without spaces.

<b:with value='data:view.featuredImage ? data:view.featuredImage : &quot;https://3.bp.blogspot.com/-tPL1gFodXic/XkpynVR_i5I/AAAAAAAAAk/LSSXRzeaxAk4gxcrqLkRzmL93cUpwpCaACPcBGAYYCw/s1600/jettheme-cover.png&quot;' var='meta_image'>

3. Blog Homepage Description

<b:with value='data:view.description ? data:view.description : &quot; ##### &quot;' var='meta_desc'>
Enter a blog description. This is the same as the description in the settings, but if you have filled in the description settings, you can skip this description.

<b:with value='data:view.description ? data:view.description : &quot; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, sapien et auctor bibendum &quot;' var='meta_desc'>

4. Image Logo in Schema SEO

<meta content=' ##### ' itemprop='url'/>
Enter the URL of the same blog logo image as the cover above, upload it to the post and get the URL, then paste it as follows without spaces.
<meta content='https://1.bp.blogspot.com/-iwTCte_GQsQ/X0I4tBbKXlI/AAAAAAAAAKU/uM4D_971lm0TWC-JywNttslAq7E2OOpPwCPcBGAsYHg/s1600/jettheme-logo.png' itemprop='url'/>

Logo and website icon settings

In the logo in the "Layout" section, you have many options, such as entering Blog name, URL, data: image, SVG.

For favorite icons, you can upload them in the "Settings" > "Favorite Icons" section

Navigation menu settings

To use the menu settings from the drop-down menu, you can enter the menu between the menus with the # sub-start and # sub-end links. Lazyload Settings For JetTheme Templates Slow loading of images / images First, you can upload them on media as usual, then enter HTML in the upper left corner to display them. Additional noscript code like the following example:

<noscript>
<p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://1.bp.blogspot.com/--aAiL2sNaTU/Xq8NpeHV_-I/AAAAAAAAAFs/n9cz4Z6i2_g37CgGT4Id_3D-tUSCwUAjQCPcBGAYYCw/s320/lamp.jpg" width="320" /></a></div><br />&nbsp;<p></p>
</noscript>

Lazy Loading Adsense 

Lazyload for adsense, you can activate it in Theme> Edit HTML, then look for the following code: 
const lazyadsense = false  
Change false to true  
const lazyadsense = true 

Lazyload iframe, video, audio  

Applies to Lazyload except Iframe (Youtube, Google Maps, etc.), video and audio, and other images.

<iframe class="lazyload" title="Youtube"
  width="400" height="300" allowfullscreen
  allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"
  data-style="background: url(https://img.youtube.com/vi/Uz970DggW7E/hqdefault.jpg) 50% 50% / cover no-repeat;"
  data-src="https://www.youtube.com/embed/Uz970DggW7E"></iframe>

<picture class="lazyload">
  <source media="(min-width:800px)" data-srcset="https://picsum.photos/800/1200">
  <source media="(min-width:600px)" data-srcset="https://picsum.photos/600/900">
  <img data-src="https://picsum.photos/200/300" alt="Photo" style="width:auto;">
</picture>

<audio class="lazyload" controls>
  <source data-src="sound.ogg" type="audio/ogg">
  <source data-src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<video class="lazyload" width="320" height="240" controls>
  <source data-src="movie.mp4" type="video/mp4">
  <source data-src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 






Share This :
SUBSCRIBE TO OUR NEWSLETTER

No comments: