Materia X2 Template terbaik? hmm, bukan. Materia X2 merupakan Template Blogger penerus dari Materia X yang bertemakan Material Design dan terinspirasi dari Google. Saya sebagai Developer tidak mengganggap bahwa template ini adalah template terbaik, karena semuanya bergantung pada kalian yang menggunakan template ini.

Setelah membuat lebih dari 10 template Blogger dan hanya beberapa yang saya publikasikan, kali ini saya memutuskan untuk serius pada Materia X2 dengan cara memberikan Update secara rutin dan menambahkan fitur terbaru (Jika tersedia), karena Template ini selalu digunakan pada Blog Komunitas saya (EL Creative Academy).

Materia X2 tidak jauh berbeda dengan generasi sebelumnya yaitu Materia X, perbedaannya adalah Materia X2 jauh lebih ringan (Walaupun Materia X juga ringan). Untuk masalah SEO dan Monetize (AdSense), saya tidak bisa menjamin kalau kalian bisa memiliki artikel yang berada pada posisi Page One di Google, atau langsung di Approve (Terima) menjadi Publisher Adsense, karena semua itu bergantung pada Konten yang kalian miliki, bukan template. Memang, saya pernah membuat satu template (Materia Z) dan dalam hitungan jam, saya bisa diterima menjadi Publisher Adsense. Tapi itu semua tidak menjamin.

Mengenai SEO dari template ini, saya juga tidak menjamin bahwasanya template ini SEO friendly. Dalam proses Development, saya sudah membubuhi segala hal yang berhubungan dengan SEO, mulai dari Responsive Design, Meta Tag, Schema markup, dan optimalisasi lainnya. Lho, kenapa saya tidak mengangap bahwa template ini SEO Friendly? Sama seperti yang sudah saya katakan diatas, Semua itu bergantung pada pemakai template ini, bukan Developer yang semena-mena mengatakan bahwa "template ini template terbaik", "template ini SEO nya paling bagus", "Template ini SEO Friendly, pokoknya paling terbaik", dll.

Fitur

Fungsi dan fitur dari Blogger pada dasarnya sama, yang membedakan adalah bagaimana Developer membuat dan memanfaatkan API serta Markup yang ada pada Platform yang digunakan. Untuk fitur dari Materia X2 juga tidak jauh berbeda dengan Template Blogger lainnya, hanya saja disini saya sebagai Developer menantang diri saya untuk melanggar beberapa peraturan dari Blogger (Bukan Hack/Crack ya, tapi memutar otak agar suatu fungsi yang jarang digunakan bisa saya gunakan).

Berikut beberapa fitur dari Materia X2:

Responsive Design

Bekerja pada semua ukuran layar perangkat.

Fixed Header

Mulai dari Materia X sampai Materia X2 semuanya menggunakan Fixed/Sticky Header (Jika scroll tetap kelihatan).

Multiple Ads Slot

Apa kalian bikin Blog untuk di Monetize? Tenang, di Materia X2 terdapat banyak sekali slot iklan, mulai dari Hompage Atas, Homepage Bawah, Sidebar, di Artikel, di Halaman Post, dll. Oh iya, Materia X2 juga punya Shortcode untuk memindahkan posisi iklan, pokoknya mau meletakkan iklan bisa dimana saja. Tapi, kalau mau pasang iklan, jangan banyak-banyak ya, kasian visitornya.

Multiple Comment System

Bosen pake komentar bawaan Google/Blogger? di Materia X2, kalian bisa memakai alternatif lain seperti Disqus dan Facebook. Tapi saya saranin pakai Komentar bawaan saja, karena pada Template ini terdapat Comment Counter yang (Mungkin) hanya dapat menghitung jumlah komentar dari Blogger Comment System.

Stylish Default Widget

Default Widget dari Blogger seperti Featured Post, Blog Search, Blog Archive, Labels, Popular Posts, dll, semuanya sudah di percantik tampilannya.

Brand New Custom Widget

Nah, ini nih yang bikin saya putar otak. Di Materia X2 saya sudah membuat Custom Widget Seperti Block Post, Grid Post, Column Post, Recent Post, Video Post, dll, dan semuanya bisa kalian gunakan dengan memasukkan Shortcode. Oh, iya kalian bisa liat Screenshot dari masing-masing Custom Widget di akhir artikel ini.

Post Share Button

Pada dasarnya sudah ada pada Blogger, tapi disini sedikit saya ubah, seperti tampilan dan perubahan/penambahan bebera Social Media.

Author Box

Pada dasarnya juga sudah ada, sama seperi diatas, sudah saya ubah dan saya modifikasi agar dapat meletakkan URL Media Sosial didalamnya.

Fixed Sidebar

Disini saya menggunakan jQuery Plugin yaitu TheIaStickySidebar. Jika kalian tidak suka Fixed/Sticky Sidebar, kalian juga bisa menonaktifkannya melalui Theme Editor.

Shortcode System

Saya tertarik dengan Shortcode pada Wordpress, ketika ingin membuat tombol, tidak perlu mengetik elemen HTML, hanya memasukkan beberapa teks sesuai dengan Shorcode yang tersedia. Ini adalah salah satu bagian yang menantang bagi saya, karena hanya terdapat bebera sumber Open Source yang bisa digunakan. Akhirnya, saya memutuskan untuk membuat Shortcode sendiri dengan menggunakan Regex (Regular Expressions). Adapun Shortcode yang bisa kalian gunakan pada Materia X2 adalah Tombol, Alert Box, Custom Widget, Contact Form, Full Width Page/Post, dll.

Auto Translate

Nah ini salah satu hal yang perlu diperhatikan, kebanyakan Developer Blogger Theme tidak menggunakan Markup dari Blogger dan tidak Supoort Semua bahasa. Di Materia X2, jika kalian mengatur bahasa Blog ke Bahasa apapun, maka isi dari Template ini akan mengikuti bahasa yang kalian atur (Tidak termasuk Artikel dan Daftar link yang kalian input sendiri ya).

Fast Loaded

Saya sudah pernah mencoba jQuery Plugin untuk mempercepat Loading Blog/Website, salah satunya adalah Lazyload. Setelah mencoba semuanya, saya merasa tidak cocok dan memutuskan untuk membuatnya sendiri, belum optimal sih, tapi OK kok.

Theme Editor Support

Semenjak bisa membuat Blogger Sendiri dan berpuluhan kali menggunakan template blogger GRATISAN (Bukan template bawaan ya, karena template bawaan rata-rata support semua), tidak pernah saya melihat template yang support Theme Editor, semuanya diedit melalui HTML Editor, mulai dari Warna, Lebar Widget, Font, dll. Nah di Materia X2, semuanya bisa diatur melalui Theme Editor, bahkan fungsi dari JavaScript pun bisa diedit melalui Theme Editor.

Premium Support

Tidak perlu dijelaskan lagi, kalau namanya Premium, mau konsultasi apapun pasti dilayani (Yang berhubungan dengan template tsb).

Lifetime Update

Update, Update, dan Update. Seperti yang sudah saya katakan diatas, saya bakal serius ke Materia X2 untuk melakukan Update secara rutin, walaupun hanya mengedit 1 CSS.

Performace

Score Google Page Speed

Saya tidak menjamin juga, walaupun dalam proses development saya selalu mengujinya, kadang dapat Score 70% Mobile / 90% Desktop, kadang juga 81% Mobile / 95% Desktop, dan paling tinggi yang pernah saya uji adalah 97% Mobile / 99% Desktop. Entahlah, kalian cek sendiri aja. (Kalau sudah pasang AdSense, beda pula Score nya).

GTMetrix

Disini juga saya tidak menjamin, terakhir saya cek adalah 96% PageSpeed / 98% YSlow.

Google Mobile Friendly

Sudah pasti Support dong.

Structured Data Test

Automated, Valid, dan No Error pokoknya, bisa cek sendiri.

Harga

Ini pertanyaan utama bagi peminat, melihat beberapa fitur yang saya buat dan tawarkan beserta proses Development yang bikin bosen alias pusing, untuk kali ini Materia X2 saya bandrol dengan harga IDR. 350.000 (Rupiah Indonesia) atau $25 (Dolar Amerika) pukul rata, artinya tidak ada fitur perbedaan lisensi.

Untuk pembayaran dan ketentuan yang tidak tertulis, kalian bisa hubungi saya langsung melalui Whatsapp (Fast Response)

Screenshot

Layout

Theme Editor

Berikut adalah kategori Theme Editor yang bisa kalian ubah:
Layout Options: Untuk mengaktifkan/menonaktifkan Sticky Sidebar

Post Options: Untuk menampilkan/menyembunyikan Tombol Share dibawah judul, Breadcrumb, dan Post Navigation.

Global Widths: Untuk mengatur lebar Container dan Sidebar.

Global Fonts: Untuk mengatur font yang digunakan.

Global Colors: Untuk mengatur warna keseluruhan Default.

Header: Untuk mengatur warna bagian Header.

