Panduan Lengkap Menggunakan Template CodeFlare Blue di Blogger

---

CodeFlare Blue adalah template Blogger yang punya cukup banyak bagian yang bisa diatur dari menu Tata Letak, mulai dari logo, menu, slider, featured post, widget sidebar, sistem komentar sampai pilihan tampilan template.

Supaya tidak bingung, panduan ini saya susun dari urutan yang paling aman untuk dipraktikkan: pasang template → atur setelan dasar → isi menu dan widget → aktifkan fitur tambahan → cek tampilan desktop dan mobile. Jadi tidak perlu mengubah semuanya sekaligus.

TEMPLATE CODEFLARE BLUE Ingin langsung memakai template ini?

CodeFlare Blue tersedia untuk pengguna yang ingin tampilan Blogger lebih rapi, fleksibel dan mudah dikustomisasi tanpa harus membangun template dari awal.

Lihat Template & Layanan CodeFlare

Pasang TemplateBackup tema lama lalu pasang file XML CodeFlare Blue.

Atur Tata LetakLogo, menu, slider dan widget utama dikelola dari Layout.

Aktifkan FiturTheme Options, komentar, featured area dan sidebar.

Uji HasilCek desktop, tablet dan mobile sebelum blog dipublikasikan penuh.

Informasi Singkat

---

Blogger saat ini masih menyediakan menu Tema → Edit HTML untuk mengubah kode template dan menu Tata Letak → Tambahkan Gadget untuk menambah atau mengatur widget.

Sebelum memasang CodeFlare Blue, saya sarankan selalu menyimpan backup tema aktif terlebih dahulu. Setelah template terpasang, lakukan pengaturan dari Tata Letak sebanyak mungkin sebelum mengedit HTML.

Sumber: Blogger Help - Mengubah desain blog.

1. Persiapan Sebelum Memasang CodeFlare Blue

Sebelum mengganti tema, saya menyiapkan tiga hal: file template .xml, backup tema lama, dan catatan widget penting yang sudah ada di blog.

Pastikan file CodeFlare Blue berformat .xml.

Backup tema lama melalui menu Tema → Cadangkan.

Catat kode iklan, script khusus, menu dan widget yang masih ingin dipakai.

Kalau blog sudah ramai, lakukan pemasangan saat traffic sedang rendah.

Jangan langsung mengedit banyak bagian
Setelah template berhasil dipasang, cek dulu halaman depan, artikel, halaman statis dan mobile. Baru setelah itu lanjut mengatur widget satu per satu.

2. Cara Install Template CodeFlare Blue

01

Masuk ke Blogger

Pilih blog yang akan menggunakan CodeFlare Blue.

02

Buka menu Tema

Pada bagian tema aktif, pilih menu lainnya lalu lakukan backup terlebih dahulu.

03

Buka file XML

Buka file CodeFlare Blue dengan editor teks seperti Notepad atau Notepad++.

04

Salin seluruh kode

Tekan Ctrl+A lalu Ctrl+C pada file XML.

05

Buka Edit HTML

Di Blogger pilih Tema → Edit HTML.

06

Ganti kode template

Klik area editor, tekan Ctrl+A, lalu Ctrl+V.

07

Simpan tema

Klik Simpan lalu buka blog di tab baru untuk memastikan template tampil normal.

3. Setelan Awal yang Perlu Dicek

Setelah template aktif, saya tidak langsung mengisi slider. Ada beberapa setelan dasar Blogger yang perlu dipastikan lebih dulu supaya fitur template berjalan normal.

Komentar: DisematkanBuka Setelan → Komentar → Lokasi komentar, lalu pilih Disematkan.

Feed situs aktifBuka Setelan → Feed situs → Izinkan feed blog. Untuk fitur berbasis feed, gunakan Penuh, Sampai Batas Postingan, atau Singkat sesuai kebutuhan.

Format tanggalAtur bahasa, zona waktu dan format tanggal dari Setelan supaya metadata artikel tampil konsisten.

Blog tidak privatFitur feed dan widget artikel otomatis memerlukan blog yang bisa diakses publik.

Jangan matikan feed jika memakai widget otomatis
Newsticker, featured post, recent post dan beberapa widget CodeFlare Blue mengambil data dari feed Blogger. Jika feed dinonaktifkan, widget bisa kosong.

4. Memasang Logo Blog

Logo sebaiknya diatur dari Tata Letak agar tidak perlu menyentuh kode HTML template.

1Buka Tata Letak

2Cari widget Header / Logo

3Klik Edit

