Template Blogspot Gratis dari Jettheme

Sanwitana

14 Sep, 2021

Template Blogspot Gratis

Template Blogger Gratis namun berkualitas premium dari jettheme ini sangat powerfull dan bebas untuk dibagikan dan dikostumisasi begitu kata pembuatnya sebagaimana dapat dilihat di website resminya jettheme.com dan grup telegram jettheme.

Template ini mengusung mode grid untuk tampilan homepage-nya. Mode homepage seperti ini memang sedang menjadi tampilan favorit bagi banyak blogger di dunia internet.

Untuk speed loadnya jangan diragukan lagi, berikut hasil report dari GTMetrix

Tutorial Pengaturan Template Jettheme

Bagi teman-teman yang ingin memasang template jettheme ini silakan pahami dan cermati cara melakukan penyetelan berikut:

Sebelum memulainya silakan masuk ke halaman Tema/Theme >Edit HTML

1. Tagline Title pada Homepage

<b:with value='data:view.isHomepage ? data:blog.title + &quot; – ##### &quot; :

ubah ##### dengan tagline judul anda, hal ini juga untuk meningkatkan SEO, contoh judul homepage : JetTheme – Template Blogger No.1, jadi anda hanya memasukan Template Blogger No.1.

<b:with value='data:view.isHomepage ? data:blog.title + &quot; – Template Blogger No.1 &quot; :

2. Gambar/Cover pada Homepage

<b:with value='data:view.featuredImage ? data:view.featuredImage : &quot; ##### &quot;' var='meta_image'>

Disini dibutuhkan url gambar untuk Cover Halaman depan atau default jika halaman lain tidak mempunyai gambar, untuk mendapatkan gambar silahkan upload gambar atau logo anda pada post blogger dengan besar lebar kurang lebih 1600px.

https://3.bp.blogspot.com/-tPL1gFodXic/XkpynVR_i5I/AAAAAAAAADk/LSSXRzeaxAk4gxcrqLkRzmL93cUpwpCaACPcBGAYYCw/s1600/jettheme-cover.png

Lalu ganti dengan url gambar anda seperti ini, tanpa space.

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

<b:with value='data:view.description ? data:view.description : &quot; ##### &quot;' var='meta_desc'>

Masukan Descripsi untuk blog anda, ini sama halnya dengan mengisi Descripsi pada setting, namun jika anda sudah mengisi pada Descripsi setting anda bisa melewati ini.

<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. Gambar Logo pada Schema SEO

&quot;url&quot; : &quot;#####&quot;

Masukan url gambar logo blog anda, ini sama halnya dengan cover diatas upload ke post dan ambil urlnya, paste seperti dibawah ini, tanpa space.

&quot;url&quot; : &quot;https://1.bp.blogspot.com/-iwTCte_GQsQ/X0I4tBbKXlI/AAAAAAAAAKU/uM4D_971lm0TWC-JywNttslAq7E2OOpPwCPcBGAsYHg/s1600/jettheme-logo.png&quot;

Pengaturan Logo dan Favicon

Pada logo dibagaian Tataletak, anda mempunyai banyak option seperti memasukan Nama Blog, URL, data:image, SVG.

Untuk favicon, anda bisa menguploadnya pada bagian Setting > Favicon

Pengaturan Menu Navigation

Pengaturan Menu untuk mengunakan Dropdown anda bisa memasukan menu diatara menu dengan link #sub-start dan #sub-end

Pengaturan Halaman Sitemap

Buat halaman/page baru, buat judul contoh Daftar Isi/Sitemap, setelah itu masukan kode dibawah ini kedalam post pada Mode HTML

<div class="custom-posts sitemap-posts" data-label="false" data-func="sitemap_temp" data-callback="sitemap_cb" data-items="1"><div class='text-center'><div class='spinner-grow text-light' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>

Pengaturan Newsletter Menggunakan Follow.it

Sejak newsletter bawaan blogger yaitu feedburner mulai menghentikan lanyanannya, kami JetTheme memutuskan untuk beralih menggunakan newsletter pada follow.it, pada jettheme edisi terbaru yaitu jettheme versi 2.8 untuk newsletter sudah otomatis menggunakan follow it dan tanpa perlu seting ulang seperti versi sebelumnya yang harus melakukan copy pasti script action dari web follow.it

Contact Form Jettheme

Buat halaman/page baru, buat judul contoh Formulir/Contact, setelah itu masukan kode dibawah ini kedalam post pada Mode HTML

<form class='contact-form-blogger'>
  <div class='contact-form-wrap row'>
    <div class='col-md-6 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-name'>Your Name</label>
      <input class='form-control bg-transparent jt-border-light text-reset' id='field-name' name='name' required='' type='text' placeholder='Enter Name'/>
    </div>
    <div class='col-md-6 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-email'>Email Address</label>
      <input class='form-control bg-transparent jt-border-light text-reset' id='field-email' name='email' required='' type='email' placeholder='Enter Email'/>
    </div>
    <div class='col-12 mb-3'>
      <label class='form-label fs-7 fw-bold' for='field-message'>Message</label>
      <textarea class='form-control bg-transparent jt-border-light text-reset' id='field-message' name='message' required='' rows='3' placeholder='Enter Message'></textarea>
    </div>
    <div class='col-12 mb-3'>
      <button class='btn btn-sm fw-bold py-2 px-5 jt-btn-primary' type='submit'>SEND</button>
    </div>
  </div>
  <div
       data-success="Thank you message sent successfully."
       data-error="Message failed to send. Please try again an hour later."
       class="contact-form-msg d-none border border-3 rounded text-center p-3 fs-7">
  </div>
</form>