Media Sosial Dapat Menjadi Alternatif Contact Blog Amp Html

Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML. Sebagaimana sudah maklum bahwa setiap blog atau web diwajibkan mempunyai contact form terutama bagi blog adsense. Contact form dapat dengan gampang kita buat memakai javascript atau secara pribadi melalui widget. Namun berbeda bagi blog AMP HTML yang hingga ketika ini blogger belum menyediakan contact form valid AMP, sehingga harus terpaksa harus memakai pinjaman amp-iframe supaya dapat disimpan di halaman statis sebagaimana sudah sering dijelaskan di KompiAjaib.com.

Nah kemarin aku menciptakan postingan perihal contact whatsapp menjadi pilihan pengunjung dan disitu aku menawarkan referensi berupa URL contact whatsapp (WA). Kemudian ada pengunjung yang menghubungi aku melalui WA dan bertanya : gimana cara menciptakan contact blog menyerupai ini?

Pada dasarnya contact blog dibentuk supaya pengunjung dapat menghubungi si admin terkait dengan isi blog tersebut, hal ini dapat dibentuk dengan banyak sekali cara dan trik sesuai selera. Namun untuk blog AMP yang ingin mengurangi loading dari amp-iframe dapat memakai kemudahan media umum menyerupai facebook, gmail, twitter, line, instagram, whatsapp dan lain-lain. Jika masih penasaran, anda dapat cek contact blog ini.

Dan kalau anda tertarik, silahkan simpan isyarat 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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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="Media Sosial Bisa Menjadi Alternatif Contact Blog AMP HTML">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 memakai isyarat CSS secara terpisah untuk setiap halaman, silahkan simpan isyarat CSS diatas di bawah dua isyarat 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'>

Praktis bukan? selamat mencoba dan biar bermanfaat...
Sumber https://www.nengain.web.id/

Bagikan Artikel ini