Bantuan dan Penyempurnaan Template Median UI
Tombol navigasi tidak berfungsi
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
<div class='mainIner'> ... </div>
<div class='asideIner'> ... </div>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:
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:
<b:include cond='data:view.isMultipleItems' name='postPagination-more'/>
// Ubah bagian yang ditandai menjadiLog Update
Pembaharuan: 15 Juni 2020
- Perbaikan pada beberapa bug, diantaranya:
- Perbaikan pada kode CSS
- 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
- 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/
- 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
- 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
- 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
