Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML

Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML. Sebagaimana sudah maklum bahwa setiap blog atau web diwajibkan memiliki contact form terutama bagi blog adsense. Contact form bisa dengan mudah kita buat menggunakan javascript atau secara langsung melalui widget. Namun berbeda bagi blog AMP HTML yang sampai saat ini blogger belum menyediakan contact form valid AMP, sehingga harus terpaksa harus menggunakan bantuan amp-iframe supaya bisa disimpan di halaman statis sebagaimana sudah sering dijelaskan di KompiAjaib.com.

Nah kemarin saya membuat postingan tentang contact whatsapp menjadi pilihan pengunjung dan disitu saya memberikan contoh berupa URL contact whatsapp (WA). Kemudian ada pengunjung yang menghubungi saya melalui WA dan bertanya : gimana cara membuat contact blog seperti ini?

Pada dasarnya contact blog dibuat supaya pengunjung bisa menghubungi si admin terkait dengan isi blog tersebut, hal ini bisa dibuat dengan berbagai cara dan trik sesuai selera. Namun untuk blog AMP yang ingin mengurangi loading dari amp-iframe bisa menggunakan fasilitas media sosial seperti facebook, gmail, twitter, line, instagram, whatsapp dan lain-lain. Jika masih penasaran, anda bisa cek contact blog ini.

Dan jika anda tertarik, silahkan simpan kode dibawah ini di halaman statis pada mode HTML (bukan compose) dan sesuai yang ditandai:

<div class="contact-box">

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path></svg><a href="https://mail.google.com/mail/u/0/?view=cm&amp;tf=1&amp;fs=1&amp;to=EMAIL_ANDA" rel="noopener" target="_blank" title="Mail To Us">Mail To Us</a>

</div>

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z"></path></svg><a href="PROFIL_GOOGLE_PLUS" rel="noopener" target="_blank" title="Google Plus">Google Plus</a>

</div>

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z"></path></svg><a href="PROFIL_FACEBOOK" rel="noopener" target="_blank" title="Facebook">Facebook</a>

</div>

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z">
</path></svg><a href="PROFIL_TWITTER" rel="noopener" target="_blank" title="Twitter">Twitter</a>

</div>

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg><a href="PROFIL_INSTAGRAM" rel="noopener" target="_blank" title="Instagram">Instagram</a>

</div>

<div class="contact-me">

<svg viewbox="0 0 24 24"><path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z">
</path></svg><a href="https://api.whatsapp.com/send?phone=6285XXXXXXXX" rel="noopener" target="_blank" title="Chat Whatsapp">Chat Whatsapp</a>

</div>

</div>

Kemudian simpan CSS berikut di bawah <style amp-custom='amp-custom'> untuk halaman statis

.contact-box{margin:0 50px}

.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}

.contact-box svg path{fill:#555}

.contact-me{display:block}

.contact-me a{color:#555;font-weight:500;}

.contact-me a:hover{color:#11589D}

Jika blog anda menggunakan kode CSS secara terpisah untuk setiap halaman, silahkan simpan kode CSS diatas di bawah dua kode berikut:

<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;true&quot;'>

<style amp-custom='amp-custom'>

<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'>

<style amp-custom='amp-custom'>

Mudah bukan? selamat mencoba dan semoga bermanfaat...

Advertisement