4Upload logo

5Simpan

5. Mengatur Navigasi Atas dan Social Link

Bagian navigasi atas dan social link dikelola dari widget Tata Letak. Prinsipnya sederhana: nama link diisi sebagai judul, sedangkan URL diisi alamat tujuan.

Top Navigation Tata Letak → Top Navigation → Edit. Isi link seperti Home, About, Contact, Privacy atau halaman penting lain.

Social Top / Footer Tata Letak → Social Top atau Social Footer → Edit. Isi akun sosial yang benar-benar dipakai.

6. Membuat Main Menu, Dropdown dan Multi Dropdown

CodeFlare Blue membaca tanda underscore pada nama link untuk menentukan level submenu.

FeaturesMenu utama

_Sub Link 1Submenu level 1

__Sub Link 1.1Submenu level 2

Features
_Sub Link 1
__Sub Link 1.1

7. Mengatur Mega Menu

Mega Menu bekerja melalui format yang sudah ditentukan oleh engine template. Karena format bisa berbeda antar versi CodeFlare Blue, gunakan pola yang sudah tersedia pada widget Main Menu dan jangan mengganti nama class atau tipe data jika belum memahami engine-nya.

8. Mengisi Newsticker

Masuk ke Tata Letak → Ticker News → Tambahkan Gadget → HTML/JavaScript. Ada dua pola yang bisa dipakai.

Artikel terbaru

<span data-type="recent" data-no="5"></span>

Artikel berdasarkan label

<span data-type="label" data-label="Sports" data-no="5"></span>

Angka 5 adalah jumlah artikel. Ganti Sports dengan nama label yang benar-benar ada di blog.

9. Mengatur Main Slider

Main Slider juga diatur dari Tata Letak. Tambahkan gadget HTML/JavaScript pada section Main Slider, lalu gunakan salah satu format berikut.

RECENT5/slider-recent

Menampilkan 5 artikel terbaru.

LABEL5/Business/feat-slider

Menampilkan 5 artikel dari label Business.

10. Mengatur Featured Grid, Tab, Column dan Video

Bagian featured memakai pola yang hampir sama. Saya cukup menambahkan gadget HTML/JavaScript pada section yang sesuai lalu memasukkan kode pemanggilnya.

Featured Grid3/Music/feat-gridMaksimal 3 artikel.

Featured Tab5/Sports/feat-tabContoh 5 artikel label Sports.

Featured Column5/Sports/feat-tabGunakan pada Featured Widgets.

Featured Post5/Sports/feat2Format untuk blok featured kedua.

Featured Video5/Sports/feat-videosGunakan pada Featured Video section.

Nama label harus sama persis
Jika widget kosong, cek ejaan label. Technology dan technology bisa diperlakukan berbeda oleh script tertentu.

11. Widget Sidebar dan Footer

Untuk sidebar dan footer, CodeFlare Blue menyediakan beberapa format widget siap pakai.

Recent Posts3/recent-postsMenampilkan 3 artikel terbaru.

Post per Label3/Sports/post-per-tagMenampilkan 3 artikel dari label Sports.

Recent Comments3/recent-commentsMenampilkan 3 komentar terbaru.

Cara pasangnya: Tata Letak → Sidebar/Footer → Tambahkan Gadget → HTML/JavaScript, kemudian isi salah satu format di atas dan Simpan.

12. Post Ads dan Author Box

Pada Tata Letak tersedia area seperti Post Top Ad, Post Bottom Ad dan Post Author. Jika versi CodeFlare Blue yang digunakan menyediakan section tersebut, masukkan kode iklan atau HTML author ke gadget HTML/JavaScript pada area yang sesuai.

Post Top / Bottom AdGunakan kode iklan yang valid dan jangan menaruh terlalu banyak slot.

Author BoxIsi nama, foto, bio singkat dan link profil yang benar-benar diperlukan.

13. Memilih Sistem Komentar

CodeFlare Blue menyediakan beberapa kombinasi sistem komentar. Buka Tata Letak → Theme Options → Comments System, lalu isi salah satu nilai yang didukung versi template.

BloggerbloggerKomentar native Blogger.

DisqusdisqusHanya komentar Disqus.

Blogger + Disqusblogger-disqusDua sistem komentar.

Blogger + Facebookblogger-facebookJika engine Facebook masih tersedia pada versi template.

Semua sistemblogger-disqus-facebookGunakan hanya jika seluruh integrasi masih aktif.

Jika memilih Disqus, isi juga widget Disqus Shortname dengan shortname situs Disqus Anda.

