Setting Template Blogger
Bagi yang menggunakan template blogger dari JetTheme, postingan ini dibuat untuk memudahkan dalam mengatur setting dari segi tampilan, layout, dan SEO.
Pengaturan template memiliki fungsi yang berbeda-beda sesuai dengan keinginan pengguna. Namun sering kali blogger pemula salah setting dalam pengaturan blogger. Ini, tentu saja, dapat menyebabkan kesalahan.
Untuk menghindari hal-hal yang tidak diinginkan agar tidak terjadi error, Anda bisa mengikuti beberapa pengaturan yang direkomendasikan untuk pengguna template blogger jettheme.
Pengaturan Logo dan Favicon
Pada bagian logo bisa anda sesuaikan dari bagian layout pada dashboard blogger. Maka akan ada banyak widget di sana. Dan Anda dapat mengedit widget Logo. Ada banyak opsi yang bisa kita terapkan. Anda dapat memasukkan Nama Blog, URL, data:image dan SVG di sana.
Sedangkan untuk favicon Anda bisa upload langsung di blogger. Untuk favicon, kamu bisa menguploadnya dengan cara masuk ke Dashboard Blogger Pilih menu Setelan Cari bagian Favicon.
Pengaturan Menu Navigation
Di menu navigasi Anda dapat mengatur sendiri dari bagian tata letak juga. Jika Anda ingin mengubah nama menu Anda, cukup edit di bagian widget Menu. Pengaturan menu untuk menggunakan Dropdown Anda dapat memasukkannya di antara menu dengan tautan #sub-start dan #sub-end.
Pengaturan Halaman Sitemap
Sitemap adalah daftar konten blog yang dapat memudahkan pengunjung untuk memilih artikel berdasarkan label, tag, atau kategori yang terstruktur dengan jelas.
Bagi Anda yang belum mengerti cara membuat halaman sitemap di blogger tidak perlu khawair. Untuk membuat halaman sitemap di blogger pastikan anda sudah memiliki beberapa postingan.
Perlu diketahui bahwa sebelum membuat sitemap di blogger Anda harus memposting artikel. Ini bertujuan agar sitemap yang akan kita buat di blog dapat membaca semua isi postingan yang ada.
Berikut ini cara membuat sitemap di blogger:
- Pertama masuk ke Blogger
- Pilih menu Halaman
- Buat judul halaman dengan nama Sitemap Isikan Deskripsi Penelusuran
- Pada halaman postingan pilih Tampilan HTML
- Kemudian salin kode Sitemap Blogger Jettheme
- Selanjutnya Paste kode di halaman tampilan html
- Terakhir Publikasikan
- Selesai...
Pengaturan Halaman Contact Form
Contact form adalah salah satu halaman yang tidak pernah absen dalam sebuah website anatomi. Pasalnya, dengan bentuk yang sederhana ini, pengunjung dapat mengirimkan keluhan berupa pertanyaan, kritik atau saran langsung kepada pengelola website.
Berikut ini cara membuat contact form di blogger:
1. Pertama masuk ke Blogger
2. Pilih menu Halaman
3. Buat judul halaman dengan nama Contact Form Isikan Deskripsi Penelusuran
4. Pada halaman postingan pilih Tampilan HTML
5. Kemudian salin kode di bawah ini
2. Pilih menu Halaman
3. Buat judul halaman dengan nama Contact Form Isikan Deskripsi Penelusuran
4. Pada halaman postingan pilih Tampilan HTML
5. Kemudian salin kode di bawah ini
<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>
6. Selanjutnya Paste kode di halaman tampilan html
7. Terakhir Publikasikan
8. Selesai...
Pengaturan Kode Tema HTML
Karena JetTheme V.2.8 Pengaturan dalam tema HTML tidak lagi diperlukan, Anda hanya perlu menginstal dan menggunakan konfigurasi blogger dan Tema Jettheme akan berjalan dengan baik.
Jika kamu masih menemukan code ##### seperti ini di judul berarti kamu masih memakai tema versi dibawah nya, kami sangat menyarankan untuk mengupgrade tema JetTheme kamu.
Namun fitur tersebut tidak kami hilangkan, melainkan mengubahnya agar lebih mudah ditemukan walaupun anda tidak mengerti kodenya, disini kami akan menjelaskan cara menggunakannya, jadi silahkan masuk ke Dasboard Blogger Pilih Tema Klik Opsi SESUAIKAN ▼ Edit HTML.
Ketika kamu membuka Edit HTML, kamu akan melihat tulisan seperti dibawah ini.
-------------------------
# JetTheme v.2.8 Setting #
-------------------------
Tepat di bawahnya kita akan menemukan fitur pengaturan JetTheme, Anda tinggal memperhatikan deskripsinya saja agar tidak salah, dan isikan bagian value=" ", berikut keterangan serta penjelasannya:
1. Tagline Title pada Homepage
<Variable name="tagline" description="Tagline" type="string" value=""/>isi value=" " dengan tagline judul kamu, hal ini juga untuk meningkatkan SEO, contoh judul homepage : Tikseo – Jasa Pembuatan Website No.1, jadi kamu hanya memasukan Jasa Pembuatan Website No.1.
<Variable name="tagline" description="Tagline" type="string" value="Template Blogger No.1"/>2. Title Separator
<Variable name="separator" description="Separator" type="string" value=" - "/>Berfungsi sebagai pembatas pada judul contoh Tikseo – Jasa Web Design, kamu bisa mengubahnya atau mengabaikannya seperti itu, namun jika kamu mengubahnya dengan pembatas lain dan pastikan tedapat spasi pada awal dan akhir.
3. Description Homepage
<Variable name="description" description="Description" type="string" value=""/>Ini adalah cara alternatif untuk memasukan descripsi blog kamu, kamu bisa mengabaikan ini jika sudah mengisi Descripsi pada setting blogger.
4. Gambar/Cover pada Homepage
<Variable name="cover" description="Cover" type="string" value=""/>Disini dibutuhkan url gambar berfungsi contoh ketika kamu share blog di media social, untuk Cover Halaman depan atau default jika halaman lain tidak mempunyai gambar, untuk mendapatkan gambar silahkan upload gambar atau logo kamu pada post blogger atau widget Upload Image dengan besar lebar kurang lebih 1600 X 700 pixel.
<Variable name="cover" description="Cover" type="string" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UIX0GrDDcT_Doi2FIH9OAUTXlpQks4ekURLG-s107S9WN2UwqY044Ht_pcNlWryUSy9HYha3tpgaCrTZjb962RtRajbxwnJ21n_yi3jt7knnJCoxxnwbcBSBalsnrKoixXTiDA6fwGE/s1600/jettheme-cover.png"/>5. Gambar Logo pada Schema SEO
<Variable name="logo" description="Logo" type="string" value=""/>Masukan url gambar logo blog kamu, caranya sama halnya dengan cover diatas, fungsinya untuk melengkapi data pada Schema SEO.
6. Favicon High Resolution
<Variable name="favicon" description="Favicon" type="string" value=""/>isi dengan url gambar favicon blog kamu, caranya sama halnya dengan cover dan logo diatas namun dengan format .png dan besar 200 X 200 pixel, fungsinya agar favicon blog kamu tidak blur.
7. New Google Analytic
<Variable name="analyticId" description="Analytic ID" type="string" value=""/>Ini adalah cara alternatif memasukan kode ID google analytic kamu, kamu bisa mengabaikan ini jika sudah mengisi iD Analytic pada setting blogger, namun perbedaannya disini kamu juga bisa menggunakan Google Analytic versi terbaru
<Variable name="analyticId" description="Analytic ID" type="string" value="G-AXXXXXXXXX"/>8. Google Adsense
<Variable name="caPubAdsense" description="caPubAdsense ID" type="string" value=""/>Kamu bisa mengabaikan ini jika sudah mengaktifkan Adsense pada blogger, ini hanya alternatif untuk adsense kamu yang berbeda email dangan blogger kamu, kamu bisa mengisinya dengan ID caPubAdsense yang bisa kamu dapatkan pada script Adsense kamu.
Pada sebelah kiri menu halaman Adsense, click Ads/iklan pilih Overview/Ikhtisar, setelah masuk halaman Overview, click Get Code/Dapatkan Code, kamu akan mendapatkan code seperti dibawah ini.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890XXXXXX
crossorigin="anonymous"></script>Salin ID/angka contoh yang diwarnai dan masukan seperti dibawah ini.
<Variable name="caPubAdsense" description="caPubAdsense ID" type="string" value="1234567890XXXXXX"/>Catatan: Fitur ini hanya untuk yang sudah di terima oleh adsense, jika kamu dalam tahap Mendaftar Adsense atau Peninjauan untuk mempercepat penerimaan, cukup letakan code adsense dibawah <head> seperti yang diarahkan oleh google.
Untuk pengguna Adsense agar performa blogger tidak turun dan tetap 90 keatas, Anda bisa melihat keterangan dan penjelasan berikut ini sampai selesai.
Lazyload Image/Gambar
Pertama anda bisa mengupload di media seperti normal yang dilakukan lalu masuk ke tampilan HTML pada pojok kiri atas.
Cara Simple
Perhatikan code anda, pasti anda mendapatkan code yang tidak beraturan seperti ini
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s320/lamp.jpg" width="320" /></a></div>lalu tambahan code <noscript> ... </noscript> diantaranya contohnya menjadi seperti ini:
<noscript>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s2048/lamp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s320/lamp.jpg" width="320" /></a></div>
</noscript>Cara Manual
Untuk cara manual hal ini dilakukan agar code lebih bersih, pertama ambil code tag image dari gambar yang anda upload di blogger.
<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s320/lamp.jpg" width="320" />Lalu anda bisa masukan di code diantara <noscript> ... </noscript> berwarna dibawah ini, pastikan terdapat width atau data-original-width dan sudah di atur. untuk full size anda bisa membuatnya menjadi width="728"
<noscript>
<img border="0" data-original-height="1371" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha37_IEYk4vB3YObTyYM3-i3Ne5PxVgcoQ2_f9bBwO2OlnJyQTw2uLlPtah_vjBAqFm6-sW4N8TyAivmzEDuEbkqWeiE9noiyLtFTI1jcQUr5iGqstZCEp85YcsdpPD-rx_2nZdMXR2Zo/s320/lamp.jpg" width="320" />
</noscript>Lazyload Adsense
Kamu cukup masukan kode seperti yang telah diwarnai pada widget Layout/Tata Letak, kode iklan ini bisa kamu dapatkan Pada sebelah kiri menu halaman Adsense, click Ads/iklan pilih Overview/Ikhtisar, setelah masuk halaman Overview, pilih tab ke2 By ad unit, dan pilih iklan seleramu.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890XXXXXX"
crossorigin="anonymous"></script>
<!-- adsense -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890XXXXXX"
data-ad-slot="123457XXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Lazyload Iframe, Video, Audio
Untuk Lazyload Selain image seperti Iframe (Youtube, Google map, dll), Video, dan Audio
<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>
Thanks for developer :
https://github.com/shinsenter/defer.js/
Baca juga : Script Lazy Load Blogger Untuk Template JetTheme
Demikian postingan kali ini tentang Setting Template Blogger Dari JetTheme. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
Tikseo
https://tikseo.blogspot.com - Tikseo working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for Programming, Blogger, or any other blogging platform. Stay tuned.
