Terinspirasi dari blog kang Ifrod, saya pun sedikit mengoprek-oprek kode dari postingan ini, supaya menjadi valid AMP. Sebenarnya mudah sekali untuk membuat footer 4 kolom valid AMP, tapi mungkin karena saya masih baru belajar tentang dunia AMP yang mana dalam aturannya tidak boleh menambahkan script lain selain dari CDN AMP Project, maka saya pun merasa kesusahan ketika ingin membuat footer dengan 4 kolom dari template HTML5 menjadi valid AMP. Kita pun sebenarnya sudah diberikan arahan terkait AMP Project pada official site-nya di sini. Tapi, namanya orang belajar juga butuh waktu, akhirnya saya pun bisa membuat footer dengan 4 kolom valid AMP dalam kurun waktu kurang lebih 3 hari hehehe 😀
Langsung saja yuk kita simak bersama bagaimana cara membuat footer dengan 4 kolom valid AMP di bawah. Jangan lupa untuk membaca tutorial di bawah dengan saksama dan teliti, supaya tidak menghasilkan error. Kalau udah error pasti kepala Anda pusing 7 keliling untuk mencari kode mana yang Invalid AMP 😤
Untuk demo blog yang menggunakan 4 footer, silakan untuk mengeklik tombol demo di bawah 😁
Langkah pertama.
Tambahkan kode CSS berikut tepat di atas kode ]]></b:skin>.
#footer1,#footer2,#footer3,#footer4{float:left;width:19%;}Langkah kedua.
Ganti kode CSS footer Anda dengan kode CSS di bawah pada style amp-custom tampilan desktop dan mobile Anda. Dan bagi Anda yang menggunakan template yang tidak mempunyai struktur kode khusus tampilan mobile (seperti template pada blog ini), maka Anda bisa meletakkan kode di bawah pada style amp-custom tampilan depan blog Anda, halaman postingan blog Anda, dan yang terakhir halaman statistik blog Anda.
.creditpic{background:#008000;width:100%;padding-top:1px;}
.credit{background:#FFFFFF;width:100%;font-family:Roboto,sans-serif;font-size:12px;margin:0;padding:20px 0 30px;position:relative;color:#008000;min-height:10px;text-align:center}
.credit,.footer .widget-content{line-height:1.5em}
.footer .widget{background:none;margin:5px 5px 0;padding:0 10px 0}
.credit a:link,.credit a:visited{color:#008000;text-decoration:none}
.credit a:hover{color:#90EE90;text-decoration:none}
#footer-wrapper{width:100%;overflow:hidden;margin:10px auto 0;padding:0}
#footer-wrapper p{margin:0;font-size:16px}
#footer1 a,#footer2 a,#footer3 a,#footer4 a{font-weight:300;color:#FFFFFF;}
#footer1 a:hover,#footer2 a:hover,#footer3 a:hover,#footer4 a:hover{color:#90EE90;}
#footer1 ul,#footer2 ul,#footer3 ul,#footer4 ul{list-style:none;padding:0;margin:5px 0}
#footer1{width:40%;padding:10px 30px 10px 0;display:inline;float:left;color:#ccc;font-size:14px;font-weight:300;line-height:1.6em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#footer2,#footer3,#footer4{width:20%;padding:10px 0 10px 30px;display:inline;float:left;color:#ccc;font-size:14px;font-weight:300;line-height:1.6em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#footer1 #logo-footer{clear:both;text-align:left;display:block}
#footer1 #logo-footer img{height:40px}
#footer1 h2,#footer2 h2,#footer3 h2,#footer4 h2{font-family:Roboto,sans-serif;font-size:16px;font-weight:700;color:#fefefe;margin:0;text-transform:none}
@media print{#footer-wrapper,.creditpic{display:none}}Langkah ketiga.
Ganti kode HTML footer Anda dengan kode HTML di bawah.
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "false"'>
<div class='creditpic'>
<div class='content-wrapper'>
<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/>
<b:section class='footer' id='footer2' preferred='yes'/>
<b:section class='footer' id='footer3' preferred='yes'/>
<b:section class='footer' id='footer4' preferred='yes'/>
</div>
<div class='clear'/>
</footer>
</div>
</div>
</b:if>
<div class='creditpic'>
<div class='credit-wrapper'>
<div class='credit'>
Copyright © <span itemprop='copyrightYear'>2016</span> <span itemprop='copyrightHolder' itemscope='itemscope' itemtype='https://schema.org/Organization'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'><data:blog.title/></span></a></span>
<div class='credit-right'>Proudly Powered by <a href='https://www.blogger.com' title='Blogger'>Blogger</a></div>
<div class='clear'/>
</div>
</div>
</div>Langkah terakhir.
Silakan simpan kode di bawah pada tata letak Blogger Anda;
Pada bagian Footer pertama, buat gambar blog Anda (contohnya bisa di lihat pada blog ini) dengan ukuran 347 x 40 px. Lalu simpan kode di bawah pada tata letak widget footer nomor 1.
<div id="logo-footer">
<a href="URL BLOG ANDA" title="Fastest"><amp-img alt="Logo Footer Fastest" src="URL GAMBAR BLOG ANDA" height="50" title="Fastest" width="347" /></a>
</div>
<p>DESKRIPSI SINGKAT BLOG ANDA</p>Notes:
1. Ganti URL BLOG ANDA dengan alamat tautan blog milik Anda.
2. Ganti Fastest dengan judul/title blog milik Anda. Ubah semuanya!
3. Ganti Logo Footer Fastest dengan kata-kata Anda sendiri.
4. Ganti URL GAMBAR BLOG ANDA dengan tautan logo gambar footer Anda.
5. Ganti DESKRIPSI SINGKAT BLOG ANDA dengan kata-kata deskripsi mengenai blog Anda.
6.Hapus kode <b:include name='quickedit'/> di edit HTML setelah menambahkan gadget baru di tata letak agar blognya selalu valid AMP HTML.
Pada bagian footer kedua, ketiga, dan keempat, simpan kode dibawah pada tata letak widget footer nomor 2,3 dan 4, lalu sesuaikan dengan keinginan Anda.
<ul>
<li><a href='xxxxxx' target='_blank' title='yyyyyy'>yyyyyy</a></li>
<li><a href='xxxxxx' target='_blank' title='yyyyyy'>yyyyyy</a></li>
<li><a href='xxxxxx' target='_blank' title='yyyyyy'>yyyyyy</a></li>
<li><a href='xxxxxx' target='_blank' title='yyyyyy'>yyyyyy</a></li>
<li>Notes:
1. Ganti xxxxxx dengan alamat tautan.
2. Ganti yyyyyy dengan nama yang ingin Anda kehendaki.
3. Dan jangan lupa selalu hapus kode <b:include name='quickedit'/> di edit HTML setelah menambahkan gadget baru di tata letak agar blognya selalu valid AMP HTML.
That's all~