Menggunakan template Blogger yang sudah jadi memang lebih cepat dan praktis, tetapi ada kalanya kita ingin menyesuaikan tampilan dan fitur sesuai kebutuhan. Dalam artikel ini, Dirman.web.id akan berbagi pengalaman menambahkan beberapa fitur di template Fiksioner versi 4.
Sebenarnya, fitur tersedia di template Blogger Fiksioner karya mba Igniel yang sedang digunakan saat ini sudah cukup banyak dan sesuai dengan kebutuhan ngeblog. Namun ada kalanya ketika melakukan blogwalking menemukan fitur lain yang menarik perhatian mas Dirman sebagai narablog.
Dan biasanya itu sudah tersedia secara default (bawaan) pada template blogger tersebut. Untuk pengalaman serta alasan lengkap menggunakan template fiksioner dapat dibaca di artikel sebelumnya di sini: ➤ Akhirnya Memilih Template Fiksioner.
Mengapa menambahkan fitur baru?
Tertarik untuk menambahkan fitur yang belum ada. Alasan utamanya adalah keinginan untuk belajar dan mengasah kemampuan untuk membaca, melakukan perubahan dan penyesuaian serta menerapkan kode html, css dan javascript di template blogger.
Selain itu, beberapa alasan lain adalah seperti berikut:
- Belajar dan bereksperimen – Memahami kode HTML, CSS, dan JavaScript dalam template Blogger.
- Meningkatkan pengalaman pengguna – Memberikan tampilan yang lebih modern dan fungsional.
- Menyesuaikan dengan preferensi pribadi – Agar blog lebih sesuai dengan gaya dan kebutuhan.
- Iseng dan rasa ingin mencoba – Apakah fitur di template lain bisa atau tidak jika diterapkan di template yang sedang digunakan.
- Gabut – Atau sedang mengalami burn out untuk menulis konten di blog, sehingga perlu mengalihkan aktivitas sesaat.
Fitur apa saja yang pernah ditambahkan?
Sebenarnya ada beberapa yang pernah mas Dirman coba tambahkan untuk melengkapi fitur di template fikisoner yang sebelumnya belum tersedia:
1. Mempercantik tampilan gambar
Sementara jika mas Dirman melihat beberapa desain template Blogger lain menggunakan opsi bentuk rounding sehingga memiliki kesan lebih modern dan rapih saat dilihat.
Maka karena keinginan untuk mempercantik tampilan gambar tersebut, mas Dirman menerapkan fitur tersebut dengan cara menambah kode berikut agar memiliki efek sudut melengkung:
<style> img {
border-radius: 5px;
} </style>Selain itu, mas Dirman juga menanbahkan efek zoom pada gambar saat disorot dengan kode berikut:
<style>
@media (min-width: 768px) {
img:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
}
</style>2. Menambah fasilitas chat bot AI
Cara untuk mendapatkan widget chat bot gratis berbasis teknologi AI dapat dibaca di artikel ini: ➤ Widget Asisten Virtual Chat Bot Gratis. Untuk cara menerapkannya, dapat menggunakan kode berikut ini:
<style>
.robot-button {
position: fixed;
left: 2%; /* Menyesuaikan posisi ke kiri */
bottom: 3%; /* Menyesuaikan posisi ke bawah */
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
}
.robot-button.show {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease-in-out;
animation: shake 0.5s ease-in-out 3;
}
.robot-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.robot-button svg {
width: 35px;
height: 35px;
fill: #5b3e94 !important;
}
.robot-button svg path {
fill: #5b3e94 !important;
}
@media (max-width: 768px) {
.robot-button {
width: 40px;
height: 40px;
}
.robot-button svg {
width: 25px;
height: 25px;
}
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
</style>
<a class='robot-button' href='https://go.dirman.web.id/darmini' id='robotButton' rel='noopener noreferrer' target='_blank'>
<svg style='fill:#5b3e94;' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M12 0a2 2 0 0 0-2 2v2H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3v2h2v-2h10v2h2v-2a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-5V2a2 2 0 0 0-2-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM5 15h14a1 1 0 0 1 1 1v1H4v-1a1 1 0 0 1 1-1z'/>
</svg>
</a>
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
document.getElementById("robotButton").classList.add("show");
}, 30000); // Tampilkan setelah 30 detik
});
</script>3. Menambahkan fitur pop up notifikasi
Penambahan fitur menarik ini sudah pernah mas Dirman sampaikan di konten artikel tutorial di sini: ➤ Cara Membuat Pop up Notifikasi di Blogger.
4.1. Fitur waktu membaca di halaman posting blog
A. Dapat meningkatkan pengalaman pengguna (UX)
Pengunjung blog bisa memperkirakan berapa lama mereka perlu membaca artikel sebelum mulai membaca. Membantu pembaca memutuskan apakah mereka punya waktu untuk membaca sekarang atau menyimpannya untuk nanti.
B. Meningkatkan Keterlibatan Pembaca
Jika waktu membaca singkat (misalnya 3-5 menit), pembaca lebih cenderung membaca hingga selesai. Jika artikel panjang, pembaca bisa lebih siap secara mental untuk menyelesaikannya.
C. Meningkatkan Dwell Time & SEO
Dengan estimasi waktu membaca, pengunjung mungkin lebih termotivasi untuk tetap berada di halaman lebih lama, yang dapat meningkatkan dwell time (waktu kunjungan). Menurut pada ahli SEO, Google dapat melihat ini sebagai sinyal bahwa konten Anda bermanfaat, sehingga dapat berdampak positif pada rangking di mesin pencari.
D. Membantu Monetisasi & Iklan
Jika blog menampilkan iklan, memperkirakan waktu membaca dapat membantu dalam optimasi penempatan iklan, sehingga lebih efektif dalam menarik perhatian pengunjung.
5. Membangun Kredibilitas & Profesionalisme
Blog dengan fitur ini terlihat lebih profesional dan peduli terhadap pengalaman pengguna, sehingga meningkatkan kredibilitas di mata pembaca.
4.2. Fitur terjemahan otomatis (auto translate) pada halaman posting
Fitur ini sangat menarik untuk diterapkan di blog dengan modifikasi penyesuaian seperti berikut:
- Menggunakan integrasi API dari ipapi.co, sehingga fitur translate hanya akan tampil saat blog diakses dari ip/lokasi di luar Indonesia
- Google Translate hanya dimuat saat tombol diklik (tidak memperlambat loading blog).
- Script hanya dimuat sekali, menghindari duplikasi.
- Halaman langsung diterjemahkan ke bahasa Inggris setelah tombol diklik tanpa harus membuka halaman baru.
- Elemen Google Translate disembunyikan agar tampilan tetap bersih.
<script>
document.addEventListener("DOMContentLoaded", function () {
var wordsPerMinute = 200;
var readTimeText = " menit membaca";
var contentElement = document.querySelector(".post-body");
var metaElement = document.querySelector(".post-view");
if (contentElement && metaElement) {
var text = contentElement.textContent.trim();
var words = text.split(/\s+/).length;
var time = Math.ceil(words / wordsPerMinute);
var wrapperElement = document.createElement("span");
wrapperElement.style.display = "inline-flex";
wrapperElement.style.alignItems = "center";
wrapperElement.style.gap = "8px";
var readTimeElement = document.createElement("span");
readTimeElement.style.display = "inline-flex";
readTimeElement.style.alignItems = "center";
readTimeElement.style.gap = "3px";
readTimeElement.style.color = "#666";
readTimeElement.style.fontSize = "14px";
readTimeElement.innerHTML = `
<svg fill='none' height='14' width='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-.5-13h-1v6l5.25 3.15.75-1.23-4.5-2.67V7z' fill='#666'/>
</svg>
${time}${readTimeText}
`;
var translateElement = document.createElement("span");
translateElement.style.display = "inline-flex";
translateElement.style.alignItems = "center";
translateElement.style.cursor = "pointer";
translateElement.style.color = "#007bff";
translateElement.style.display = "none";
translateElement.innerHTML = `
<svg height='16' width='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path fill='#007bff' d='M12 2a10 10 0 1010 10A10.02 10.02 0 0012 2zm1.5 15h-3v-2h3zm0-4h-3V7h3z'/>
<path fill='#007bff' d='M20 4h-5.6a8.1 8.1 0 00-8.8 0H4a1 1 0 000 2h1.5a8 8 0 006.5 9.8V18h-3v2h3v2h2v-2h3v-2h-3v-2.2A8 8 0 0018.5 6H20a1 1 0 000-2zM12 14a6 6 0 01-6-6V7h12v1a6 6 0 01-6 6z'/>
</svg>
`;
translateElement.addEventListener("click", function () {
if (!document.getElementById("google_translate_script")) {
var script = document.createElement("script");
script.id = "google_translate_script";
script.type = "text/javascript";
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateInit";
document.body.appendChild(script);
} else {
googleTranslateInit();
}
});
window.googleTranslateInit = function () {
new google.translate.TranslateElement({ pageLanguage: 'id', includedLanguages: 'en', autoDisplay: false }, 'google_translate_element');
setTimeout(function () {
var selectElement = document.querySelector(".goog-te-combo");
if (selectElement) {
selectElement.value = "en";
selectElement.dispatchEvent(new Event("change"));
}
}, 500);
};
fetch("https://ipapi.co/json/")
.then(response => response.json())
.then(data => {
if (data.country_code !== "ID") {
translateElement.style.display = "inline-flex";
}
})
.catch(error => console.error("Gagal mendeteksi lokasi:", error));
wrapperElement.appendChild(readTimeElement);
wrapperElement.appendChild(translateElement);
metaElement.appendChild(wrapperElement);
}
});
</script>
<div id="google_translate_element" style="display: none;"></div>Penutup
mas Dirman sendiri terbiasa melakukan backup dengan cara berikut ini:
- Buka halaman kode HTML template
- CTRL + A (memilih semua kode yang ada)
- CTRL + C (copy code)
- Buka alat text editor seperti notepad, notepad++ dan sejenisnya
- CTRL + V (paste code)
- Kemudian simpan
Optimasi SEO & Kecepatan Loading
- Minifikasi kode CSS dan JavaScript sebelum diterapkan.
- Gunakan gambar berformat WebP agar lebih ringan.
- Periksa kembali kecepatan blog di PageSpeed Insights atau GTmetrix setelah selesai melakukan modifikasi.
Menambahkan fitur ke template Blogger tidak harus rumit. Dengan sedikit kode HTML, CSS dan JavaScript, kita bisa meningkatkan tampilan dan fungsionalitas blog agar lebih menarik dan interaktif. 🚀
💬 Punya pertanyaan atau ingin berbagi pengalaman modifikasi Blogger? Tinggalkan komentar di bawah! 😊
Posting Komentar
✔ Centang kolom Beri Tahu Saya/Notify Me untuk mendapatkan notifikasi respon komentar.