14. Theme Options CodeFlare Blue

Full Widthtrue / falsetrue untuk full width, false untuk boxed.

Fixed Sidebartrue / falseMengaktifkan atau mematikan sidebar sticky.

Home Recent Postsshow / hideMenampilkan atau menyembunyikan recent post di beranda.

Home PageNavishow / hideMengatur pagination pada homepage.

Internal PostNavishow / hideMengatur navigasi artikel sebelumnya/berikutnya.

Ubah satu setting setiap kali
Setelah mengganti nilai Theme Options, Simpan lalu cek hasilnya. Cara ini jauh lebih mudah saat mencari penyebab jika ada tampilan yang berubah tidak sesuai.

15. Mengubah Warna Template

Untuk warna utama, buka Tema → Sesuaikan → Lanjutan. Jika opsi warna CodeFlare Blue terhubung ke Blogger Theme Designer, warna bisa diganti dari sana tanpa mengedit CSS manual.

16. Membuat Halaman Sitemap

Dokumentasi sumber CodeFlare Blue memakai markup [sitemap] pada halaman statis. Jika engine sitemap sudah tersedia di template yang digunakan, langkahnya cukup seperti berikut.

01

Buka Halaman

Pilih Halaman → Halaman Baru.

02

Beri judul Sitemap

Contohnya “Daftar Isi” atau “Sitemap”.

03

Buka mode HTML

Masukkan shortcode yang digunakan engine template.

04

Publikasikan

Buka halaman dan pastikan daftar artikel muncul.

[sitemap]

Jika [sitemap] hanya tampil sebagai teks
Berarti engine sitemap belum ada atau tidak aktif pada versi template tersebut. Jangan menambahkan script sitemap lama secara acak; cek lebih dulu apakah CodeFlare Blue yang dipakai sudah membawa engine sitemap.

17. Shortcode dan Markup Artikel

CodeFlare Blue juga menyediakan styling untuk beberapa elemen artikel. Gunakan hanya jika memang dibutuhkan supaya isi artikel tidak terlalu ramai.

Drop CapHuruf besar di awal paragraf.<span class="first-character">A</span>

TableGunakan wrapper tabel bawaan template jika tersedia.

BlockquoteCocok untuk kutipan atau catatan penting.

ButtonTombol demo, download atau link aksi.

Alert BoxPesan success, info, warning dan error.

Code BoxMenampilkan potongan kode dalam artikel.

18. Contact Form

Jika ingin membuat halaman kontak, gunakan widget Contact Form Blogger sebagai fondasi. Struktur internal bisa berbeda menurut versi CodeFlare Blue, jadi jangan menggandakan ID ContactForm jika widget yang sama sudah ada di template.

<div class="contact-form">
<div class="contact section" id="contact">
<div class="widget ContactForm" id="ContactForm1">
<!-- Contact Form Blogger -->
</div>
</div>
</div>

Urutan Setting yang Saya Sarankan

01Install + backup

02Logo + identitas blog

03Setelan komentar + feed

04Top navigation + social

05Main menu

06Slider + featured

07Sidebar + footer

08Theme Options

09Sitemap + halaman penting

10Uji desktop + mobile

Troubleshooting Cepat CodeFlare Blue

Slider kosongCek feed blog, nama label dan format kode slider.

Featured post tidak munculPastikan label punya artikel dan penulisannya sama persis.

Menu dropdown gagalCek underscore pada nama link dan urutan item menu.

Komentar tidak sesuai demoPastikan lokasi komentar Blogger disetel ke Disematkan dan nilai Comments System benar.

Sitemap hanya menampilkan [sitemap]Engine sitemap tidak aktif atau script template tidak berjalan.

Tampilan mobile berantakanHapus widget HTML pihak ketiga yang terlalu lebar lalu uji kembali.

Ringkasnya

Cara paling mudah menggunakan CodeFlare Blue adalah tidak mengedit semua kode sekaligus. Pasang template dengan aman, selesaikan setelan dasar Blogger, lalu isi bagian Tata Letak satu per satu mulai dari logo, menu, slider, featured post, sidebar dan Theme Options.

Sebagian besar fitur CodeFlare Blue bekerja melalui pola kode sederhana seperti 5/Business/feat-slider atau 3/recent-posts. Kalau widget tidak muncul, hal pertama yang saya cek adalah feed, nama label, posisi gadget dan format kodenya.

Dengan urutan seperti ini, proses setup jauh lebih gampang dipahami dan kalau ada error, penyebabnya juga lebih mudah ditemukan.