Sedikit perubahan tampilan bagi Anda yang mungkin kurang menyukai menu navigasi mobile saat ini, perubahan ini tidak akan terlihat pada tampilan desktop.
Jika Anda membuka artikel ini melalui smartphone maka akan terlihat menu navigasi berbeda dengan halaman lain. Untuk menerapkan perubahan ini hanya sedikit menambahkan kode CSS pada template, Silahkan ikuti tutorial dibawah ini:
Carilah kode di bawah ini pada template Anda dan tambahkan beberapa kode yang tertera pada bagian bawahnya
Setelah adsense ditambahkan ke blog terkadang sebagian menu tidak berfungsi salah satunya adalah tombol navigasi dan anehnya hanya terjadi pada halaman postingan. Masalah ini terjadi karena ada tag <iframe> dari script google diantara .mainIner dan .asideIner, kode css yang digunakan untuk memanggil fungsi ini awalnya adalah :
.nav-menu:checked + .mainIner + .asideIner {...}
Jika dibaca kurang lebih seperti ini : Jika tombol menu di klik maka .mainIner plus tag yang persis dibawahnya (.asideIner) = fungsi css Artinya: tidak boleh ada tag lain diantara .mainIner dan .asideIner, penulisannya harus seperti dibawah ini
Kami akhirnya mengubah kode CSS nya agar tidak ada lagi masalah seperti pada template ini kedepannya.
Postingan tanpa paragraf
Awalnya kami sempat dibuat kebingunan dengan masalah ini karena pada template Fletro spasi pada paragraf baik-baik saja walaupun artikel dibuat menggunalan tampilan blogger baru atau lama. Pada format html blogger tampilan baru, tag <br/> yang biasa digunakan untuk membuat baris baru hanya ditulis satu kali dengan format seperti dibawah ini:
<div><br/></div>
Berbeda dengan tampilan blogger lama yang menggunakan dua tag <br/> untuk membuat paragraf baru, awalnya kami kira inilah masalahnya dan satu-satunya solusi adalah dengan menambahkan tag <br/> lagi pada kodenya, tapi setelah kami periksa kembali ternyata ada kode css dalam template yang menyebabkan hal ini.
Jadi kami menghapus kode tersebut dan sekarang anda tidak perlu lagi menambahkan dua tag <br/> untuk membuat paragraf baru
Bagaimana cara menambahkan adsense pada template?
Template ini menerapkan cara yang sama dengan Fletro untuk menambahkan adsense, jadi Anda bisa membaca artikel ini untuk mempelajarinya.
Bagaimana cara menambahkan auto ads yang mudah?
pada template ini sudah disediakan script adsense yang bisa Anda aktifkan jika diperlukan, silahkan cari dan ubah kode dibawah ini:
<!-- <script>/*<![CDATA[*/ (function() { var ad = document.createElement('script'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); /*]]>*/</script> -->
// Ubah menjadi seperti dibawah ini
<script>/*<![CDATA[*/ (function() { var ad = document.createElement('script'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); /*]]>*/</script>
Jika anda ingin menambahkan auto ads pada blog Anda, ubah kembali kode diatas menjadi seperti dibawah serta tambahkan id adsense anda pada bagian yang sudah di tandai:
<script>/*<![CDATA[*/ (function() { var add = document.createElement('script'); var att = document.createAttribute('data-ad-client'); att.value = 'ca-pub-0000000000000000'; add.setAttributeNode(att); add.async = true; add.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })(); /*]]>*/</script>
Pembaharuan v1.2
Selain memperbaiki bebrapa bug di tampilannya kami juga menghapus dan menambahkan beberapa fitur baru pada template ini diantaranya adalah:
Penambahan lisensi
Kami terpaksa mengambil langkah ini karena semakin maraknya pihak yang tidak bertanggung jawab menggunakan, menjual ulang serta menyebarkan template ini secara ilegal. Cara kerja lisensi ini adalah mengecek pada database apakah domain yang terpasang template ini terdaftar atau tidak, jika tidak maka akan muncul pesan error seperti dibawah ini:
Untuk mendapatkan versi terbaru silahkan hubungi kembali kami dan kirim data domain yang ingin di aktivasi (maksimal per-user dua domain)
Penghapusan widget random post
Widget ini termasuk berat digunakan pada template ini, selain berpengaruh pada loading performa blog juga berkurang. Tak hanya itu walapun sudah di hide widget ini tetap memberikan pengaruh terutama pada tampilan pratinjau blog saat posting artikel, karena itu kami memutuskan untuk menghapus secara permanen widget ini.
Penghapusan sementara artikel terkait tengah artikel
Widget ini sedikit membingungkan untuk sebagian user, karena terlihat seperti bagian dari artikel walaupun sudah di beri margin. Penghapusan ini bersifat sementara yang artinya anda bisa kapan saja menambahkannya kembali jika dirasa penting. silahkan ikuti petunjuk dibawah ini:
Cari dan ubah kode dibawah ini; Sederhananya kami hanya menambahkan tag <!-- isi kode --> atau sering disebut tag Comment, Anda hanya perlu menghapus bagian <!-- --> untuk menampilkan kembali artikel terkait ditengah artikel.
<!--<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-artikelTerkait-in'/>-->
// Ubah menjadi seperti dibawah ini
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-artikelTerkait-in'/>
Profil penulis tidak tampil di akhir postingan
Saya sudah mengikuti tutorial ini dengan benar namun profil penulis dibawah postingan masih tidak muncul.
Masalah seperti ini biasa timbul karena profil blogger nya belum lengkap, walau sudah mencentang 'profil penulis' di menu tata letak Blogger tapi profilnya masih belum lengkap maka 'Profil penulis tidak akan muncul. cara melengkapinya adalah:
Pergi ke Setelan Blogger
Pilih Umum atau Setelan lainnya pada Blogger lama
Edit profil pengguna dan lengkapi kolom 'Perkenalkan Diri Anda'
Jika dilakukan dengan benar seharusnya profil penulis sudah muncul diakhir postingan
Mengganti tombol navigasi ke numeric
Pada template ini sudah disediakan opsi untuk menggunakan tombol navigasi numeric jika seandainya Anda kurang menyukai tombol 'load more', yang perlu Anda lakukan hanyalah mengubah kode dibawah ini lalu simpan template Anda:
Perbaikan warna dan hover effect terutama pada mode gelap
Perbaikan masalah tombol navigasi yang kadang tidak berfungsi
Perbaikan masalah pada tag <br/> postingan
Perbaikan masalah gambar postingan yang tidak rata tengah di tampilan mobile
Perbaikan masalah table yang tidak responsive
Perubahan layout pada tampilan responsive seperti telated post, post card, share button dan lainnya
Penambahan tombol back to top
Pembaharuan: 16 Juni 2020
Rilis versi AMP: Bisa diunduh melalui link yang sudah saya kirim di email Anda untuk mengecek apakah halaman AMP nya valid atau tida dapat diakses dengan menambahkan ?amp=1 di setiap akhir url, link demo: median-amp.blogspot.com/
Pembaharuan: 23 Juni 2020
Penambahan lisensi pada template (termasuk AMP)
Penambahan style untuk widget LinkList / Daftar Link
Penghapusan widget Random post
Penghapusan sementara artikel terkait ditengah postingan
Penambahan style accordion(faq menu) pada fitur postingan, lihat disini
Penambahan link share to Telegram pada share button
Perbaikan pada tampilan responsive
Perbaikan pada tombol balas komentar pada versi AMP
Pembaharuan: 8 Juli 2020
Mengubah script related post/artikel terkait, Karena banyak laporan yang mengatakan gambar di artikel terkait tidak muncul maka kami mengubah script nya dengan harapan masalah ini tidak ada lagi kedepannya.
Mengubah TOC/Daftar isi menjadi Pure HTML + CSS (tanpa js)
Mengubah Spoiler menjadi Pure HTML + CSS, Sekarang fitur ini sudah bisa digunakan pada versi AMP
Menambahkan widget Profile/Contributor
Perbaikan table menjadi lebih responsive
Perbaikan pada share button menjadi lebih responsive di semua layar
Pembaharuan: 25 Juli 2020
Perbaikan pada sebagia kode CSS
Perbaikan pada beberapa tag HTML agar lebih valid
Perbaikan pada tampilan UC Browser, Safari dan IE 11
Perubahan kolom artikel pada halaman homepage
Sedikit perubahan pada penulisan table
Perbaikan gambar header yang tidak muncul pada versi AMP
Perbaikan tombol Mobile Navigation yang rata kiri pada UC Browser
Penghapusan CSS display:grid yang tidak support pada beberapa browser
Ikuti panduan dibawah ini untuk menambahkan halaman kontak kami dengan mudah pada template Median UI.
Persiapan
Hal pertama yang harus Anda lakukan adalah mendapatkan kode Id blog Anda, caranya sangat mudah pada laman blogger lihatlah dibagian address bar maka anda akan menemukan contoh link seperti dibawah ini;
kebanyakan menu navigasi pada template responsive mengharuskan penggunanya untuk menguba/menambahkan link melalui Edit HTML template, begitu pula template ini Anda harus mengeditnya melalui Edit HTML template.
Alasan satu-satunya hal ini adalah karena template ini menggunakan icon SVG, kami bisa memindahkan kodenya ke menu tata letak blogger namun Anda tetap harus menambahkan linknya secara manual pada menu tata letak.
Pada artikel ini kami akan memberikan arahan pada Anda agar lebih mudah mengedit menu navigasi pada template ini. Ikuti cara dibawah ini untuk menambahkan atau mengubah link di menu navigasi:
Silahkan menuju Edit HTML template Anda
Cari id='HTML00', klik pada kode template kemudian tekan CTRL + F.
Cara mudahnya adalah silahkan klik icon yang ditandai pada gambar dibawah, lalu gulir sampai bawah maka Anda akan menemukan widget dengan id HTML 00
Dalam widget tersebut Anda akan menemukan kode yang kurang lebih seperti dibawah ini:
Kode diatas adalah kode penulisan untuk satu link, anda akan menemukan beberapa kode serupa seperti diatas. Silahkan salin kode diatas dan letakkan tepat dibawahnya untuk menambahkan link baru
Keterangan:
[ <svg>...</svg> ] : Merupakan kode untuk menampilkan icon pada menu navigasi, tempel kode svg anda pada bagian ini.
[ <span class='name' itemprop='name'>Tentang</span> ] : Adalah kode untuk menampilkan judul pada link blog Anda ubahlah tulisan 'Tentang' dengan judul link yang Anda inginkan.
Simpan template Anda dan lihat hasil perubahannya.
Bagaimana cara menambahkan icon baru pada blog?
Kami menyadari mungkin SVG masih terasa baru dan menyulitkan bagi beberapa orang, untuk itu kami sudah menyiapkan beberapa list icon serta rekomendasi icon set yang cocok digunakan pada template ini.
Silahkan pergi ke halaman ini dan cari icon yang sesuai dengan keinginan Anda.
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.
Fitur dan Kelebihan
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:
Screenshot dibuat pada tanggal : 25 Mei 2020
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.
Ini adalah layout standar dari postingan Blogger dengan mode compose beserta semua fitur yang terdapat pada mode ini. Mode ini juga sudah responsive jadi beberapa layout seperti gambar, blockquote dan sebagainya akan menyesuaikan tampilan berdasarkan ukuran layar user.
Judul Utama (H1)
Judul (H2)
Subjudul (H3)
Judul Kecil (H4)
Teks ukuran standar bawaan template
Teks dengan ukuran font terkecil
Teks dengan ukuran font normal
Teks dengan ukuran font besar
Teks dengan ukuran font sangat besar
Teks dengan warna yang berbeda
Teks dengan warna latar belakang
Paragraf ini adalah standar dari template tanpa tambahan inden, ukuran font serta garis ketinggian sudah diatur agar teks lebih mudah dibaca.
Paragraf kedua dengan tambahan inden yang terdapat dalam mode compose Blogger
Paragraf ketiga dengan tambahan 2 inden yang mungkin akan sedikit berpengaruh pada tampilan mobile
Pargaraf teks kutipan akan tampil seperti ini dengan warna teks yang berbeda dari paragraf biasa
Daftar atau list pada postingan dengan nomor
Daftar pertama
Daftar kedua
Daftar ketiga
Daftar Keempat
Daftar atau list dengan dots
Daftar pertama
Daftar kedua
Daftar ketiga
Daftar Keempat
Paragraf dengan tambahan link anchor dan link aktif yang ditambahkan secara manual melalui mode compose.
Gambar
Caption gambar
Pada paragraf ini akan ditampilkan format table pada template ini beserta format lainnya seperti blockquote atau penyisipan kode html serta style tambahan yang bisa digunakan pada mode html.
No
Nama Kota
Jumlah Penduduk
Usia 19-25
Usia 25-40
Usia > 40
1
Balikpapan
10.023.211
5.000.223
2.500.332
2.499.232
2
Banjarmasin
10.023.211
5.000.223
2.500.332
2.499.232
3
Banjar Baru
10.023.211
5.000.223
2.500.332
2.499.232
4
Samarinda
10.023.211
5.000.223
2.500.332
2.499.232
Cara penulisan table yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:
Penulisan format kode atau biasa disebut Syntax Highlighter yang ditulis secara otomatis pada mode Compose
<pre> <code> <!-- kode html, css ata javascript disini --> </code> </pre>
Format tambahan yang hanya bisa digunakan pada mode HTML
Penulisan Syntax Highlighter secara manual pada mode HTML postingan
// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini <pre> <code> <!-- kode html, css ata javascript disini --> </code> </pre>
// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode <i>Comment</i> = Kode dalam tag ini otomatis tidak akan ikut terseoroti <i class='comment'>Comment</i> = <!-- kode html, css ata javascript disini --> <span>CSS Property</span> = main{display: block;position: relative} <span class='block'>Block Text</span> = Digunakan untuk menyoroti bagian yang perlu diganti oleh user
Daftar isi atau table of content
Merupakan fitur yang biasanya terdapat pada wikipedia yang berfungsi untuk memudahkan user untuk mengetahui poin utama atau isi postingan dalam postingan.
// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h4> pada artikel Anda. Contoh:
<h4>Judul subheading</h4> Isi paragraf pada subheading artikel
// Tambahkan id pada heading menjadi seperti dibawah :
<h4 id='toc-1'>Judul subheading</h4> Isi paragraf pada subheading artikel
Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya ubah penulisan dafar isi menjadi seperti dibawah ini:
Screenshot dibuat pada tanggal : 25 Mei 2020
