Inilah Ciri Template Dinamis Masa Kini Yang Valid HTML5 100%
www.azid45.web.id - Inilah Ciri Template Dinamis Masa Kini Yang Valid HTML5 100%. Assalamualaikum.Wr.Wb, belajar template blogger secara otodidak menjadikan saya sedikit demi sedikit tahu akan CSS, HTML, dan Java Script. Dengan belajar melalui blog legendaris kang Adhy Suryadi mulai dari inpact template beliau hingga source code akhirnya saya mulai bisa untuk membuat blog sendiri.
Dari pengalaman inilah kemudian saya mengetahui bahwa dalam ilmu blogging salah satunya adalah template setidaknya memiliki 6 hal utama, yaitu Responsive, SEO Friendly, Mobile Friendly, Fast Loading, Valid Struktur data (tidak ada yang error) dan valid HTML5 ataupun AMP bagi blog AMP. Dengan kriteria tersebut setidaknya blog anda akan dicintai oleh google, dan akan lebih dicintai dikala artikel dan setting postingan pada blog anda memiliki jumlah kata minimal 300 - 500 kata bahkan dalam forum blogger di facebook menjelaskan sekarang membutuhkan kata minimal 1000 - 1500 kata dan tetnunya postingan harus lebih SEO Friendly.
Lho kok SEO Friendly lagi?, kan templatenya udah SEO Friendly. Ya, secara umum selain memiliki template yang SEO Friendly setidaknya postingan anda juga harus SEO Friendly dan valid HTML5 maupun AMP. Untuk dasar postingan SEO Friendly sendiri, dari pengalaman saya selain jumlah kata yang banyak juga perlu diperhatikan terkait gambar dalam artikel. Untuk menjadi SEO Friendly setidaknya minimalnya ada satu gambar setiap artikelnya. Seperti halaman ini misalnya.
Gambar didalam artikel juga tidak boleh sembarangan asal comot, bisa jadi blog anda akan terkena plagiarisme gambar. Untuk keamanan blog anda, anda bisa mengunduh gambar di pixabay.com, disana semua gratis dan untuk lebih amannya lagi buatlah watermark pada gambar dengan nama blog anda. Saat pemasangan gambar pada blog pun juga perlu diperhatikan yaitu setidaknya memiliki atribut alt dan title pada setiap gambar yang ada pada postingan.
Apakah ada yang lain?, ya pengalaman lagi saat menyisipkan link juga perlu diperhatikan. Sekarang google memiliki nilai setiap apa yang anda lakukan pada blog anda. Dengan inpact blog anda di google chrome dengan memilih audit - lighthouse maka anda bisa melihat seberapa tinggi skor blog anda dimata google terutama postingan dan link yang anda tanam pada blog anda. Salah satu yang perlu diperhatikan adalah ketika anda menyisipkan sebuah link internal maupun eksternal dengan menggunakan target blank atau dibuka pada new tab (target='_blank') maka pastikan blog anda memiliki rel noopener (rel='noopener') agar nilai skor lighthouse anda semakin meningkat.
Selain didalam postingan, anda juga harus menggunakan cara tersebut pada template anda secara umum. Maksudnya pada kode yang ada pada menu tema - edit HTML periksalah apakah target='_blank' yang ada pada template anda sudah terdapat rel noopener atau belum, serta dalam setiap pages list, gambar, dan link sudah terdapat titilenya atau belum.
Ciri Template Dinamis Valid HTML5 100%
Jadi ngelantur ke masalah SEO padahal tema postingan ini adalah masalah template. Tetapi tidak apalah, kan SEO juga bagian dari template. Terus yang dimaksud template dinamis itu apa? dan bagaimana ciri-cirinya?. Secara mendasar menurut saya pribadi dan keterangan dari blog terkenal seperti kang Adhy Suryadi, dan Mas Sugeng pernah menyinggung pada template premiumnya "bahwa header sticky merupakan template masa kini". Lantas apa hubungnya?, Baik, secara umum dalam ilmu ilmiah kata dinamis merupakan sebuah ungkapan dimana kita sebagai orang harus memilih target jauh kedepan, berubah sesuai dengan keadaan zaman. Jadi, setiap karakteristik template pastinya berubah-ubah pada zamannya. Terus ciri-cirinya bagaimana?, untuk mengetahuinya anda bisa simak penjelasan berikut ini:
Pertama, Header Sticky atau Fixed.
Jika pada tahun 2000-an kita mengenal blog yang masih sangat simple dan hanya menampilkan blog untuk pengguna dekstop, berbeda dengan masa 2012-an misalnya blog memiliki karakter header dengan titile di sebelah kiri dan kotak iklan disebelah kanan meskipun agak banyak blog yang belum responsive bisa digunakan secara nyaman pada menu mobile. Akan tetapi blog di era 2017 akhir hingga saat ini semakin jauh perubahan terkait template blog, jika header yang paling dicari adalah terdapat iklan disamping kanan dengan tempilan title simple di sebelah kiri maka saat ini blog lebih digemari dengan header berupa sticky atau fixed dengan responsive pada semua layar baik itu dekstop, tablet hingga mobile. Lebih hebatnya lagi sejak saat itu google juga merekomendasikan untuk menggunakan template AMP yang khusus untuk pengguna mobile. Maklumlah sekarang zamannya Era milineal dan revoluse indsutri yang dengan salah satu ciri ketergantungan manusia pada Gedget.
Kedua, Responsive
Sudah saya singgung point pertama, jadi selain memiliki ciri header dengan ukuran yang minim dan berupa sticky atau fixed yang dapat melayan jika di scroll dengan tujuan untuk memudahkan pengunjung bisa klik navigasi, template yang dinamis juga harus responsive. Mengapa demikian?, tidak lain adalah zamanlah yang mengubah itu semua. Dengan teknologi yang semakin berkembang, membuat akses internet mudah untuk dijangkau dan medianya pun muda untuk dibeli tidak harus lagi komputer namun perangkat HP juga sudah bisa mengakses internet untuk berselancar didunia maya.
Dengan hal tersebut tentunya pengguna blog juga harus mengubah tampilannya agar pengguna mobile bisa nyaman dengan blog yang mereka kunjungi. Akhirnya pihak google membuat kebijakan baru salah satu kualitas template dan blog haruslah "Responsive". Responsive itu bagaimana sih?, ya bagaimana ya, intinya baik tampilan dekstop maupun mobile tidak acak-acakannlah, akan tetapi rapi dan enak dipandang, tulisannya pun menyesuaikan jika di dekstop agak besar biar bisa dilihat dan di mobile jangan terlalu besar dan jangan terlalu kecil apalagi sidebarnya masih muncul di sebelah kanan atau kiri wah itu mah bikin sakit mata.
Terus untuk mengetahui template itu responsive atau tidak bagaimana? untuk mengetahui template itu responsive setahu saya ada dua ciri, yaitu pertama memiliki tag meta berikut ini
Kedua terdapat kode css seperti berikut ini
Atau juga
Lantas apa bedanya min-width sama max-width?, kalau max buat css diatas batas angka tidak berlaku namun dibawahnya berlaku, sebaliknya untuk min buat css dibawahnya tidak berlaku sedangkan berlaku untuk diatasnya. Bingung ya?, intinya itulah, nanti juga tahu sendiri.
Ketiga, menggunakan satu tag style di dalam head tanpa tag conditional
Selanjutnya adalah memiliki kode CSS3 yang dibungkus dengan hanya satu kode style. Kok bisa bukannya biasanya pada template terdapat beberapa style untuk membungkus kode CSS dan terdapat tag conditional pada setiap pembungkus style dengan tujuan membedakan tampilan antara home page postingan dan static serta error page?. Ya, memang sejauh ini cara tersebut masih dipakai namun ada cara terbaru yang perlu anda ketahui bahwa ada cara untuk membedahkan tampilan antara home page, postingan dan static page serta error page tanpa harus membedahkan stylenya lho.
Anda pasti tahu template blog kang Adhy Suryadi akhir-akhir ini bukan?, template yang pertama kali di buat oleh kang Adhy Suryadi sangat tren pada setiap masanya ya template kompi flexible Non AMP versi 8. Template ini jika anda lihat maka hanya menggunakan satu style saja untuk membungkus kode CSS, sedangkan tampilan pada setiap laman berbeda-beda jika di home page terdapat thumbanil gambar dan page navigationnya ada homenya dan agak besar pula, akan tetapi ketika anda lihat pada postingan maka tampilannya berbeda yaitu tidak ada home serta agak lebih ramping serta thumbnailnya juga tidak ada, dan jika sobat melihat pada home page dan postingan terdapat sidebar maka pada laman static page dan error page maka sobat tidak akan menlihat sidebar.
Selama ini cara tersebut sudah lama digunakan oleh kang Adhy Suryadi pada beberapa template sebelumnya seperti kompi minimalis, kompi flexible AMP versi 3, dan kompiajaib AMP HTML Versi 3. Untuk menggunakan CSS3 hanya satu style anda perlu menanmkan kode b:class dengan setiap css memerlukan tambahan di depan kode .homepage untuk halaman home, .home_page untuk halaman index, .static_page untuk halaman static, #error-page untuk halaman error, serta .post dan post-body untuk postingan. Lebih jelasnya kode b:class nya adalah sebagi berikut:
Keempat, menggunanakn shcema markup JSON-LD
Menurut kabar terbaru dari Dian admin masih terjaga pihak google merekomendasikan template blog menggunakan schme markup JSON-LD. Dengan schema markup tersebut lanjutnya akan menjadikan blog lebih SEO Friendly, untuk jelasnya simak keteringan disini. Menurut saya sendiri memang antara tag HTML menggunakan microdata (yang selama ini banyak digunakan oleh pengembang template) jauh lebih mudah menggunakan JSON-LD.
Dengan menggunakan schema markup JSON-LD juga menjadikan template sobat yang HTML5 menjadi valid HTML5 100%. hal tersebut berbeda jika anda menggunakan b:skin pada template anda dengan template yang bisa di desain pada menu desain tema blogger (tema - sesuaikan), maka untuk valid HTML5 akan terdapat beberapa Error. Sebagai contoh adalah template saya simple responsive dengan keunggulan bisa di desain tema blogger (sesuaikan) tanpa menuju edit HTML dengan template saya simple ajaib Non AMP dengan pembungkus style tanpa b:skin untuk bisa desain tema blogger.
(template simple ajaib dengan markup JSON-LD)
(template simple responsive dengan markup microdata dan b:skin untuk desain tema blog)
Dari kedua gambar tersebut sangat jelas berpedaan untuk valid HTML antara JSON-LD dan markup microdata. Sampai saat ini saya belum bisa menyelesaikan permasalahan ini agar valid HTML5 100% dengan menggunakan markup microdata dan b:skin desainer tema blogger. Memang keduanya memiliki kelebihan dan kekurangannya masing-masing sampai batas kemampuan saya ini. Semoga saja ada komentar untuk mengatasi masalah template simple responsive ini. Amin.
Terus apakah bisa kita menggabungkan antara schema markup JSON-LD, dan microdata?, untuk saat ini sangat bisa, contoh saja blog kompiajaib dan masih terjaga. Mereka beruda memaduhkan antara schmema markup JSON-LD dengan microdata hanya saja jika kompiajaib memaduhkan hanya pada breadcrumb untuk microdata dan lainnya menggunakan JSON-LD maka masih terjaga sebaliknya.
Terus bagaimana membuat template kita agar valid uji struktur data dan valid HTML5 dengan markup JSON-LD?, Untuk mengenai hal ini, kang Adhy Suryadi menyarankan sebelumnya anda harus menghapus markup itemprop, itemscope, atau itemtype serta hentry yang ada pada <article ....>. Jika sudah langkah selanjutnya taruh kode berikut ini tepat dibawah kode <article class='post'>
Dan untuk Breadchrumb taruh aja kode berikut tepat dibawah kode diatas tadi
Jika sobat sudah ada breadchrumb lebih baik dihapus saja agar tidak double. Adapun untuk home page taruh kode berikut ini diatas kode </head>
Dengan menggunakan JSON-LD tersebut anda juga bisa mengatasi masalah di block meski di indeks oleh google, dengan cara menambahkan meta tag pada bagian head dibawah ini:
Kemudian ganti kode robots.txt anda yang biasanya seperti ini
Menjadi seperti dibawah ini:
Kelima, Mengubah kode all-head-content dengan meta head yang sudah diurai
Ciri selanjutnya template dimanis adalah memiliki perkembangan dalam penggunaan meta tag all head. Hal ini dikarenakan tag tersebut all-head-content terdapat kode yang menyebabkan error HTML5. Untuk mengatasi hal tersebut akhirnya kang Adhy Suryadi membuat postingan dan mengganti kode bawaan blogger tersebut dengan kode dibawah ini
Dengan menggunakan kode tersebut setidaknya mengurangi error HTML5.
Keenam, menghilangkan type="text/css" dan type="text/javascript"
Ciri selanjutnya menurut saya adalah template yang dinamis dan agar valid HTML5 adalah sudah tidak terdapat kode dengan type text css maupun javascript. Untuk itu, jika template anda masih ada type tersebut maka segeralah dihapus agar error HTML5 semakin berkurang.
Secara umum kita bisa dengan mudah menghapus kode type tersebut yaitu tinggal CTRL+SHIFT+R kemudian ketik type='text/css' kemudian enter dan enter, dengan langkah yang sama CTRL+SHIFT+R kemudian ketik type='text/javascript' kemudian enter dan enter. Akan tetapi pada sebuah kasus, anda tetap akan menemukan error yang sama yaitu pada <style id='page-skin-1' type='text/css'>. Untuk mengatasi hal ini anda bisa mengikuti cara yang digunakan kang Adhy Suryadi yaitu menambahkan tag conditional <b:if cond='data:view.isLayoutMode'> sebelum kode <b:skin>, lebih lengkapnya simak dibawah ini:
Untuk blog Non AMP
Untuk Blog AMP
Dari kode tersebut ternyata masih teradapat kelemahan. Dari pengalaman saya, tat kala menggunakan kode tersebut pada template simple responsive dengan menggunakan <b:skin> yang didalamnya terdapat kode css dan kode variable untuk memudahkan pengguna mengubah font dan warna pada menu desainer tema blogger ternyata menyebabkan error pada tampilan blog. Akhirnya saya merelakan blog dengan tetap valid HTML5 akan tetapi tidak 100% valid karena tetap ada yang Error.
Ketujuh, Template Lebih Fast Loading dan Skor Hijau Pada Lighthouse audit
Ciri yang terakhir adalah template yang dinamis adalah template yang lebih fast loading baik pada mobile maupun pada dekstop. Untuk membuat blog lebih fast loading kita membutuhkan sebuah lazy load, baik itu lazy load image, lazy load google adsense, maupun lazy load google analytics, serta lazy load java script.
Lazy load image milik kak Igniel (class lazy)
Lazy load image milik kang Adhy Suryadi (class lazyload)
Lazy Load Google Adsense
Lazy load google analytics
Lazy load java script
Adapun untuk cara lighthouse agar mendapatkan skor yang bagus dan teroptimasi dengan baik anda bisa baca disini.
Demikianlah ciri template dinamis masa kini yang valid HTML5 100%. Jika anda ingin memiliki template sebagaimana ciri diatas, anda bisa membeli kompi flexible versi 8 milik kang Adhy Suryadi di blog beliau kompiajaib.com, atau bisa juga template saya yang simple ajaib. Semoga bermanfaat.
Dari pengalaman inilah kemudian saya mengetahui bahwa dalam ilmu blogging salah satunya adalah template setidaknya memiliki 6 hal utama, yaitu Responsive, SEO Friendly, Mobile Friendly, Fast Loading, Valid Struktur data (tidak ada yang error) dan valid HTML5 ataupun AMP bagi blog AMP. Dengan kriteria tersebut setidaknya blog anda akan dicintai oleh google, dan akan lebih dicintai dikala artikel dan setting postingan pada blog anda memiliki jumlah kata minimal 300 - 500 kata bahkan dalam forum blogger di facebook menjelaskan sekarang membutuhkan kata minimal 1000 - 1500 kata dan tetnunya postingan harus lebih SEO Friendly.
Lho kok SEO Friendly lagi?, kan templatenya udah SEO Friendly. Ya, secara umum selain memiliki template yang SEO Friendly setidaknya postingan anda juga harus SEO Friendly dan valid HTML5 maupun AMP. Untuk dasar postingan SEO Friendly sendiri, dari pengalaman saya selain jumlah kata yang banyak juga perlu diperhatikan terkait gambar dalam artikel. Untuk menjadi SEO Friendly setidaknya minimalnya ada satu gambar setiap artikelnya. Seperti halaman ini misalnya.
Gambar didalam artikel juga tidak boleh sembarangan asal comot, bisa jadi blog anda akan terkena plagiarisme gambar. Untuk keamanan blog anda, anda bisa mengunduh gambar di pixabay.com, disana semua gratis dan untuk lebih amannya lagi buatlah watermark pada gambar dengan nama blog anda. Saat pemasangan gambar pada blog pun juga perlu diperhatikan yaitu setidaknya memiliki atribut alt dan title pada setiap gambar yang ada pada postingan.
Apakah ada yang lain?, ya pengalaman lagi saat menyisipkan link juga perlu diperhatikan. Sekarang google memiliki nilai setiap apa yang anda lakukan pada blog anda. Dengan inpact blog anda di google chrome dengan memilih audit - lighthouse maka anda bisa melihat seberapa tinggi skor blog anda dimata google terutama postingan dan link yang anda tanam pada blog anda. Salah satu yang perlu diperhatikan adalah ketika anda menyisipkan sebuah link internal maupun eksternal dengan menggunakan target blank atau dibuka pada new tab (target='_blank') maka pastikan blog anda memiliki rel noopener (rel='noopener') agar nilai skor lighthouse anda semakin meningkat.
Selain didalam postingan, anda juga harus menggunakan cara tersebut pada template anda secara umum. Maksudnya pada kode yang ada pada menu tema - edit HTML periksalah apakah target='_blank' yang ada pada template anda sudah terdapat rel noopener atau belum, serta dalam setiap pages list, gambar, dan link sudah terdapat titilenya atau belum.
Ciri Template Dinamis Valid HTML5 100%
Jadi ngelantur ke masalah SEO padahal tema postingan ini adalah masalah template. Tetapi tidak apalah, kan SEO juga bagian dari template. Terus yang dimaksud template dinamis itu apa? dan bagaimana ciri-cirinya?. Secara mendasar menurut saya pribadi dan keterangan dari blog terkenal seperti kang Adhy Suryadi, dan Mas Sugeng pernah menyinggung pada template premiumnya "bahwa header sticky merupakan template masa kini". Lantas apa hubungnya?, Baik, secara umum dalam ilmu ilmiah kata dinamis merupakan sebuah ungkapan dimana kita sebagai orang harus memilih target jauh kedepan, berubah sesuai dengan keadaan zaman. Jadi, setiap karakteristik template pastinya berubah-ubah pada zamannya. Terus ciri-cirinya bagaimana?, untuk mengetahuinya anda bisa simak penjelasan berikut ini:
Pertama, Header Sticky atau Fixed.
Jika pada tahun 2000-an kita mengenal blog yang masih sangat simple dan hanya menampilkan blog untuk pengguna dekstop, berbeda dengan masa 2012-an misalnya blog memiliki karakter header dengan titile di sebelah kiri dan kotak iklan disebelah kanan meskipun agak banyak blog yang belum responsive bisa digunakan secara nyaman pada menu mobile. Akan tetapi blog di era 2017 akhir hingga saat ini semakin jauh perubahan terkait template blog, jika header yang paling dicari adalah terdapat iklan disamping kanan dengan tempilan title simple di sebelah kiri maka saat ini blog lebih digemari dengan header berupa sticky atau fixed dengan responsive pada semua layar baik itu dekstop, tablet hingga mobile. Lebih hebatnya lagi sejak saat itu google juga merekomendasikan untuk menggunakan template AMP yang khusus untuk pengguna mobile. Maklumlah sekarang zamannya Era milineal dan revoluse indsutri yang dengan salah satu ciri ketergantungan manusia pada Gedget.
Kedua, Responsive
Sudah saya singgung point pertama, jadi selain memiliki ciri header dengan ukuran yang minim dan berupa sticky atau fixed yang dapat melayan jika di scroll dengan tujuan untuk memudahkan pengunjung bisa klik navigasi, template yang dinamis juga harus responsive. Mengapa demikian?, tidak lain adalah zamanlah yang mengubah itu semua. Dengan teknologi yang semakin berkembang, membuat akses internet mudah untuk dijangkau dan medianya pun muda untuk dibeli tidak harus lagi komputer namun perangkat HP juga sudah bisa mengakses internet untuk berselancar didunia maya.
Dengan hal tersebut tentunya pengguna blog juga harus mengubah tampilannya agar pengguna mobile bisa nyaman dengan blog yang mereka kunjungi. Akhirnya pihak google membuat kebijakan baru salah satu kualitas template dan blog haruslah "Responsive". Responsive itu bagaimana sih?, ya bagaimana ya, intinya baik tampilan dekstop maupun mobile tidak acak-acakannlah, akan tetapi rapi dan enak dipandang, tulisannya pun menyesuaikan jika di dekstop agak besar biar bisa dilihat dan di mobile jangan terlalu besar dan jangan terlalu kecil apalagi sidebarnya masih muncul di sebelah kanan atau kiri wah itu mah bikin sakit mata.
Terus untuk mengetahui template itu responsive atau tidak bagaimana? untuk mengetahui template itu responsive setahu saya ada dua ciri, yaitu pertama memiliki tag meta berikut ini
<meta content='width=device-width, initial-scale=1' name='viewport'/>
Kedua terdapat kode css seperti berikut ini
@media screen and (max-width:1240px){.....kode css ...} (angka 1240 bisa berubah-ubah)Atau juga
@media screen and (min-width:800px){.....kode css ...}(angka 800 bisa berubah-ubah)Lantas apa bedanya min-width sama max-width?, kalau max buat css diatas batas angka tidak berlaku namun dibawahnya berlaku, sebaliknya untuk min buat css dibawahnya tidak berlaku sedangkan berlaku untuk diatasnya. Bingung ya?, intinya itulah, nanti juga tahu sendiri.
Ketiga, menggunakan satu tag style di dalam head tanpa tag conditional
Selanjutnya adalah memiliki kode CSS3 yang dibungkus dengan hanya satu kode style. Kok bisa bukannya biasanya pada template terdapat beberapa style untuk membungkus kode CSS dan terdapat tag conditional pada setiap pembungkus style dengan tujuan membedakan tampilan antara home page postingan dan static serta error page?. Ya, memang sejauh ini cara tersebut masih dipakai namun ada cara terbaru yang perlu anda ketahui bahwa ada cara untuk membedahkan tampilan antara home page, postingan dan static page serta error page tanpa harus membedahkan stylenya lho.
Anda pasti tahu template blog kang Adhy Suryadi akhir-akhir ini bukan?, template yang pertama kali di buat oleh kang Adhy Suryadi sangat tren pada setiap masanya ya template kompi flexible Non AMP versi 8. Template ini jika anda lihat maka hanya menggunakan satu style saja untuk membungkus kode CSS, sedangkan tampilan pada setiap laman berbeda-beda jika di home page terdapat thumbanil gambar dan page navigationnya ada homenya dan agak besar pula, akan tetapi ketika anda lihat pada postingan maka tampilannya berbeda yaitu tidak ada home serta agak lebih ramping serta thumbnailnya juga tidak ada, dan jika sobat melihat pada home page dan postingan terdapat sidebar maka pada laman static page dan error page maka sobat tidak akan menlihat sidebar.
Selama ini cara tersebut sudah lama digunakan oleh kang Adhy Suryadi pada beberapa template sebelumnya seperti kompi minimalis, kompi flexible AMP versi 3, dan kompiajaib AMP HTML Versi 3. Untuk menggunakan CSS3 hanya satu style anda perlu menanmkan kode b:class dengan setiap css memerlukan tambahan di depan kode .homepage untuk halaman home, .home_page untuk halaman index, .static_page untuk halaman static, #error-page untuk halaman error, serta .post dan post-body untuk postingan. Lebih jelasnya kode b:class nya adalah sebagi berikut:
<b:class cond='data:blog.pageType == "static_page"' name='static_page'/> <b:class cond='data:blog.pageType == "index"' name='home_page'/> <b:class cond='data:blog.url == data:blog.homepageUrl' name='homepage'/>
Keempat, menggunanakn shcema markup JSON-LD
Menurut kabar terbaru dari Dian admin masih terjaga pihak google merekomendasikan template blog menggunakan schme markup JSON-LD. Dengan schema markup tersebut lanjutnya akan menjadikan blog lebih SEO Friendly, untuk jelasnya simak keteringan disini. Menurut saya sendiri memang antara tag HTML menggunakan microdata (yang selama ini banyak digunakan oleh pengembang template) jauh lebih mudah menggunakan JSON-LD.
Dengan menggunakan schema markup JSON-LD juga menjadikan template sobat yang HTML5 menjadi valid HTML5 100%. hal tersebut berbeda jika anda menggunakan b:skin pada template anda dengan template yang bisa di desain pada menu desain tema blogger (tema - sesuaikan), maka untuk valid HTML5 akan terdapat beberapa Error. Sebagai contoh adalah template saya simple responsive dengan keunggulan bisa di desain tema blogger (sesuaikan) tanpa menuju edit HTML dengan template saya simple ajaib Non AMP dengan pembungkus style tanpa b:skin untuk bisa desain tema blogger.
Dari kedua gambar tersebut sangat jelas berpedaan untuk valid HTML antara JSON-LD dan markup microdata. Sampai saat ini saya belum bisa menyelesaikan permasalahan ini agar valid HTML5 100% dengan menggunakan markup microdata dan b:skin desainer tema blogger. Memang keduanya memiliki kelebihan dan kekurangannya masing-masing sampai batas kemampuan saya ini. Semoga saja ada komentar untuk mengatasi masalah template simple responsive ini. Amin.
Terus apakah bisa kita menggabungkan antara schema markup JSON-LD, dan microdata?, untuk saat ini sangat bisa, contoh saja blog kompiajaib dan masih terjaga. Mereka beruda memaduhkan antara schmema markup JSON-LD dengan microdata hanya saja jika kompiajaib memaduhkan hanya pada breadcrumb untuk microdata dan lainnya menggunakan JSON-LD maka masih terjaga sebaliknya.
Terus bagaimana membuat template kita agar valid uji struktur data dan valid HTML5 dengan markup JSON-LD?, Untuk mengenai hal ini, kang Adhy Suryadi menyarankan sebelumnya anda harus menghapus markup itemprop, itemscope, atau itemtype serta hentry yang ada pada <article ....>. Jika sudah langkah selanjutnya taruh kode berikut ini tepat dibawah kode <article class='post'>
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<script type='application/ld+json'>{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:post.canonicalUrl/>"
},
"headline": "<data:view.title.escaped/>",
<b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi postingan <data:view.title.escaped/> untuk membaca artikel selengkapnya dengan klik link di atas.",</b:if>
"datePublished": "<data:post.timestampISO8601/>",
"dateModified": "<data:post.lastUpdatedISO8601/>",
"image": {
"@type": "ImageObject",<b:if cond='data:post.firstImageUrl'>"url": "<b:eval expr='resizeImage(data:post.firstImageUrl,1280,"1280:720")'/>",<b:else/>"url": "URL Gambar ukuran 1280 ",</b:if>
"height": 720,
"width": 1280
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"logo": {
"@type": "ImageObject",
"url": "URL Gambar ukuran 600",
"width": 600,
"height": 60
}
},
"author": {
"@type": "Person",
"name": "<data:post.author/>"
}
}</script>
</b:if>Dan untuk Breadchrumb taruh aja kode berikut tepat dibawah kode diatas tadi
<b:if cond='data:view.isPost and data:post.labels'>
<script type='application/ld+json'>{
"@context":"https://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":{
"@type":"WebSite",
"@id":"<data:blog.homepageUrl/>",
"url":"<data:blog.homepageUrl/>",
"name":"<data:blog.title/>"
}
}<b:loop index='num' values='data:post.labels' var='label'>,
{
"@type":"ListItem",
"position": <b:eval expr='data:num + 2'/>,
"item":{
"@type":"WebPage",
"@id":"<data:label.url/>",
"url":"<data:label.url/>",
"name":"<data:label.name/>"
}
}</b:loop>
]
}
</script>
</b:if>Jika sobat sudah ada breadchrumb lebih baik dihapus saja agar tidak double. Adapun untuk home page taruh kode berikut ini diatas kode </head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@graph":
[
{
"@type": "Webpage",
"url": "<data:blog.canonicalHomepageUrl/>",
"name": "<data:blog.title/>",
"headline":"<data:blog.title/>",
<b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi <data:blog.title/> untuk membaca postingan-postingan menarik.",</b:if>
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<data:blog.canonicalHomepageUrl/>"
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"url": "<data:blog.canonicalHomepageUrl/>",
"logo": {
"url": "Url Gambar dengan ukuran 600x60",
"width": 600,
"height": 60,
"@type": "ImageObject"
}
},
"image": {
"@type": "ImageObject",
"url": "Url Gambar dengan ukuran 1280x720",
"width": 1280,
"height": 720
}
},
{
"@type": "WebSite",
"url": "<data:blog.canonicalHomepageUrl/>",
"potentialAction": {
"@type": "SearchAction",
"target": "<data:blog.canonicalHomepageUrl/>search?q={q}",
"query-input": "required name=q"
}
}
]
}
</script>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "Person",
"name": "YOUR_NAME",
"url": "https://domainanda.com/",
"sameAs": [
"https://www.facebook.com/xxxxxxxxxx",
"https://instagram.com/xxxxxxxxxx",
"https://www.linkedin.com/in/xxxxxxxxxx",
"https://twitter.com/xxxxxxxxxx",
"https://www.pinterest.com/xxxxxxxxxx",
"https://www.youtube.com/xxxxxxxxxx"
]
}
</script>
</b:if>Dengan menggunakan JSON-LD tersebut anda juga bisa mengatasi masalah di block meski di indeks oleh google, dengan cara menambahkan meta tag pada bagian head dibawah ini:
<b:if cond='data:view.isArchive'> <meta content='noindex,noarchive' name='robots'/> </b:if>
Kemudian ganti kode robots.txt anda yang biasanya seperti ini
User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search Allow: / Sitemap: https://www.domainanda.com/sitemap.xml
Menjadi seperti dibawah ini:
User-agent: * Disallow: Sitemap: https://www.domainanda.com/sitemap.xml Sitemap: https://www.domainanda.com/atom.xml?redirect=false&start-index=1&max-results=500 Sitemap: https://www.domainanda.com/feeds/posts/default Sitemap: https://www.domainanda.com/sitemap-pages.xml
Kelima, Mengubah kode all-head-content dengan meta head yang sudah diurai
Ciri selanjutnya template dimanis adalah memiliki perkembangan dalam penggunaan meta tag all head. Hal ini dikarenakan tag tersebut all-head-content terdapat kode yang menyebabkan error HTML5. Untuk mengatasi hal tersebut akhirnya kang Adhy Suryadi membuat postingan dan mengganti kode bawaan blogger tersebut dengan kode dibawah ini
<meta charset='utf-8'/>
<!-- Chrome, Firefox OS and Opera -->
<meta content='#2B0C93' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#2B0C93' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.canonicalHomepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='https://cdn.staticaly.com/img/3.bp.blogspot.com/-neRXGiMMl78/VwNf50cBEwI/AAAAAAAAmGk/jvUDozATUdU2fyPTXIc1fRjLdRLIpQQeA/s32/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://cdn.staticaly.com/img/4.bp.blogspot.com/-_fuRWmsvvhw/VwNgCd9RvqI/AAAAAAAAmGo/IFhwNoh-_OIEsUORb-ie9gauR5HQgKAhQ/s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://cdn.staticaly.com/img/2.bp.blogspot.com/-Ahu-Rk5-2pU/VwNgIz2ruDI/AAAAAAAAmGs/lt_weAllC2ArCyVu09nB7Gms_HUqJIeUw/s180/apple-icon-180x180.png' rel='apple-touch-icon'/>
<meta content='https://cdn.staticaly.com/img/2.bp.blogspot.com/-9y27HsKCpyc/VwNgnWg1DlI/AAAAAAAAmG0/3Vl1JcjOBGoPAcMCqKIDDaMg53UffCMDg/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + "- RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/" + data:blog.postId + "/comments/default"' expr:title='data:blog.title + "- Atom"' rel='alternate' type='application/atom+xml'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.meTag/>
</b:if>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.canonicalHomepageUrl' rel='openid.delegate'/>
<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/ka@master/v8/manifest.json' rel='manifest'/>
<link expr:href='data:blog.canonicalUrl' hreflang='x-default' rel='alternate'/>
<b:if cond='data:view.isArchive'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' name='description'/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' property='og:description'/>
<meta expr:content='"Silahkan kunjungi postingan " + data:blog.pageName.escaped + " untuk membaca artikel selengkapnya dengan klik link di atas."' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk membaca postingan-postingan menarik."' name='description'/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk membaca postingan-postingan menarik."' property='og:description'/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk membaca postingan-postingan menarik."' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType in {"static_page"}'>
<meta expr:content='data:blog.pageName.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk mendapatkan informasi selengkapnya."' name='description'/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk mendapatkan informasi selengkapnya."' property='og:description'/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle.escaped + " untuk mendapatkan informasi selengkapnya."' name='twitter:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.firstImageUrl'>
<meta expr:content='resizeImage(data:blog.firstImageUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='resizeImage(data:blog.postImageThumbnailUrl,1200,"1200:630")' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<meta content='https://cdn.staticaly.com/img/3.bp.blogspot.com/-ccUYbxIIDvM/VqSSu92MnZI/AAAAAAAAksc/HExcuDOoKIQ/s300/logo.png' property='og:image'/>
<meta expr:content='data:blog.title.escaped' property='og:image:alt'/>
<meta content='158' property='og:image:width'/>
<meta content='158' property='og:image:height'/>
</b:if>
</b:if>
</b:if>
<meta content='xxxxxxxxxxxxxx' property='fb:app_id'/>
<meta content='xxxxxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxx' property='fb:profile_id'/>
<meta content='xxxxxxxxxxxxxx' property='fb:pages'/>
<meta content='Nama Anda' name='Author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:author'/>
<meta expr:content='data:blog.title.escaped' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@xxxxxxxxxxxxxx' name='twitter:creator'/>Dengan menggunakan kode tersebut setidaknya mengurangi error HTML5.
Keenam, menghilangkan type="text/css" dan type="text/javascript"
Ciri selanjutnya menurut saya adalah template yang dinamis dan agar valid HTML5 adalah sudah tidak terdapat kode dengan type text css maupun javascript. Untuk itu, jika template anda masih ada type tersebut maka segeralah dihapus agar error HTML5 semakin berkurang.
Secara umum kita bisa dengan mudah menghapus kode type tersebut yaitu tinggal CTRL+SHIFT+R kemudian ketik type='text/css' kemudian enter dan enter, dengan langkah yang sama CTRL+SHIFT+R kemudian ketik type='text/javascript' kemudian enter dan enter. Akan tetapi pada sebuah kasus, anda tetap akan menemukan error yang sama yaitu pada <style id='page-skin-1' type='text/css'>. Untuk mengatasi hal ini anda bisa mengikuti cara yang digunakan kang Adhy Suryadi yaitu menambahkan tag conditional <b:if cond='data:view.isLayoutMode'> sebelum kode <b:skin>, lebih lengkapnya simak dibawah ini:
Untuk blog Non AMP
<b:if cond='data:view.isLayoutMode'> <b:skin><![CDATA[ css style untuk halaman layout di sini ]]></b:skin> </b:if> <style> custom css untuk tampilan blog di sini </style>
Untuk Blog AMP
<b:if cond='data:view.isLayoutMode'> <b:skin><![CDATA[ css style untuk halaman layout di sini ]]></b:skin> </b:if> <style amp-custom='amp-custom'> custom css untuk tampilan blog di sini </style>
Dari kode tersebut ternyata masih teradapat kelemahan. Dari pengalaman saya, tat kala menggunakan kode tersebut pada template simple responsive dengan menggunakan <b:skin> yang didalamnya terdapat kode css dan kode variable untuk memudahkan pengguna mengubah font dan warna pada menu desainer tema blogger ternyata menyebabkan error pada tampilan blog. Akhirnya saya merelakan blog dengan tetap valid HTML5 akan tetapi tidak 100% valid karena tetap ada yang Error.
Ketujuh, Template Lebih Fast Loading dan Skor Hijau Pada Lighthouse audit
Ciri yang terakhir adalah template yang dinamis adalah template yang lebih fast loading baik pada mobile maupun pada dekstop. Untuk membuat blog lebih fast loading kita membutuhkan sebuah lazy load, baik itu lazy load image, lazy load google adsense, maupun lazy load google analytics, serta lazy load java script.
Lazy load image milik kak Igniel (class lazy)
<script>//<![CDATA[
function LazyLoad(){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|LazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>Lazy load image milik kang Adhy Suryadi (class lazyload)
<script>//<![CDATA[
/*! lazysizes - v5.1.0 */
!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}("undefined"!=typeof window?window:{},function(a,b){"use strict";var c,d;if(function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b])}(),!b||!b.getElementsByClassName)return{init:function(){},cfg:d,noSupport:!0};var e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("Event");return e||(e={}),e.instance=c,h.initEvent(d,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?(c&&c.src&&!b[i]("srcset")&&b.setAttribute("srcset",c.src),e({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,c=0,e=d.throttleDelay,g=d.ricTimeout,h=function(){b=!1,c=f.now(),a()},i=m&&g>49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=!0===a)&&(g=33),b||(b=!0,d=e-(f.now()-c),d<0&&(d=0),a||d<9?i():k(i,d))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;a<d?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}},D=function(){var g,l,m,o,p,y,D,F,G,H,I,J,K=/^img$/i,L=/^iframe$/i,M="onscroll"in a&&!/(gle|ing)bot/.test(navigator.userAgent),N=0,O=0,P=0,Q=-1,R=function(a){P--,(!a||P<0||!a.target)&&(P=0)},S=function(a){return null==J&&(J="hidden"==x(b.body,"visibility")),J||"hidden"!=x(a.parentNode,"visibility")&&"hidden"!=x(a,"visibility")},T=function(a,c){var d,f=a,g=S(a);for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)(g=(x(f,"opacity")||1)>0)&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d.right&&I>d.top-1&&F<d.bottom+1);return g},U=function(){var a,f,h,j,k,m,n,p,q,r,s,t,u=c.elements;if((o=d.loadMode)&&P<8&&(a=u.length)){for(f=0,Q++;f<a;f++)if(u[f]&&!u[f]._lazyRace)if(!M||c.prematureUnveil&&c.prematureUnveil(u[f]))aa(u[f]);else if((p=u[f][i]("data-expand"))&&(m=1*p)||(m=O),r||(r=!d.expand||d.expand<1?e.clientHeight>500&&e.clientWidth>500?500:370:d.expand,c._defEx=r,s=r*d.expFactor,t=d.hFac,J=null,O<s&&P<1&&Q>2&&o>2&&!b.hidden?(O=s,Q=0):O=o>1&&Q>1&&P<6?r:N),q!==m&&(y=innerWidth+m*t,D=innerHeight+m,n=-1*m,q=m),h=u[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*t&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||S(u[f]))&&(l&&P<3&&!p&&(o<3||Q<4)||T(u[f],m))){if(aa(u[f]),k=!0,P>9)break}else!k&&l&&!j&&P<4&&Q<4&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=u[f][i](d.sizesAttr)))&&(j=g[0]||u[f]);j&&!k&&aa(j)}},V=B(U),W=function(a){var b=a.target;if(b._lazyCache)return void delete b._lazyCache;R(a),s(b,d.loadedClass),t(b,d.loadingClass),u(b,Y),v(b,"lazyloaded")},X=A(W),Y=function(a){X({target:a.target})},Z=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},$=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},_=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr).replace(/.*?:\/\//g,"//"),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},s(a,d.loadingClass),p&&(clearTimeout(m),m=k(R,2500),u(a,Y,!0)),l&&q.call(j.getElementsByTagName("source"),$),h?a.setAttribute("srcset",h):g&&!l&&(L.test(a.nodeName)?Z(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){var b=a.complete&&a.naturalWidth>1;p&&!b||(b&&s(a,"ls-is-cached"),W(o),a._lazyCache=!0,k(function(){"_lazyCache"in a&&delete a._lazyCache},9)),"lazy"==a.loading&&P--},!0)}),aa=function(a){if(!a._lazyRace){var b,c=K.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,P++,_(a,b,f,e,c))}},ba=C(function(){d.loadMode=3,V()}),ca=function(){3==d.loadMode&&(d.loadMode=2),ba()},da=function(){if(!l){if(f.now()-p<999)return void k(da,999);l=!0,d.loadMode=3,V(),j("scroll",ca,!0)}};return{_:function(){p=f.now(),c.elements=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),j("scroll",V,!0),j("resize",V,!0),a.MutationObserver?new MutationObserver(V).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",V,!0),e[h]("DOMAttrModified",V,!0),setInterval(V,999)),j("hashchange",V,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(a){b[h](a,V,!0)}),/d$|^c/.test(b.readyState)?da():(j("load",da),b[h]("DOMContentLoaded",V),k(da,2e4)),c.elements.length?(U(),z._lsFlush()):V()},checkElems:V,unveil:aa,_aLSL:ca}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;f<g;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width)&&d!==a._lazysizesWidth&&c(a,f,e,d))},f=function(){var b,c=a.length;if(c)for(b=0;b<c;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j("resize",g)},checkElems:g,updateElem:e}}(),F=function(){!F.i&&b.getElementsByClassName&&(F.i=!0,E._(),D._())};return k(function(){d.init&&F()}),c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}});
//]]></script>Lazy Load Google Adsense
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
document.body.className += " sticky";
lazyadsense = true;
}
}, true);
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxxxxx",
enable_page_level_ads: true
});
//]]>
</script>Lazy load google analytics
<script>
//<![CDATA[
window.dataLayer=window.dataLayer || [];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','UA-xxxxxxx-x');var analytics=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===analytics||0!=document.body.scrollTop&&!1===analytics)&&(!function(){var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxx-x";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),analytics=!0)},!0);
//]]>
</script>Lazy load java script
<script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/xxxxxxxxxxxxxxxxxxxxxxxxxxx.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Adapun untuk cara lighthouse agar mendapatkan skor yang bagus dan teroptimasi dengan baik anda bisa baca disini.
Demikianlah ciri template dinamis masa kini yang valid HTML5 100%. Jika anda ingin memiliki template sebagaimana ciri diatas, anda bisa membeli kompi flexible versi 8 milik kang Adhy Suryadi di blog beliau kompiajaib.com, atau bisa juga template saya yang simple ajaib. Semoga bermanfaat.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.