Tutorial Membuat Footer Dengan 4 Kolom Valid AMP

Kali ini kita akan membahas bagaimana Tutorial Membuat Footer Dengan 4 Kolom Valid AMP, di footer ini terdapat juga tempat untuk meletakkan logo blog kita beserta dengan deskripsi blog kita, sehingga membuat blog kita terlihat lebih professional, mungkin akan ada sedikit perbedaan karena setiap template berbeda – beda.

Oke Langsung saja mari kita simak sama-sama simak toturial di bawah ini :

1. Masuk ke Blogger > Template > Edit HTML

2. Tambahkan kode CSS berikut tepat di atas kode ></b:skin>

#footer1,#footer2,#footer3,#footer4{float:left;width:19%;}

>strong>3. 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}}

4. Ganti kode HTML footer Anda dengan kode HTML di bawah

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'> <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 &#169; <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>

5. 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="http://siijombi.blogspot.com/" title="Blog Siijombi"><amp-img alt="Logo Footer Blog Siijombi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IoDHVIDyO26vvD86km0O9m1pFqBlVA8f5kVgyxo9XjMWk-hihv65Kc4K-VRAR9nqD6MOvf0F8-cDJKOQuBLVdAjPUQErBJ6c7Hx7NoCAKxRtpq1KGc5lDTaq_sJ_dILqtwICCzy9SQA/s1600/siijombi-logo-footer.png" height="50" title="Blog Siijombi" width="347" /></amp-img></a>
</div>
<p>Berbagi Tips Dan Tutorial Seputar Blogger, AMP HTML, Adsense Dan SEO.</p>

Baca juga : Popular Posts Pada Blog AMP Carousel

6. Untuk widget daftar link seperti follow us, dukunga, tools, dan lain - lain sobat bisa menggunakan kode di bawah ini

<ul>
<li><a href="https://siijombi.blogspot.co.id/p/privacy.html" title="Privacy ">Privacy </a></li>
<li><a href="https://siijombi.blogspot.co.id/p/terms-of-service.html" title="terms of service">TOS</a></li>
<li><a href="http://rawgit.com/darwinisrin/sitemap.html/master/sitemap.html" title="Sitemap">Sitemap</a></li>
<li><a href="https://siijombi.blogspot.co.id/p/disclaimer.html" title="Disclaimer">Disclaimer</a></li>
</ul>

Note :
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.