Kekurangan Template Median Ui V1.5 - Banyak Bugs?
Cara Memperbaiki Bug First Image Template Median UICara Menambahkan Widget Translate Pada Template Median UI
2. Bug Pada Posisi Lama Membaca
Ada banyak hal yang aku edit di template Median UI, beberapa diantaranya:
- Icon darkmode (mode gelap / malam)
- Profile penulis ditampilkan pada postingan juga
- Header dijadikan sticky (fixed) pada performa mobile jadi jika di scroll tetap terlihat
- Header di tambah garis pembatas dan bayang biar terpisah dari artikel
- Judul postingan jadi rata tengah (center)
Tapi mungkin 5 hal di atas hanyalah bermitra dengan selera saja, alasannya merupakan setiap orang bebas memutuskan mana yang mereka suka. Tapi ada satu hal yang menurut aku kurang nikmat di lihat yakni posisi Minute Read yang berdampingan dengan tanggal. Lihat tanda panah (Sebelum dan sehabis di edit):
3. Bug Pada Iklan Google Adsense
4. Bug Pada Widget Popular Post
Cara Mengubah Tampilan Homepage Median UI TerbaruCara Modifikasi Tampilan Related Post Template Median UI
6. Bug Pada Tabel
8. Bug Pada Lazyload / Lazysize
Seperti yang kita tahu, Lazyload atau Lazysize berfungsi untuk menangguhkan gambar biar goresan pena di Blog timbul apalagi dulu dan gambar gres akan timbul sesudah kita scroll halaman.
Lazyload ini sungguh menolong mempercepat loading Blog sehingga mengembangkan performa dari Blog kita. Tapi faktanya, Lazyload atau Lazysize yang pasang di template bawaan Median UI sungguh tidak berguna.
Lihat grafik berikut ini, aku tes pakai Cara Mempercepat Loading Template Median UI
Kesimpulan
Meskipun score Performance, Accesibility, Best Practices, dan SEO template Median UI 1.5 mencakup tinggi dan bagus. Tapi ternyata masih banyak kehabisan yang mesti diperbaiki.
Ditambah lagi tidak ada jaminan penghasilan kita jadi tambah naik jika score tinggi tetapi tidak ramah kepada ukuran iklan. Justru menurun dibanding menggunakan template biasa.
Selain itu, template Median UI model 1.5 ini tidak sesuai untuk halaman Safelink, alasannya merupakan tidak bisa menggunakan ukuran iklan yang kita harapkan yang bisa mendongkrak penghasilan.
Jadi, sesudah berbelanja template ini, kiprah kita belum selesai, alasannya merupakan masih ada banyak script dan aba-aba yang mesti di edit biar lebih maksimal. Cek di sini Solusi bugs pada Median UI
Disclaimer
Postingan ini tidak bermaksud untuk menjelekkan template Median UI 1.5 alasannya merupakan aku sendiri telah membicarakan ganjalan ini ke pembuat template. Postingan ini dimaksud biar pembuat template dapat memperbaiki kekurangan, kelemahan, atau bugs yang ada. Sehingga dapat menciptakan template blogger yang terbaik.
Sebetulnya keunggulan template Median UI 1.5 juga banyak. Namun, postingan ini berkonsentrasi pada kelemahannya saja. Mungkin untuk pembahasan kelebihannya akan dibahas pada peluang berikutnya.
Terakhir, postingan ini bisa menjadi materi pertimbangan sebelum berbelanja template lain biar menegaskan beberapa fitur penting seumpama tampilan, keberagaman ukuran iklan yang di dukung, kecepatan, dan user friendly.
Cara Memperbesar Widget Google Translate Pada Template Median Ui Terbaru
CARA PASANG WIDGET TRANSLATE
1. Buka Dashboard Blogger
2. Klik santapan Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
5. Cari kode ]]></b:skin> supaya cepat, tekan Ctrl + F
6. Salin kode CSS Google Translate
/* Google Translate */ #google_translate_element{padding:0;margin-right:3px;margin-top:auto} .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span{display:none!important} .goog-te-menu-frame{box-shadow:none!important} .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='<Group>' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='<Path>' id='_Path_6' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;display:inline-block;font-weight:400;line-height: 1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius: 4px} body{top:0px!important}.darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='<Group>' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='<Path>' id='_Path_6' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;} 7. Letakkan kode CSS Google Translate di atas kode ]]></b:skin>
8. Lalu cari kode </body>
9. Salin kode Javascript Google Translate
<!--[ Javascript Google Translate ]--> <script>/*<![CDATA[*/ var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0); /*]]>*/</script> <script> function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'id',includedLanguages:'id,en,ar,ja,ko,hi',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});</script> Keterangan
pageLanguage: artinya bahasa postingan yang kita buat (kalau blog kalian berbahasa Indonesia, instruksi id jangan diubah)
pageLanguage: artinya bahasa postingan yang kita buat (kalau blog kalian berbahasa Indonesia, instruksi id jangan diubah)
includedLanguage: artinya bahasa tujuan penterjemah (untuk menyertakan bahasa lain, ketik koma, kemudian kode. Contoh instruksi awal: id,en,ar,ja,ko,hi kemudian kita mau tambah bahasa Afrikaans, jadi: id,en,ar,ja,ko,hi,af
Kode Bahasa Yang Bisa Ditambahkan Ke includedLanguage
af (Afrikaans)
ar-dz (Arabic - Algeria)
ar-ly (Arabic - Libya)
ar-ma (Arabic - Morocco)
ar-sa (Arabic - Saudi Arabia)
ar-tn (Arabic - Tunisia)
ar (Arabic)
az (Azeri)
be (Belarusian)
bg (Bulgarian)
bn (Bengali)
bo (Tibetan)
bs (Bosnian)
ca (Catalan)
cs (Czech)
cy (Welsh)
da (Danish)
de-at (German - Austria)
de-ch (German - Switzerland)
de (German)
el (Greek)
en-au (English - Australia)
en-ca (English - Canada)
en-gb (English - Great Britain)
en-ie (English - Ireland)
en-nz (English - New Zealand)
en-us (English - United States)
es-do (Spanish - Dominican Republic)
es (Spanish)
eu (Basque)
fa (Farsi - Persian)
fi (Finnish)
fo (Faroese)
fr-ca (French - Canada)
fr-ch (French - Switzerland)
fr (French)
gd (Gaelic)
he (Hebrew)
hi (Hindi)
hr (Croatian)(
hu (Hungarian)
hy-am (Armenian)
id (Indonesian)
is (Icelandic)
it (Italian)
ja (Japanese)
ka (Georgian)
kk (Kazakh)
km (Khmer)
kn (Kannada)
ko (Korean)
lo (Lao)
lt (Lithuanian)
lv (Latvian)
mk (Maori)
ml (Malayalam)
mr (Marathi)
ms-my (Malay - Malaysia)
ms (Malay)
my (Burmese)
nb (Norwegian)
ne (Nepali)
nl-be (Dutch - Belgium)
nl (Dutch)
pa-in (Punjabi)
pl (Polish)
pt-br (Portuguese - Brazil)
pt (Portuguese)
ro (Romanian)
ru (Russian)
sd (Sindhi)
sk (Slovak)
sl (Slovenian)
sq (Albanian)
sr-cyrl (Serbian - Cyrillic)
sr (Serbian)
sv (Swedish)
sw (Swahili)
ta (Tamil)
te (Telugu)
th (Thai)
ttl-phh
tr (Turkish)
uk (Ukrainian)
ur (Urdu)
uz-latn
uz (Uzbek)
vi (Vietnamese)
yo (Yoruba)
zh-cn (Chinese - Simplified)
zh-hk (Chinese - Hong Kong)
zh-tw (Chinese - Taiwan)
11. Kemudian kita cari daerah menaruh tombol widgetnya. Karena aku pakai template median UI, jadi aku ingin menaruh tombol translate ini sempurna di samping tombol Darkmode / mode gelap (samping icon bulan), maka aku cari instruksi berikut <!--[ Dark mode button ]-->
12. Setelah ketemu, salin kode HTML Translate Button, kemudian letakkan di atas kode <!--[ Dark mode button ]-->
<!--[ Translate Button ]--> <div id='google_translate_element'/> 
HASILNYA
KELEBIHAN WIDGET TRANSLATE INI
- Cepat
Tidak mengusik kecepatan blog, sebab widget gres akan timbul setelah hadirin scroll halaman. - Minimalis
Tampilannya simpel, kecil, tetapi tetap terlihat bahwa ini yakni tombol translate sebab menggunakan icon Google Translate. - Customize Bahasa
Bisa menyertakan dan menghemat bahasa yang kita inginkan. - Userfriendly
Pengunjung dari luar tidak perlu pakai tools lain untuk mengetahui isi blog kita. - Auto Translate
Setelah hadirin memutuskan bahasa yang diinginkan, bahasa tersebut akan terus aktif walau ia mendatangi halaman lain di blog kita. Sehingga hadirin tidak perlu pencet translate berkali-kali yang cuma akan menghasilkan capek.
KEKURANGAN WIDGET TRANSLATE
Walau banyak keistimewaan dari widget ini, tetapi perlu di ingat bahwa widget ini dapat menghemat score Best Practice pada Measure (web.dev). Jika mulanya score Best Practice kita 100, maka akan berubah jadi 93 setelah pasang widget ini. Untuk mengatasinya, silakan pakai Widget Google Translate model Premium Klik Disini
Cara Menangani Iklan Tengah Postingan Tidak Timbul Di Template Median Ui
Alasan Iklan Tengah Tidak Tampil
- Median UI dirancang untuk Editor Blogger Terbaru (jika kita tekan Enter menciptakan Paragraf dengan instruksi <p>). Semetara Blogger Lama senantiasa pakai gaya penulisan Normal yang bila di tekan Enter menciptakan baris gres dengan instruksi <br/>. Sehingga, bila dicek instruksi HTML postingan akan berbeda.
- Iklan tengah postingan di Median UI di setting cuma tampil dikala postingan kita panjang. Settingan defaultnya iklan tengah pertama timbul di paragraf ke 15, dan iklan tengah postingan kedua akan timbul pada paragraf ke 25.
Solusi Untuk Menampilkan Iklan Tengah Artikel
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Klik 1 kali di dalam template, kemudian tekan Ctrl + F
- Cari instruksi berikut <!--[ Script to move widget to the middle of article ]-->
- Maka kita akan mendapatkan 2 buah kode: - Ubah abjad p jadi br atau div (pilih salah satu) - Ubah angka 15 jadi 0 dan ubah angka 25 jadi 5 (atau masukkan angka sesuai keinginan)
Cara Mempercepat Loading Template Median Ui
cek di sini). Salah satu duduk kasus yang ada di Median UI terdapat pada lazyload yang tidak berfungsi maksimal. Hal ini kokoh pada kecepatan loading template.
Untuk itu, berikut aku hadirkan penyelesaian untuk mengoptimalkan skor kecepatan template Median UI. Tapi sebelum mengikuti panduan ini, mohon cek kecepatan blog kalian dahulu lewat situs Measure (web.dev), GTmetrix, dan PageSpeed Insights (google.com). Setelah itu Screenshot score dan perayaan kesalahan yang muncul.
Cara Mempercepat Template Median UI
A. Memperbaiki Lazyload Gambar
Saya agak heran dengan pembuat template Median UI, lantaran ia menyisipkan script Lazyload atau Lazysize tetapi cuma difungsikan untuk menampung halaman gres dan menampung gambar postingan terkait (relatedpost). Ibarat mau mempercepat loading, tetapi cuma 50%, alias setengah hati. Oleh alasannya merupakan itu mari kita penyesuaian templatenya mudah-mudahan full speed hingga 100%.
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Tekan Ctrl + F
- Cari kata lazysizes
- Letakkan arahan saifulLazyLoad di atas kode lazysizes
function saifulLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|saifulLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
Hasilnya:
- Lalu cari kata "lazy" dan ubah menjadi "lazi". Ingat cuma ubah kata ini di bab tertentu saja ya.
1. Cari kode /*! lazysizes lalu ubah menyerupai gambar2. Cari kode <!--[ Post authors ]--> kemudian ubah menyerupai gambar
3. Cari kode <b:includable id='postAuthorImage'> lalu ubah menyerupai gambar
4.Cari kode <b:includable id='authorProfileImage'> lalu ubah menyerupai gambar
5. Cari kode <b:if cond='data:cb.level.authorAvatarSrc'> lalu ubah menyerupai gambar
6. Cari kode <!--[ Preview post ]--> lalu ubah menyerupai gambar
B. Memperbaiki javascript Google Analytic
Javascript Google Tag Manager yang berfungsi untuk memonitor trafik lewat Google Analytic pada template Median UI ternyata mempengaruhi kecepatan loading blog yang signifikan. Maka dari itu, kita mesti meniadakan sebagian kodenya, kemudian memodifikasinya mudah-mudahan tetap berfungsi tetapi tidak memperberat kinerja blog.
Cara Mempercepat Kode Google Analytic
- Cari kode <!--[ Google Analytics new global tag ]--> lalu hapus 1 baris arahan yang ada di bawahnya
- Cari kode </body> kemudian letakkan arahan berikut ini sempurna di atas </body><script type='text/javascript'>//<![CDATA[var LLJSaifullahid=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LLJSaifullahid===!1||0!=document.body.scrollTop&&LLJSaifullahid===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=" + data:blog.analyticsAccountNumber";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LLJSaifullahid=!0)},!0);//]]></script>
Hasilnya:
C. Mengganti Font Bawaan Ke Font Google
Font bawaan di template Median UI terlalu berlebihan. Padahal bentuknya tidak jauh beda dengan font dari Google. Kebanyakan jenis font yang digunakan dalam suatu blog sanggup memperlambat kecepatan blog. Oleh alasannya merupakan itu, lebih baik kita ganti font Median UI dengan font yang lebih praktis tetapi lazim digunakan Google.
Cara Mengganti Font Median UI
- Cari kode /* Font Body */ lalu hapus semua arahan yang ditunjuk tanda panah
- Kemudian ganti dengan arahan gres ini@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');} format('woff');}html,button,input,select,textarea{font-family:sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;display:block}html{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:''content:none}table{border-collapse:collapse;border-spacing:0}
Simpan Tema
Setelah mengikuti panduan di atas, coba cek ulang score kecepatan blog kalian di situs Measure (web.dev), GTmetrix, dan PageSpeed Insights (google.com), kemudian bandingkan dengan score sebelumnya. Bagaimana? Kecepatan naik dan perayaan menyusut kan?
Cara Memperbaiki Bugs Iklan Google Adsense Pada Template Median Ui
Kekurangan Template Median UI v1.5 - Banyak Bugs?, ada bug iklan pada performa mobile Median UI. Setelah melakukan beberapa eksperimen, risikonya aku mendapatkan penyelesaian yang sempurna untuk duduk kasus ini.
Saat menghasilkan iklan static (iklan yang memiliki ukuran tetap), kita mesti menyertakan arahan "min-" pada ukuran iklan tersebut agar tidak berubah jadi iklan responsif. Karena kelemahan template Median UI merupakan senantiasa memaksa iklan static dari perangkat mobile menjadi iklan dinamic (responsif / menyesuaikan ukuran).
Seperti yang sudah aku diskusikan pada postingan Kekurangan Template Median UI v1.5 - Banyak Bugs?, acap kali kita butuh iklan static untuk mengembangkan penghasilan. Misalnya iklan ukuran 300x600, 336x280, 728x90, dan 160x600
Solusi Bug Iklan Template Median UI
A. Membuat Iklan Static
- Buka Dashboard Adsense
- Tekan Iklan
- Tekan Menurut Unit Iklan
- Beri nama iklan
- Lalu atur ukuran iklan jadi Tetap
- Setel ukurannya sesuai keinginan. Saran aku pakai ukuran 300x600 atau 336x280
- Copy arahan iklannya
- Lalu tekan Selesai
B. Memasang Iklan
Silakan paste arahan iklan yang sudah di Copy tadi ke Widget Blog atau pribadi masukkan ke dalam Template. Setelah itu, kita adaptasi kodenya dengan manambahkan arahan min- sebelum width dan height menyerupai pola di bawah
<!-- Iklan 300x600 -->
<ins class="adsbygoogle"
style="display:inline-block;min-width:300px;min-height:600px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Setelah itu gres simpan tema / widgetnya.
Subscribe to:
Posts (Atom)