Kustomisasi Template Kompi Flexible AMP v4.

00

Untuk menginstall template tidak perlu menggunakan upload file xml. Langsung saja copy semua kode
dari notepad Template KompiFlexible-v8.20 lalu timpah semua kode di edit html. Selengkapnya di
postingan berikut:

https://www.kompiajaib.com/2016/03/cara-menerapkan-custom-template-pada.html

Mengatur Warna Blog

Cari kode CSS berikut, ada di bagian atas style CSS:

/* Primary Background and Color */

.fixed-header,.breadcrumbs,.sidebar h2,.credit,.credit-page,.buka-komen,.tutup-komen,.follow-by-
email-inner .follow-by-email-submit,.halaman{background:#01579b;background:-moz-linear-
gradient(left,#01579b 0,#318e8e 60%,#6cc976 100%);background:-webkit-linear-gradient(left,#01579b
0,#318e8e 60%,#6cc976 100%);background:linear-gradient(to right,#01579b 0,#318e8e 60%,#6cc976
100%)}

::selection,.Label ul li span[dir],.home_page a.blog-pager-newer-link,.home_page a.blog-pager-older-

link,.home_page #blog-pager-home-link a.home-link,.home_page .home-box,.home_page .last-
box,.post-body pre,.post-body blockquote:before,.disclaimer_box,.flow .topnav,.status-msg-wrap
a,.scrollToTop{background-color:#01579B;}

.post-body a,.comments a,.PopularPosts .widget-content ul li a,.Label ul li a,.post h1.post-title

a,.home_page .post h3.post-title a,.post-body code,.related-post li a,#HTML1 .widget-content ul li
a,.related-post-style-2 li a,#FeaturedPost h3 a,#FeaturedPost .readmore,#HTML2 .widget-content ul li
a{color:#01579B;}

::selection,#header h1 a,#header p a,.topnav a,.sidebar h2,.breadcrumbs,.breadcrumbs a,.Label ul li

span[dir],.credit-wrapper,.credit-wrapper a,.buka-komen,.tutup-komen,.halaman-kanan,.halaman-
kiri,.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a,.status-msg-wrap
a{color:#f2f2f2;}

.breadcrumbs svg path,svg.panahkanan path,svg.panahkiri path,.home_page #blog-pager-newer-link svg

path, .home_page #blog-pager-older-link svg path,.home_page .home-box svg path,.home_page .last-
box svg path,.home_page .home-link svg path,.dropbtn .fa path,.search_box button.gsc-search-button
svg path,.icon_menu svg path{fill:#f2f2f2}
/* Icon External Link Color */

.post-body a[href^="http://"]:after,.post-body
a[href^="https://"]:after{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24'
width='16' height='16' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%2301579B'
d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9
3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-
repeat;}

Kode warna yang saya block kuning itu untuk warna background gradasi pada menu, header, dll.

Kode warna yg saya block hijau itu untuk warna dasar dengan background, kode warnanya harus sama.

Warna bar browser android

Cari kode berikut:

<!-- Chrome, Firefox OS and Opera -->

<meta content='#01579B' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#01579B' name='msapplication-navbutton-color'/>

Samakan dengan warna background primary di atas.

Manifest Json

Cari kode berikut:

<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/manifest.json' rel='manifest'/>

Buka url yg saya block itu di browser, lalu copy kodenya yang tadi tampil lalu simpan di notepad, lalu
poin-poinnya sesuaikan dg blog mas dan url-url itu ganti dg url logo blog mas. logonya harus segiempat
yang digunakan untuk favicon dan perhatikkan ukurannya. Kemudidan di notepad save as > all file dan
kasih nama manifest.json

kemudian hosting file manifest.json di github lalu ganti url yang diblock di atas di edit html itu. Jelasnya
simak post ini https://www.kompiajaib.com/2019/03/tentang-manifestjson-di-blogger.html
Favicon

Selain upload favicon melalui tata letak, juga sesuaikan kode yg ini.

<link href='https://3.bp.blogspot.com/-OZ5ZflWzVTQ/W_-
2oo28NuI/AAAAAAAA7IU/E4aWUVZGtWAlRAl6VnxF7g8o6Q_OUt9ZwCLcBGAs/s32/icon_kta.png'
rel='icon' sizes='32x32'/>
<link href='https://3.bp.blogspot.com/-OZ5ZflWzVTQ/W_-
2oo28NuI/AAAAAAAA7IU/E4aWUVZGtWAlRAl6VnxF7g8o6Q_OUt9ZwCLcBGAs/s192/icon_kta.png'
rel='icon' sizes='192x192'/>
<link href='https://3.bp.blogspot.com/-OZ5ZflWzVTQ/W_-
2oo28NuI/AAAAAAAA7IU/E4aWUVZGtWAlRAl6VnxF7g8o6Q_OUt9ZwCLcBGAs/s180/icon_kta.png'
rel='apple-touch-icon-precomposed'/>
<meta content='https://3.bp.blogspot.com/-OZ5ZflWzVTQ/W_-
2oo28NuI/AAAAAAAA7IU/E4aWUVZGtWAlRAl6VnxF7g8o6Q_OUt9ZwCLcBGAs/s144/icon_kta.png'
name='msapplication-TileImage'/>

Sesuaikan URL logonya sesuai size-nya. Ini untuk favicon agar tampil bagus di mobile, selengkapnya
simak di https://www.kompiajaib.com/2016/08/memasang-favicon-icon-blog-agar-tampil.html

Kalau bingung cara hosting gambar di blogger, simak video ini

https://www.youtube.com/watch?v=wqwuuKFZLeA

Logo Blog untuk share social media

Cari kode di bawah ini dan ganti URL nya dengan URL logo Anda. Buat logo persegi seperti untuk favicon.

<meta content='https://3.bp.blogspot.com/-OZ5ZflWzVTQ/W_-
2oo28NuI/AAAAAAAA7IU/E4aWUVZGtWAlRAl6VnxF7g8o6Q_OUt9ZwCLcBGAs/s300/icon_kta.png'
property='og:image'/>

Profil untuk share Facebook dan Twitter

<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='xxxxxxxxxxxxxx' name='Author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:publisher'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@xxxxxxxxxxxxx' name='twitter:creator'/>
Kode verifikasi webmaster

<meta content='xxxxxxxxxxxxxx' name='google-site-verification'/>

<meta content='xxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxx' name='yandex-verification'/>

Logo Blog

Tema ini bisa menggunakan logo image. Tapi jangan upload logo melalui tata letak.
Buat logo dengan ukuran 220x40

Cari kode ini

<b:includable id='title'>
<a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:title'><data:title/></a>
<!--<a expr:href='data:blog.homepageUrl' expr:title='data:title'>
<amp-img class='title-img' noloading='' expr:alt='data:title' height='40'
src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-
0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600-rw/kompi-flexible-2.png' width='220'
expr:title='data:title' /><span><data:title/></span>
</a>-->
</b:includable>

Kode yg ditandai kuning pindahkan ke atas jadi seperti ini, lalu ganti url logonya.

<b:includable id='title'>
<!-- <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:title'><data:title/></a> -->
<a expr:href='data:blog.homepageUrl' expr:title='data:title'>
<amp-img class='title-img' noloading='' expr:alt='data:title' height='40'
src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-
0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600-rw/kompi-flexible-2.png' width='220'
expr:title='data:title' /><span><data:title/></span>
</a>
</b:includable>

Iklan

Silahkan cari seluruh kode adsbygoogle di situ saya sudah memberikan keterangannya, silahkan baca
dengan teliti. Ada iklan Non AMP dan iklan AMP.

Untuk iklan di sidebar, itu ada di tata letak baca keterangannya, ada 2, iklan Non AMP dan iklan AMP.

Untuk iklan Auto adsense, sesuaikan kode ini

(adsbygoogle = window.adsbygoogle || []).push({

google_ad_client: "ca-pub-xxxxxxxxxxxx",
enable_page_level_ads: true
});
Dan kode ini untuk auto-ad amp

<amp-auto-ads data-ad-client='ca-pub-xxxxxxxxxxxx' type='adsense'/>

Komentar Disqus

Cari kode berikut

<b:includable id='disqus-comment' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='disqus'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-
html/master/ampdisqus_blogger4.html?shortname=kompi-minimalis&amp;fontBodyFamily=sans-
serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl +
&quot;&amp;title=&quot; + data:blog.pageName' frameborder='0' height='300' layout='responsive'
resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'
width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>
</div>
</b:if>
</b:includable>

silahkan ganti kode kompi-minimalis untuk shortname dengan shortname disqus blog Anda.

Logo untuk halaman hasil pencarian Google

Cari kode di bawah ini dan ganti URL nya dengan logo Anda, ada 2 untuk postingan dan homepage.

&quot;url&quot;: &quot;https://1.bp.blogspot.com/-WBqN2-
fZ7vQ/W__P3vkCawI/AAAAAAAA7I0/PWbLFhbk2IcSCiHO-
t7EsJqljs8ZBcpXgCLcBGAs/s600/logokta.png&quot;,

Buat logo 600x60, untuk lebih jelas silahkan simak di https://developers.google.com/search/docs/data-

types/article#logo-guidelines

Thumbnail Homepage

Cari kode berikut:

&quot;image&quot;: {
&quot;@type&quot;: &quot;ImageObject&quot;,
&quot;url&quot;: &quot;https://3.bp.blogspot.com/-
jnlDLTkesPY/XPNBUru90iI/AAAAAAABK5c/wPwJA6OTB-M31Dimc-
5TyGD1vQv2wupEQCLcBGAs/s1280/bloggue.jpg&quot;,
&quot;width&quot;: 1280,
&quot;height&quot;: 720
 }

Buat thumbnail untuk homepage dengan ukuran 1280x720.

Struktur Data Person

<script type='application/ld+json'>
{
&quot;@context&quot;: &quot;https://schema.org&quot;,
&quot;@type&quot;: &quot;Person&quot;,
&quot;name&quot;: &quot;YOUR_NAME&quot;,
&quot;url&quot;: &quot;<data:blog.canonicalHomepageUrl/>&quot;,
&quot;sameAs&quot;: [
&quot;https://www.facebook.com/xxxxxxxxxx&quot;,
&quot;https://instagram.com/xxxxxxxxxx&quot;,
&quot;https://www.linkedin.com/in/xxxxxxxxxx&quot;,
&quot;https://twitter.com/xxxxxxxxxx&quot;,
&quot;https://www.pinterest.com/xxxxxxxxxx&quot;,
&quot;https://www.youtube.com/xxxxxxxxxx&quot;
]
}
</script>

Silahkan sesuaikan dengan data Anda.

Google Analitycs
Kode analitycs disimpan paling bawah pada kode berikut:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X'/>
<script>
//<![CDATA[
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXXXX-X');
//]]>
</script>

Dan kode berikut

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
&quot;vars&quot;: {
&quot;account&quot;: &quot;UA-xxxxxxxxx-x&quot;
},
&quot;triggers&quot;: {
&quot;trackPageview&quot;: {
&quot;on&quot;: &quot;visible&quot;,
&quot;request&quot;: &quot;pageview&quot;
}
}
}
</script>
</amp-analytics>

Tinggal mengganti kode yg ditandai dengan ID Tracking analitycs blog Anda.

Membuat Postingan
Untuk membuat tombol, spoiler, tabel, silahkan simak postingan ini
https://kompitext.blogspot.com/2016/05/contoh-embed-video-di-dalam-postingan.html

Main Menu
Silahkan sesuaikan poin-poin menu yg ingin ditampilkan, cari kode <nav class='menu-kompiajaib'>
Untuk drop down / menu dengan sub menu silahkan ikuti contoh yg sudah ada.

Menu contact, sitemap, dll

Ada di footer, silahkan cari kode ini dan sesuaikan
<div class='credit-page'>
<a href='/p/about.html' title='About'>About</a> &#8226; <a href='/p/contact.html' title='Contact
Admin'>Contact</a> &#8226; <a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy</a> &#8226;
<a href='/p/sitemap.html' title='Sitemap'>Sitemap</a> &#8226; <a href='/p/disclaimer.html'
title='Disclaimer'>Disclaimer</a>
</div>
Menu “IKUTI” profil sosmed

Cari kode ini

<div class='menu sosprofil'>

Sesuaikan url profil sosmed di bawahnya dengan url profil sosmed Anda, untuk blogger tidak perlu
karena sudah otomatis.

External link

/* External link icon */

.post-body a[href^="http://"]:after,.post-body a[href^="https://"]:after{content:'';background-size:16px
16px;width:16px;height:16px;margin-left:3px;vertical-align:-2px;display:inline-block;transition:all 400ms
ease-in-out;}
.post-body a[href^="http://"]:hover:after,.post-body
a[href^="https://"]:hover:after{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0
24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23777'
d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9
3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-
repeat;}
.post-body a[href^="http://ayoviralkanvideo.blogspot.com/"]:after,.post-body
a[href^="http://ayoviralkanvideo.blogspot.com/"]:hover:after,.post-body
a[href^="https://ayoviralkanvideo.blogspot.com/"]:after,.post-body
a[href^="https://ayoviralkanvideo.blogspot.com/"]:hover:after{display:none}

Yang ditandai silahkan ganti dengan url blog Anda, perhatikan HTTP dan HTTPS