Cara Membuat Tombol Share AMP Sendiri lebih Keren (2 Model)


DatabaseArtikel.com – Kelebihan website dengan memakai AMP (accelerated mobile page) ini memiliki banyak script yang tersedia secara gratis dan lengkap.

Salah satu script yang membantu membuat sebuah website lebih berkelas adalah adanya penggunaan tombol share. Di amp sendiri anda dapat membuat sebuah tombol share sendiri dengan mudah selain itu tampilannya dapat anda rubah sesuai dengan keinginan.

Mulai dari ubah warna hingga bentunya dapat anda rubah semaunya. Tutorial ini dapat di praktekkan langsung pada blog Blogger dan WordPress yang sudah di custom AMP.

Langsung saja kita masuk ke tutorialnya.

Cara membuat tombol share di Blog AMP.

Pertama yang harus anda lakukan adalah menambahkan kode berikut di bagian <head> baik blogger maupun WordPress.

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Selanjutnya masukkan kode dibawah ini di bagian <style> untuk di wordpressnya sendiri anda bisa menambahkan di menu Tampilan >> Sesuaikan >> CSS Tambahan. atau membuat tag <style></style> baru.

:root {
       --color-primary: #005AF0;
       --color-text-light: #000;
     }
     amp-social-share.rounded {
       border-radius: 10%;
       background-size: 60%;
       color: var(--color-text-light);
       background-color: var(--color-primary);
     }

Terakhir adalah anda tambahkan tombol sharenya di posisi yang diinginkan bisa di atas atau bawah halaman.

<am-social-share class="rounded" type="email" width="48px" height="48px"></amp-social-share>
<am-social-share class="rounded" type="facebook" data-param-app_id="385630541914375" width="48px" height="48px"></amp-social-share>
<am-social-share class="rounded" type="linkedin" width="48px" height="48px"></amp-social-share>
<am-social-share class="rounded" type="pinterest" width="48px" height="48px"></amp-social-share> 
<am-social-share class="rounded" type="tumblr" width="48px" height="48px"></amp-social-share> 
<am-social-share class="rounded" type="twitter" width="48px" height="48px"></amp-social-share> 
<am-social-share class="rounded" type="whatsapp" width="48px" height="48px"></amp-social-share>
<am-social-share class="rounded" type="line" width="48px" height="48px"></amp-social-share>

Kode diatas sudah terinput tombol share ke :

  • Share ke Email
  • Share ke Facebook
  • Share ke Linkedin
  • Share ke Pinterest
  • Share ke Tumblr
  • Share ke Twitter
  • Share ke Whatsapp
  • Share ke Line

Anda bisa memilih tombol share mana yang ingin digunakan dan hapus bagian kode share yang tidak dipakai.

Khusus untuk tombol share ke Facebook anda wajib menambahkan APP ID agar bisa dipakai ganti kode data-param-app_id=”385630541914375″ ini dengan id Facebook kalian.

Untuk cara mengetahuinya id nya bisa dilihat panduanya disini Mengecek Facebook ID sendiri agar tombol share fb tidak error.

Untuk hasilnya yang akan anda dapatkan seperti ini :

Modifikasi sendiri tombol share AMP

Anda bisa mengubah sendiri baik warna, ukuran beserta modelnya untuk disesuaikan dengan tampilan blog kamu.

Caranya dengan :

Ganti kode –color-primary: #005AF0; sesuai warna yang diinginkan.

Ganti kode border-radius: 10%; menjadi lebih besar persentasenya untuk merubah bentuk agar menjadi lebih bulat bahkan bulat.

Ubah pada width=”48px” height=”48px” untuk mengubah ukuran tombol sharenya pastikan sama agar telihat kotak dan prespektif ukurannya.

Dan hasilnya ;

kode diatas admin ubah warna menjadi #fff kemudian border radius 70%. Anda bisa melakukan custom sesuai dengan selera anda.

***

Demikian artikel tentang informasi Cara Membuat Tombol Share AMP Sendiri lebih Keren ini semoga bisa bermanfaat untuk kalian yang baru pertama kali menggunakan blog AMP dan ingin menambahkan tombol share keren sendiri.

Dapatkan juga informasi mengenai tutorial blog AMP lainnya di situs ini DatabaseArtikel.com terima kasih.


الْحَمْدُ للَّهِ رَبِّ الْعَالَمِيْن


Selalu Berbagi :

Diterbitkan oleh

Rofiq ~

Menulis apa yang saya mau bukan yang anda mau, ada pertanyaan dan hal lain bisa komentar atau kontak Whatsapp di +6289669699740

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *