Fitur dan Kelebihan Median UI

Source: jagodesain.com

Pada template ini kami bereksperimen dengan mengaplikasikan dashboard elemen pada blog yang akhirnya melahirkan Median UI, template ini lebih direkomendasikan untuk blog dengan tema berita atau tema campuran namun bukan berarti tidak cocok dengan niche lain.

Kami mendapat inspirasi ini dari tampilan beberapa website terkenal seperti Google Adsense dan GDrive serta dari beberapa UI element yang kami temukan di Dribbble. Didukung dengan ikon yang lebih sederhana dan serasi, membuat template ini terasa seperti antarmuka dari sebuah aplikasi memberikan pengalaman membaca artikel yang lebih nyaman dan tidak membosankan.

Kelebihan Median UI

Kami menerapkan beberapa kelebihan yang ada pada template Fletro ke tema ini, bedanya adalah kami merombak tampilan tema sehingga menghasilkan sesuatu yang baru

100% SEO Friendly

Template ini sudah lulus audit SEO dengan hasil yang memuaskan seperti pada screenshot dibawah ini:

Meta tag pada template disusun lebih rapi agar mudah untuk di edit, penambahan beberapa schema seperti Breadcrumbs, Comment dan lainnya memudahkan robot search engine untuk mengedintifikasi struktur konten pada blog, hal ini sangat baik terutama bisa membuat konten blog muncul lebih cepat pada hasil pencarian.

Catatan:
Kebanyakan template hanya mengoptimalkan SEO Onpage serta semua hal yang bisa di optimalkan pada blog seperti mempercepat loading Blog, penambahan meta tag, penambahan schema Breadcrumbs dan sebagainya. SEO Offpage itu diluar template dan diluar kendali pembuat template, cakupannya seperti robot.txt, search console, backlink atau hal kecil seperti penambahan artibut src='' pada gambar di postingan, semua itu diluar tanggung jawab pembuat template.

Semua pembuat template tidak pernah menjamin blog Anda akan langsung berada di halaman pertama hasil pencarian setelah menggunakan template mereka, masalah yang muncul pada search console seperti Diindeks meski di blokir oleh robot.txt atau sebagainya diluar kendali pembuat template bahkan template blog terkenal pun juga mengalami hal yang sama.

Lebih mengutamakan konten

Struktur kerangka template disusun dengan lebih mengutamakan konten atau artikel daripada bagian template lainya. Bagaimana cara kami melakukannya? Cara kerja mesin pencari saat mengindeks suatau konten pada blog ialah merendernya dari urutan atas kebawah struktur HTML template, yang kami lakukan adalah menyesuaikan urutan elemen pada template dengan memindahkan bagian konten pada bagian atas template dan memindahkan elemen lainya seperti sidebar dan navigasi ke bagian bawah sehingga bagian pertama yang di render oleh mesin pencarian adalah konten blog.

Untuk membuktikannya cobalah reload halaman ini dan perhatikan secara detail, Anda akan menemukan bagian pertama yang muncul dari laman ini adalah artikel utama disusul oleh sidebar dan menu navigasi yang dimuat terakhir setelah bagian konten selesai.

Lebih mudah dikostumisasi

Didesain agar lebih mudah untuk disesuaikan melalui Desainer Tema Blogger, Anda leluasa mengubah warna, lebar dan font pada template ini. Bahkan warna Dark mode/Mode malam pada template ini bisa Anda ubah kapan saja tanpa perlu repot-repot mengedit HTML template

Kekurangan Median UI

Hanya ada satu kekurangan dari kebanyakan template responsif atau dinamis yaitu tidak bisa mengedit menu navigasi pada Tata Letak Blogger, Anda harus mengedit menu navigasi pada Edit HTML template.

Menambahkan atau mengubah link akan terasa lebih sulit bagi Anda yang tidak mengerti HTML hal ini dikarenakan penulisan kode icon SVG yang kebanyakan lebih panjang sehingga sedikit membingungkan bagi yang awam HTML.

Tapi kami akan memberikan arahan semudah mungkin untuk Anda agar lebih mudah mengedit menu navigasi pada template ini.

Fitur utama

Dark mode/Mode malam

Salah satu ciri khas dari template kami adalah adanya fitur mode malam ini, kami akan terus pertahankan pada template lainnya. Fungsi utama dari fitur ini adalah mengubah tampilan warna latar pada template menjadi lebih gelap agar konten lebih mudah dibaca oleh user pada saat malam hari.

Adaptive template

Alih-alih membuat elemen template yang responsive, kami lebih memilih membuat elemen yang bisa beradaptasi dengan lebar layar ketika blog dibuka. template ini akan otomatis menyesuaikan tampilannya ketika ukuran layar di perkecil.

Perbedaannya dengan responsive adalah terkadang layout elemen pada template responsive terlihat dipaksakan ketika tampil di mobile, pada template ini layout akan otomatis berubah pada tampilan mobile seperti menu navigasi yang berpindah kebawah serta elemen lainnya yang berubah otomatis.

Lebar thumbnail yang menyesuaikan

Berbeda dari Fletro, gambar thumbnail pada template ini dapat menyesuaikan dengan ukuran layar tanpa mengubah ukuran gambar atau membuat gambar tidak proporsional.

Kami mencoba bekesperimen dan berhasil menemukan cara yang membuat gambar bisa fit otomatis tanpa mengubah tinggi atau lebarnya pada CSS. Kami menggunakan aspect ratio pada gambar sehingga ukurannya tidak akan berubah pada saat layar diperkecil, kelebihan lain dari fitur ini adalah anda tidak perlu khawatir mengenai ukuran standar gambar pada template berapapun lebar dan tinggi gambar Anda akan otomatis sesuai pada ukuran gambar thumbnail terutama di homepage.

SVG Icon

Icon yang paling ringan dan stabil diantara jenis icon lainnya, serta lebih mudah mengubah warnanya ketimbang penyedia icon pihak ketiga seperti font awesome dan sebagainya.

Walaupun penggunaannya sedikit lebih sulit dari icon pihak ketika. Namun dari segi loading blog, SVG jauh lebih baik dari font awesome. Salah satu kelebihannya adalah style icon nya yang tidak monoton, Anda bisa menggunakan satu icon dari sebuah icon pack lalu mengambil icon lain dari sumber lain terebih sekarang banyak sekali SVG icon yang dibagikan secara gratis.

Modifikasi komentar bawaan Blogger

Kami memodifikasi komentar bawaan blogger dengan menambahkan schema Comment, serta menambahkan efek lazy pada gambar. Sebelumnya jika Anda ujicoba pagespeed konten dengan komentar yang banyak, Anda akan menemukan kalau gambar pada komentar juga akan ikut terindeks dan memperlambat loading blog.

Karna itu kami menambahkan efek lazy agar gambar komentar tidak ikut terindeks, tak hanya itu ukuran gambah pada komentar juga diubah menjadi lebih besar agar bisa menyesuaikan dengan style komentar pada template ini. Sekarang pengguna tidak akan bisa menambahkan link aktif pada komentar, semua link eksternal pada komentar termasuk link profil blogger akan terhapus otomatis

Untuk melihat fitur dan kelebihan lainnya Anda bisa langsung melihatnya pada blog demo, beri masukan terkait fitur template ini atau saran fitur tambahan yang ingin ditambahkan pada template ini melalui kolom komentar dibawah.