Update Template Premium Kompi Flexible Non AMP v8

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/04/2019

Update Template Premium Kompi Flexible Non AMP v8 - Template Kompi Flexible merupakan template premium pertama saya dan salah satu template yang paling banyak dibeli. Tidak terasa, template ini sudah sampai ke versi 8 yang artinya tema ini sudah 8 kali diupdate sejak pertama kali dirilis.

Sebenarnya untuk update versi 8 ini sudah banyak direquest oleh pengguna template Kompi Flexible non AMP, namun baru sekarang saya bisa mengupdatenya.

Permintaan update tema Kompi Flexible ini seputar kecepatan loading blog, terutama perihal skor pagespeed insight dan lighthouse.

Seperti kita ketahui bahwa kini kecepatan loading blog atau skor "hijau" pagespeed insight dijadikan faktor rangking di zaman index mobile sekarang ini oleh Google.

Untuk memenuhi faktor rangkin itu, maka template Kompi Flexible saya update agar mendapatkan skor "hijau" di pagespeed dan lighthouse.

Update kali ini merupakan update besar, bukan hanya loading blog saja yang ditingkatkan, tetapi SEO template dan tampilan template juga berubah.

Saya merubah tampilan Kompi Flexible agar pengguna tidak merasa bosan dan dapat penyegaran, tentunya tetap dengan design minimal dan juga disesuaikan dengan tampilan template Kompi Flexible AMP.

Saya juga menambahkan widget Featured Post paling atas yang difungsikan sebagai "sticky post" dan ini bermanfaat bagi blogger yang sering mendapatkan job content replacement atau review post.

Selain itu, update kali ini juga menambahkan lazyload Adsense, karena kita ketahui bahwa js Adsense cukup besar mempengaruhi skor pagespeed dan lighthouse. Untuk itu saya sudah membuat slot-slot iklan yang strategis, jadi bagi pengguna harap betul-betul mengikui anjuran dalam penyimpan kode Adsense. Untuk jenis iklan, Anda bisa bereksperiment dengan mencoba macam-macam unit iklan Adsense.

Selain Adsense, komentar juga menggunakan lazyload dengan komentar Disqus. Dan beberapa lainnya juga dioptimasi seperti sosial share button dan lainnya.

Berikut gambar skor pagespeed insight dan lighthouse dari template Kompi Flexible v8 ini.

 

 

 

 

 

 

Bagi yang sebelumnya sudah membeli template Kompi Flexible non AMP, silahkan tunggu/check inbox email Anda untuk kiriman updatenya.

Bagi yang ingin membeli template Kompi Flexible non AMP ini silahkan hubungi saya melalui kontak blog Kompi Ajaib ini. Template Kompi Flexible non AMP ini saya jual Rp. 100.000

Bagi yang sebelumnya sudah membeli versi AMP nya, saya kasih korting setengah harga jika ingin mencoba versi non AMP ini.

Jadi template Kompi Flexible AMP dan non AMP masing-masing harganya Rp. 100.000, jika ingin dua-duanya harganya Rp. 150.000.

Berikut template Kompi Flexible AMP jika Anda tertarik untuk mencobanya juga.

UPDATE:

Tgl. 24/06/2019: Update v8.20

• Meningkatkan loading blog, silahkan cek dengan lighthouse dan pagespeed insights.
• Memperbaiki meta tag
• Memperbaiki lazyload image
• Validasi Struktur data dan HTML5
• Menambahkan background gradasi
• Merubah tampilan post homepage di mobile
• Beberapa perbaikan lainnya

Tgl. 29/06/2019: Update v8.30

• Memperbaiki lazyload image yang tidak support di beberapa browser.

Bagi yang sebelumnya sudah menggunakan update v8.20 silahkan ikuti beberapa langkah di bawah ini untuk memperbaiki lazyload image yang tidak support di beberapa browser.

1. Pada kode di bawah ini, ganti angka 2 yang ditandai dengan angka 4.

<b:if cond='data:blog.pageType not in {&quot;item&quot;}'>

<link as='script' href='https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_home2.js' rel='preload'/>

</b:if>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>

<link as='script' href='https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_post12.js' rel='preload'/>

</b:if>

2. Cari kode di bawah ini di bagian bawah edit HTML.

<b:if cond='data:blog.pageType not in {&quot;item&quot;}'>

<script>

var RandomPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,numPosts:6};

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_home2.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;



