Temper Documentation

Posted by

Yanuar Zhaldy Gemilang at January 16, 2026 0

Temper Documentation and Installation

Download Template Temper versi terbaru Download

Instalasi Template Temper

Pertama Kali Instal Template

Login ke Dashboard Blogger > Theme
Silahkan lakukan proses Backup terlebih dahulu agar Theme lama kamu tidak hilang.
Pilih Edit HTML > Select all lalu hapus semua isi kode HTML tersebut

Paste kode Blank HTML dari Jettheme dibawah ini kemudian Save

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'>
<b:attr name='xmlns' value=''/>
<b:attr name='xmlns:b' value=''/>
<b:attr name='xmlns:expr' value=''/>
<b:attr name='xmlns:data' value=''/>
<head>
<title><data:blog.pageTitle/></title>
<b:skin/>
</head>
<body>
<b:section id='1'/>
</body>
</html>

Kembali ke menu Theme > Restore > Upload > Pilih file Temper.xml

Update Versi Template

Login ke Dashboard Blogger > Theme
Pilih Theme > Restore > Upload >
Pilih file Template Temper.xml

Silahkan buka url Blog kamu untuk melihat dan memastikan Template telah berhasil dipasang dan tampilan telah berubah.

Kode Lisensi Template

Template Temper membutuhkan kode lisensi agar dapat menghapus credit footer. Sangat penting bagi kamu yang ingin tampil lebih ekslusif tanpa adanya identitas pembuat templatenya.

Setiap pembelian akan mendapatkan 2 lisensi yang bisa dipakai untuk 2 url domain yang berbeda.

Pengaturan kode lisensi dapat dilakukan di halaman Member Area.

Pastikan login menggunakan email pembelian, jika kesulitan bisa menghubungi bantuan melalui kontak WhatsApp atau Telegram.

Edit / Hapus Footer Credit

Jika kamu telah memasukan kode lisensi dengan benar di widget License Key, kamu dapat mengedit isi widget footer credit atau hide bahkan menghapusnya sesuai kehendakmu.

YzTheme tidak memasukan link tautan balik apapun ke website ini selain yang ada di widget footer credit ini.

Widget Pengaturan Fitur Template

Pada slot widget Yz Settings terdapat beberapa baris kode yang dapat kamu sesuaikan. Beberapa kode sbb:

var linkComment = false;            
var headerSearch = true;
var darkMode = true;
var middleAds = 2;
var autoToc = true;
var autoTocTitle = "Daftar Isi";
var moreText = "more ";
var yzToday = true;
var homeSnippet = false;
var postSnippet = true;

Penjelasan Fitur

var linkComment (true/false) = menampilkan atau menonaktifkan sebuah link yang dikirim pada kolom komentar.
var headerSearch (true/false) = menampilkan atau menonaktifkan fitur pencarian di header.
var darkMode (true/false) = menampilkan atau menonaktifkan fitur mode gelap.
var middleAds (number) = jumlah maksimal iklan tengah yang tampil di Artikel.
var autoToc (true/false) = menampilkan atau menonaktifkan fitur Table of Contents (Daftar isi) di dalam artikel.
var autoTocTitle ("strings") = tulisan yang tampil sebagai judul Table Of Contents.
var moreText ("strings") = tulisan yang tampil di tombol lihat semua widget recent.
var yzToday (true/false) = menampilkan atau menonaktifkan fitur tanggal hari ini di header.
var homeSnippet (true/false) = menampilkan atau menonaktifkan fitur details summary widget feeds artikel.
var postSnippet (true/false) = menampilkan atau menonaktifkan fitur details summary di dalam postingan artikel utama.

Widget Sosial Media

Untuk mengatur widget sosial media bisa menggunakan kode berikut,

<ul class="social ai-c">
<li class="instagram">
<a href="#" target="_blank" aria-label="instagram icon" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"/><path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m17.5 6.51l.01-.011"/></path></path></path></g></svg></a>
</li>
<li class="facebook">
<a href="#" target="_blank" aria-label="facebook icon" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21 8v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5"/><path d="M11 21v-9c0-2.187.5-4 4-4m-6 5h6"/></path></path></g></svg></a>
</li>
<li class="tiktok">
<a href="#" target="_blank" aria-label="tiktok icon" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21 8v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5"/><path d="M10 12a3 3 0 1 0 3 3V6c.333 1 1.6 3 4 3"/></path></path></g></svg></a>
</li>
<li class="youtube">
<a href="#" target="_blank" aria-label="youtube icon" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14 12l-3.5 2v-4z"/><path d="M2 12.708v-1.416c0-2.895 0-4.343.905-5.274c.906-.932 2.332-.972 5.183-1.053C9.438 4.927 10.818 4.9 12 4.9s2.561.027 3.912.065c2.851.081 4.277.121 5.182 1.053S22 8.398 22 11.292v1.415c0 2.896 0 4.343-.905 5.275c-.906.931-2.331.972-5.183 1.052c-1.35.039-2.73.066-3.912.066s-2.561-.027-3.912-.066c-2.851-.08-4.277-.12-5.183-1.052S2 15.602 2 12.708Z"/></path></path></g></svg></a>
</li>
</ul>

Ganti tanda # dengan url sosialmedia mu.

Widget Recent Artikel dan Random Artikel

Untuk menampilkan widget Recent post saja bisa menggunakan kode berikut:

<div class='recent' data-item="6"></div>

Untuk menampilkan widget Recent by Label bisa menggunakan kode berikut:

<div class='recent' data-item="6" data-label="Info News"></div>

Dan, untuk widget Random post bisa menggunakan kode berikut:

<div class='random' data-item="4"></div>

data-item merupakan jumlah artikel yang tampil

data-label adalah Label/Tags dari artikel yang ingin ditampilkan

data-style bisa ditambahkan pada widget recent untuk tampilan yang berbeda:

data-style='grid'
data-style='big'
data-style='head'
data-style='head-l'
data-style='head-r'

More soon..

Sampaikan keperluan dokumentasi berikutnya pada kolom komentar

Comments