Navigation: Untuk mengatur warna bagian Navigasi kiri dan Header kanan.

Body: Untuk mengatur warna keseluruhan body default.

Post: Untuk mengatur warna keseluruhan bagian Postingan.

Main: Untuk mengatur warna keseluruhan bagian depan blog.

Footer: Untuk mengatur warna bagian Footer.

Widget: Untuk mengatur warna keseluruhan bagian Sidebar Widget.

Buttons: Untuk mengatur warna tombol default.

Pages

Homepage:

Catatan: Thumbnail tidak akan tampil karena menggunakan Custom Lazyload Image dan Intersection Observer API yang ketika di Scroll barulah gambar akan muncul, dan juga Sticky Sidebar juga tidak akan tercapture.

Post Page

Error Page

Label Page, Archive Page, Search Page, Contact Form Page, dll. bisa diliat langsung pada halaman Demo.

Custom Widgets

Block Posts

Grid Posts

Column Post

Grid Video Post

Testing & Scoring

Score terakhir Mobile Google PageSpeed Insight (Menggunakan semua Custom Widget)

Score terakhir Mobile Google PageSpeed Insight (Tanpa Menggunakan semua Custom Widget)

Score terakhir Desktop Google PageSpeed Insight (Menggunakan semua Custom Widget)

Score terakhir Desktop Google PageSpeed Insight (Tanpa Menggunakan semua Custom Widget)

Score terakhir GTMetrix (Menggunakan semua Custom Widget)

Score terakhir GTMetrix (Tanpa Menggunakan semua Custom Widget)

Google Mobile-Friendly Test

Google Structured Data Testing

Google Rich Result Test

Untuk testing lainnya, bisa coba sendiri ya.

Catatan: Dalam pengujian, File template belum di minify dan dikompres, tidak menggunakan file JavaScript dari CDN (Kecuali jQuery), dan tidak menggunakan AdSense.

Changelog

20 - 23 January 2020 | v1.0.5 (Major Updates)
- Fixed: Some Error CSS
- Fixed: Header CSS Transition
- Fixed: Header Placeholder Color
- Fixed: Fluid Layout
- Fixed: CSS Table
- Fixed: Widget Spacing
- Removed: Unused Shortcodes
- Removed: Unused CSS
- Optimized: All CSS Styles!
- Optimized: Alert Shortcodes
- Optimized: Dark Mode
- Optimized: Comment Systems. Blogger, Disqus, and Facebook
- Changed: Block Video Widget Icon
- Changed: Code Structure
- Added: New Blogger Comments System
- Added: Footer Homepage URL
- Added: Automatic Footer Year Copyright
- Added: New Style of No-Image SVG Thumbnails
- Added: Sidebar Sub-Menu Rotate Animation & Transition
- Added: Syntax/Code Highlighter Features

05 - 09 November 2019 | v1.0.4
- Fixed: Some Error CSS
- Fixed: Some Error Attributes
- Fixed: Selected Navigation Drawer Menu Highlight
- Added: Page Loader Options
- Added: Dark Mode Features (Cached/Local Storage)
- Added: Drawer Menu Border Separator
- Optimized: Alert, Code Box, and Button Shortcodes
- Updated: Post Comment (If comment is 0 then hide the comment counter)

25 September - 12 October 2019 | v1.0.3
- Fixed: Some Error CSS
- Fixed: Some Error Attributes
- Fixed: Some Error Title Attributes
- Fixed: Ordered & Unordered List CSS
- Optimized: eCommerce Features
- Removed: Global Widht Features
- Added: Multivendor CSS
- Added: New Design for Search Page, Label Page, and Archive Page
- Added: More Multilingual Words (English - Indonesian)
- Added: Grid and List on Index Posts Layout Options

13 - 22 September 2019 | v1.0.2
- Fixed: Some Error CSS
- Fixed: Prefixed CSS Vendor
- Added: eCommerce Features
- Added: eCommerce Invoice System
- Added: eCommerce Antispam System
- Added: Some Meta Tag

5 - 9 September 2019 | v1.0.1
- Fixed: FeaturedPost Style
- Fixed: Some Error CSS
- Fixed: Search Input Placeholder Color
- Added: Author Social URL
- Added: Hide Side Nav in First Load Option
- Added: Selected Sidebar Menu Highlight
- Updated: Share Button to Center

29 August - 3 September 2019
- Initial Release
- Removed: Hide Side Navigation Option (BETA)
- Added: Multilevel Menu System for Side Navigation
- Added: Left Thumbnail Option in Theme Designer
- Changed: Verified Author Mark with HTML Entities code-box