document.addEventListener("DOMContentLoaded",function(){function e(){r&&clearTimeout(r),r=setTimeout(function(){var t=window.pageYOffset;n.forEach(function(e){e.offsetTop<window.innerHeight+t&&(e.src=e.dataset.src,e.src=e.src.replace(/.*?:\/\//g,"//"),e.classList.remove("lazy"))}),0==n.length&&(document.removeEventListener("scroll",e),window.removeEventListener("resize",e),window.removeEventListener("orientationChange",e))},20)}var n;if("IntersectionObserver"in window){n=document.querySelectorAll(".lazy");var t=new IntersectionObserver(function(e){e.forEach(function(e){if(e.isIntersecting){var n=e.target;n.src=n.dataset.src,n.src=n.src.replace(/.*?:\/\//g,"//"),n.classList.remove("lazy"),t.unobserve(n)}})});n.forEach(function(e){t.observe(e)})}else{var r;n=document.querySelectorAll(".lazy"),document.addEventListener("scroll",e),window.addEventListener("resize",e),window.addEventListener("orientationChange",e)}});



function im() {

var x=document.querySelectorAll(".lazyloadimg"),i;for(i=0;i<x.length;i++)x[i].innerHTML=x[i].innerHTML.replace("<!--","").replace("-->","");

}window.onload = im;



cookieOptions = {

    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",

    link: "https://www.blogger.com/go/blogspot-cookies",

    close: "Got it!",

    learn: "Learn More" };

//]]>

</script>

</b:if>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>

<script>

var RandomPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,numPosts:6};

//<![CDATA[

var shortname = "ayo-viralkan";



for(var imgEl=document.querySelectorAll(".post-body img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].className+=" lazy");

document.addEventListener("DOMContentLoaded",function(){function e(){r&&clearTimeout(r),r=setTimeout(function(){var t=window.pageYOffset;n.forEach(function(e){e.offsetTop<window.innerHeight+t&&(e.src=e.dataset.src,e.src=e.src.replace(/.*?:\/\//g,"https://cdn.staticaly.com/img/"),e.classList.remove("lazy"))}),0==n.length&&(document.removeEventListener("scroll",e),window.removeEventListener("resize",e),window.removeEventListener("orientationChange",e))},20)}var n;if("IntersectionObserver"in window){n=document.querySelectorAll(".lazy");var t=new IntersectionObserver(function(e){e.forEach(function(e){if(e.isIntersecting){var n=e.target;n.src=n.dataset.src,n.src=n.src.replace(/.*?:\/\//g,"https://cdn.staticaly.com/img/"),n.classList.remove("lazy"),t.unobserve(n)}})});n.forEach(function(e){t.observe(e)})}else{var r;n=document.querySelectorAll(".lazy"),document.addEventListener("scroll",e),window.addEventListener("resize",e),window.addEventListener("orientationChange",e)}});



function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_post12.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;



function insertAfter(tbh,tgt) {

  var prt = tgt.parentNode;

  if (prt.lastChild == tgt) {prt.appendChild(tbh);}

  else {prt.insertBefore(tbh,tgt.nextSibling);}}

  var tgt = document.getElementById("tgtPost");

  var midAd1 = document.getElementById("middleAds1");

  var midAd2 = document.getElementById("middleAds2");

  var showAd1 = tgt.getElementsByTagName("br");

  var showAd2 = tgt.getElementsByTagName("p");

  if (showAd1.length > 0) {insertAfter(midAd1,showAd1[2]);}

  if (showAd2.length > 0) {insertAfter(midAd1,showAd2[2]);}

  if (showAd1.length > 0) {insertAfter(midAd2,showAd1[6]);}

  if (showAd2.length > 0) {insertAfter(midAd2,showAd2[6]);};



cookieOptions = {

    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",

    link: "https://www.blogger.com/go/blogspot-cookies",

    close: "Got it!",

    learn: "Learn More" };

//]]>

</script>

</b:if>

Silahkan ganti dengan kode di bawah ini.

<b:if cond='data:blog.pageType not in {&quot;item&quot;}'>

<script>

var RandomPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,numPosts:6};

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_home4.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;



cookieOptions = {

    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",

    link: "https://www.blogger.com/go/blogspot-cookies",

    close: "Got it!",

    learn: "Learn More" };

//]]>

</script>

</b:if>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>

<script>

var RandomPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,numPosts:6};

//<![CDATA[

var shortname = "ayo-viralkan";



function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_post14.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;



function insertAfter(tbh,tgt) {

  var prt = tgt.parentNode;

  if (prt.lastChild == tgt) {prt.appendChild(tbh);}

  else {prt.insertBefore(tbh,tgt.nextSibling);}}

  var tgt = document.getElementById("tgtPost");

  var midAd1 = document.getElementById("middleAds1");

  var midAd2 = document.getElementById("middleAds2");

  var showAd1 = tgt.getElementsByTagName("br");

  var showAd2 = tgt.getElementsByTagName("p");

  if (showAd1.length > 0) {insertAfter(midAd1,showAd1[2]);}

  if (showAd2.length > 0) {insertAfter(midAd1,showAd2[2]);}

  if (showAd1.length > 0) {insertAfter(midAd2,showAd1[6]);}

  if (showAd2.length > 0) {insertAfter(midAd2,showAd2[6]);};



cookieOptions = {

    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",

    link: "https://www.blogger.com/go/blogspot-cookies",

    close: "Got it!",

    learn: "Learn More" };

//]]>

</script>

</b:if>

Kemudian cari semua kode class='lazy' lalu ganti jadi class='lazyload' kemudian cari kode class='image lazy' lalu ganti jadi class='image lazyload'

Tgl. 04/07/2019: Update v8.40

• Memperbaiki lazyload untuk support HTTPS. Ini untuk memperbaiki blog yang menggunakan logo image. Entah kenapa Blogger tidak/belum support HTTPS untuk logo image blog sehingga ini menyebabkan mixed content. Untuk itu saya memodifikasi lazyload untuk mengganti http:// atau https:// menjadi // sehingga jika ada gambar blogger yang menggunakan http:// tidak akan menyebabkan mixed content.