 |
| Source: medianui.blogspot.com |
Sebelum mengupdate template, kami biasa melakukan riset terlebih dahulu dan mencatat beberapa laporan bug atau widget yang tidak berjalan dengan baik pada blog pengguna template ini
Berbekal semua data yang didapat setelah riset, barulah update dikerjakan secara bertahap. Tapi tidak ada namanya kesempurnaan, bahkan setelah update ini pun kemungkinan masih ada bug yang harus diperbaiki kedepannya. Karena itu laporan atau bantuan dari Anda sangat kami butuhkan untuk menjadikan template ini lebih mudah digunakan. Berikut adalah deretan perubahan yang kami terapkan pada update terbaru kali ini:
Perubahan Tampilan
Bagian yang paling terlihat adalah perubahan tampilan mulai dari halaman beranda sampai halaman postingan untuk menunjang UX(user experience) yang lebih baik lagi. Dibawah ini adalah sekilas gambar screenshot halaman depan sebelum dan sesudah diupdate:
 |
| Tampilan lama Median UI v1.2 |
 |
| Tampilan baru Median UI v1.3 |
Menambahkan font baru untuk heading
Pada awalnya kami menggunakan satu font untuk heading dan body teks dengan alasan untuk mempercepat loading blog, tapi semakin dipelajari ternyata pilihan itu kurang tepat. Dalam sebuah artikel atau halaman "Harus ada kejelasan antara heading/judul dengan isi artikel" tidak hanya perbedaan ukuran font saja, tetapi jenis dan weight font pun juga berpengaruh, Bahkan Google Fonts pun secara tidak langsung merekomendasikan untuk menggunakan minimal dua font dalam satu halaman.
Di pembaharuan kali ini kami menggunakan tiga font berbeda untuk heading, body dan juga kode syntax. Berikut rinciannya:
- Poppins bold: Digunakan sebagai heading (h1, h2, h3, dst) atau judul artikel
- Nunito Sans (Reguler, bold, italic): Sebagai body teks atau isi artikel
- Fira Mono reguler: Font untuk penulisan source code yang terdapat dalam syntax highlighter
Header yang lebih tegas
Pada versi awal desain header terlihat disamarkan di tampilan desktop, bahkan ketika menu navigasi di klik logo/judul blog pada header juga akan ikut menghilang. Karena terlihat membingungkan kami memutuskan untuk merubah tampilannya menjadi lebih tegas dengan warna berbeda dan posisi melayang (sticky).
Warna header ini juga dapat Anda ubah secara langsung melalui "Desainer Tema Blogger".
Merubah warna dark menjadi lebih hitam
Dikarenakan banyak yang kurang menyukai warna dark mode sebelumnya yang lebih terkesan biru hitam, kami mengubahnya dengan menggunakan VS dark theme Color Palette, Tapi sebetulnya warna dari dark mode inipun juga bisa diubah melalui Desainer Tema Blogger
Medukung tag p pada postingan
Salah satu hal yang menarik dari Pembaharuan Blogger kali ini adalah perubahan tag paragraf yang awalnya menggunakan <div><br /> menjadi <p>, sejak awal tag <p> memang diperuntukan untuk paragraf dan bahkan sudah dipakai diblog besar, rekomendasi dari google pun lebih memilih tag <p> daripada <br> selain lebih SEO struktur halaman juga menjadi lebih rapi.
Kami juga merubah script iklan tengah artikel yang awalnya tampil berdasarkan tag <br> di paragraf kesekian menjadi tag <p>. Jadi iklan tengah tidak akan muncul di artikel yang masih menggunakan tag <br>
Merubah script lazyload menjadi lazysize
Kekurangan dari lazyload adalah menyembunyikan semua gambar bahkan yang ada muncul di vewport sekalipun dan baru menampilkannya ketika user menscroll halaman, bagi kebanyakan orang awam mengira ini adalah bug dan kebingunan karena gambar tidak muncul pada halamannya.
Berbeda dengan lazysize yang hanya menyembunyikan gambar yang tidak terlihat di vewport walaupun kemungkinan akan ikut terindex di pagespeed, setidaknya hal ini lebih baik dari segi user experience, lazysize juga memanfaatkan cache browser untuk menampilkan gambar dan tak hanya itu kelebihan lain dari script ini adalah bisa di defer.
Defer adalah penundaan sebuah script atau perintah agar tidak memblock proses render oleh browser. Baca: Perbedaan Defer dan Async dalam load Javascript
Penambahan Fitur Baru
Ada beberapa fitur baru yang telah ditambahkan pada update kali ini, berikut rincian singkatnya:
Split post atau membagi postingan ke beberapa halaman (template)
Berguna untuk membagi satu artikel yang panjang menjadi beberapa halaman dengan tombol navigasi numeric, fitur ini sama seperti yang ada di wordpress hanya saja kekurangannya tidak ada tombol 'All-pages' untuk menampilkan keseluruhan artikel tanpa terbagi.
Silahkan kunjungi artikel ini untuk melihat demo dan cara penggunaannya.
Fungsi tabs pada postingan(template)
Tak jauh berbeda dengan split post, fitur ini juga bertujuan untuk membagi artikel tetapi tidak menggunakan tombol navigasi, melainkan hanya menggunakan fungsi tab yang dijalankan dengan bantuan CSS Pseudo ::checked. Fitur ini biasa digunakan untuk membagi dua artikel menjadi dua bahasa, misal satu Bahasa Indonesia dan satunya bahasa Inggris seperti pada contoh demo nya
Keduan fitur diatas disediakan dalam bentuk template postingan, Anda bisa mendownloadnya melalui link Google Drive yang dikirimkan melalui email.
Tampilkan atau sembunyikan snippet post(deskripsi singkat) pada artikel
Snippet atau deskripsi artikel pada homepage juga tersedia pada template ini hanya saja disembunyikan dengan perintah sederhana CSS display: none;. Anda bisa memilih untuk tetap membiarkannya seperti itu atau menampilkannya, cari dan ganti kode CSS dibawah ini untuk menampilkan snippet artikel:
.Blog article .post-snippet{display:none;
// Ubah menjadi display: block; hasilnya seperti dibawah ini:
.Blog article .post-snippet{display:block;Daftar isi atau table of contents otomatis
Salah satu fitur yang paling banyak direquest oleh user adalah daftar isi atau ToC(Table of Contens) otomatis, script ini kami dapat dari idnxmus.com hanya pada template ini ToC-nya dipasang secara permanen.
Awalnya kami kesulitan menentukan tempat yang pas untuk meletakkan fitur ini, pada versi desktop fitur ini diposisikan sticky dan tumpang tindih dengan sidebar, bisa disembunyikan dengan cara mengklik judul ToC-nya, Jika Anda merasa terganggu dengan tampilan tersebut Anda bisa memilih untuk menyembunyikan ToC diawal dan menampilkannya ketika diklik oleh user.
Anda juga bisa mengedit/menyembunyikan ToC nya atau bahkan menghapusnya secara permanen, tutorial lengkap setting Table of Contents akan dibahas di artikel lain.
Breadcrumb dengan batas dua label
Sejak versi awal, breadcrumb sudah ada hanya saja sebatas untuk index Google dan tampilannya disembunyikan dengan perintah display: none;. Pada pembaharuan ini kami memutuskan untuk menampikan kembali breadcrumb dan membatasinya agar hanya menampilkan maksimal dua label saja.
Breadcrumb hanya menampilkan dua label pertama yang dipilih, label pada blogger diurutkan berdasarkan alpabet A-Z, jadi Anda tidak bisa memilih label mana yang akan tampil dalam breadcrumb. Anda juga bisa menyembunyikan kembali breadcrumb ini dengan cara cari dan ubah kode CSS dibawah ini:
.Blog .breadcrumbs{display:flex;
// Ubah menjadi display: none; hasilnya seperti dibawah ini
.Blog .breadcrumbs{display:none;Tombol mengubah ukuran font pada artikel
Terinspirasi dari Desain UX Line Today, kami menambahkan tombol yang sama untuk memudah user yang kesulitan membaca pada ukuran teks postingan saat ini. Terdapat 3 pilihan ukuran teks yang tersedia yaitu kecil, sedang(default), dan besar. teks kecil diberi nilai font-size: 14px;, teks sedang = font-size: 16px; dan teks besar diberi nilai font-size: 18px;.
Apakah ukuran tersebut bisa diubah?Tentu bisa, Anda bisa melakukannya dengan mengubah ukuran pixel pada CSSnya. Silahkan cari dan ubah bagian yang ditandai sesuai keinginan Anda:
.font-size1:checked + .font-size2 + .font-size3 + article .post-entry{font-size:14px} // Kode untuk ukuran teks kecil
.font-size3:checked + article .post-entry{font-size:18px} Kode untuk ukuran teks besar
.Blog article.post .post-entry{font-size:16px; // Kode untuk ukuran teks sedang (default)Penambahan opsi komentar disqus dan Facebook
Bagi Anda yang kurang menyukai komentar bawaan blogger, mungkin bisa mencoba salah satu dari komentar ini. Tutorial lengkap penerapannya akan ditulis pada artikel berbeda.
Widget Baru
Kami tidak benar-benar menambahkan widget baru, yang kami lakukan adalah memodifikasi widget bawaan blogger agar terlihat baru dan berbeda dari template lain, bukan hanya untuk sekedar terlihat keren atau lebih bagus tampilannya tapi juga untuk kemudahan atau pengalaman pengguna yang lebih baik lagi. Berikut adalah beberapa widget yang kami modifikasi pada update kali ini:
Menambah widget untuk slot iklan baru dibawah header dan diatas footer
Pada versi sebelumnya di homepage hanya ada dua slot untuk penempatan iklan yaitu pada bagian sidebar dan dikolom tengah tepatnya diatas postingan. Banyak yang merasa tidak puas dengan slot tersebut, slot iklan dikolom tengah tersebut dinilai terlalu tanggung karena tidak ada ukuran ad unit yang cocok untuk slot tersebut.
karena itu kami menambahkan 2 slot tambahan lagi, satu dibagian bawah header (dengan ukuran yang lebih besar) dan satu bagian diatas footer.
Widget Slider mini pada homepage
Kami berterima kasih pada css-tricks.com karena telah membuat slider keren yang hanya bermodalkan CSS tanpa javascript sama sekali.
Pada awalnya kami ingin mengimplementasikan kode CSS slider ini pada "Recent Post", tapi karena keterbatasan waktu saat ini kami hanya menampilkan widget slider untuk gambar banner saja.
Saat ini, widget ini hanya untuk menampilkan banner dan link saja secara manual, tapi insyaallah pada update selanjutnya kami akan memodifikasi widget ini agar bisa menampilkan Recent post secara otomatis.
Anda bisa menghapus widget ini jika dirasa kurang bermanfaat
Widget Profile dengan dua tampilan
Sebelumnya desain widget profil untuk profil individual(perorangan) dan tim disamakan, tapi bebrapa saat yang sebelum update kami menemukan blog yang memiliki banyak penulis menampilkan daftar profil penulis berjejer kebawah yang makan banyak tempat, hal ini kami rasa sangat mengganggu dan tidak menarik terlebih user harus scroll lebih banyak hanya untuk melewati widget ini.
Dari masalah diatas kami memutuskan membuat layout yang berbeda untuk widget profil individual dan profil tim, untuk profil tim previewnya bisa Anda lihat langsung pada blog demo ini sedangkan untuk profil individual kami menambahkan icon sosial media yang akan terlihat jika user mengarahkan mouse ke gambar profil penulis (efek :hover) tampilannya kurang lebih seperti gambar dibawah ini:
Widget Label dengan fungsi show hide
Seperti halnya kasus diatas, widget label juga mengalami masalah yang sama. Tidak sedikit blog yang memiliki label banyak (lebih dari 20 label) dan jika ditampilkan semua akan makan tempat.
Untuk itu kami memodifikasi widget label agar hanya menampilkan sebagian label dan menyembunyikan sisanya. Pada blog demo ini label yang ditampilkan hanya 4 label, setelan ini bisa diubah - Anda bisa memilih untuk menampilkan lebi dari 4 widget diawal dan menyembunyikan sisanya, semua sesuai dengan nilai yang Anda masukkan pada widget. Tutorialnya akan ditulis pada artikel lain.
Widget PopularPost dengan atau tanpa thumbnail
Mungkin banyak yang belum tahu, widget yang ada pada template ini tidak hanya memiliki satu desain, tapi menyesuaikan dengan format yang Anda pilih pada menu tata letak widget. Termasuk widget PopularPosts ini yang memiliki 2 style berbeda yaitu: dengan atau tanpa thumbnail.
Pada demo ini format yang dipilih adalah Popular Posts tanpa thumbnail, Anda bisa mengubah setelannya melalui menu Tata Letak Blogger, silahkan centang pada bagian "Thumbnail gambar" dan lihat perbedaan widgetnya
Berikan pendapat atau masukan Anda
Hanya itu untuk update kali ini semoga update kali ini bisa lebih berguna untuk Anda, Jika ada saran atau masukan untuk update selanjutnya silahkan tulis pada kolom komentar di bawah:
Tetap dukung kreator/developer dengan cara menggunakan produk legal dari mereka.
Posting Komentar
Posting Komentar