Cara Menciptakan Tombol Share Amp Lengkap Dan Responsive
Cara untuk menciptakan tombol share responsive di blog AMP lengkap dengan whatsapp, sms, dan email tampilanya menyerupai punya aku sanggup di cek dibawah artikel ini. Bisa di pasang di blog temen-temen yang belum ada tombol sharenya atau menggantikan yang sudah ada
Sahare button yang akan kita buat ini tampilanya kekinian sederhana tapi keren, responsive tidak memberatkan loading blog, sanggup menyesuaikan saat blog diakses memakai komputer ataupun mobile
Dan menariknya lengkap dengan share sosial media whatsapp, sms, dan email. Makara pengunjung blog kau sanggup share artikel dengan gampang lewat sms melalui tombol button tersebut
Baca juga : Inidia grub whatsapp Blogger JATIM
Banyak menfaat memasang tombol share di blog maka tidak heran apabila ini menjadi atribut wajib sebuah web. Lebih-lebih jikalau tombol share terang dan gampang diketahui, gampang dipakai untuk share artikel keberbagai media umum oleh pengunjung
Maka akan memperlihatkan imbas baik untuk blog itu sendiri diantaranya sanggup meningkatkan pengunjung blog jikalau banyak orang yang melaksanakan share artikel-artikel yang ada diblog kita, selain itu juga sanggup memperkuat Seo off page
Naah inilah cara menciptakan tombol share yang responsive dan lengkap, untuk DEMO sanggup kau lihat dibawah artikel ini atau lihat gambar diatas artikel ini, cara yang aku bagikan ini sama dengan apa yang aku pasang di blog ini
Login blogger
Pilih sajian TEMA → EDIT HTML
Copy isyarat dibawah ini letakkan diatas kode <head/> atau </head><!--<head/>-->
Kemudian copy paste isyarat dibawah ini letakkan diantara isyarat CSS postingan
Perhatikan isyarat width:15%; yang aku beri tanda warna merah silahkan sesuaikan dengan lebar wrapper yang ada di blog kamu, semakin tinggi angkanya maka akan semakin lebar dan begitu sebaliknya
Selanjutnya cari kode <b:includable id='shareButtons' var='post'> dengan menekan ctrl+f
Nanti kurang lebih akan muncul isyarat menyerupai ini <b:includable id='shareButtons' var='post'>...</b:includable>
Nah copy paste isyarat berikut, kemudian letakkan dibawah isyarat </b:includable> (yang aku sebutkan diatas)
Terakir copy paste isyarat dibawah ini kemudian letakkan dimana kau ingin menampilkan tombol share
Kalau berdasarkan aku lebih efisien jikalau ditaruh dibawah artikel namun tergantung selera Anda sanggup juga dipasang diatas artikel
Seperti misalnya di blog ini aku taruh dibawah artikel, sebab kenapa ? sebab umunya orang mengunjungi blog akan mencari gosip terlebih dahulu sebelum mendapatai tombol share. Namun itu tergantug selera masing-masing pemilik blog (nyatanya banyak juga yang pasang tombol share diatas postingan/di samping blog)
Baca juga : Manfaat dan cara menciptakan widget subscribe email di blog
Apakah cara ini berhasil diterapkan di blog Non AMP ? saya kira tidak berhasil sebab AMP dan NoAMP itu berbeda
Nah itulah cara gampang untuk menciptakan tombol share yang responsive di blog Valid AMP lengkap dengan whatsapp, sms, dan email. Jika kau kesulitan butuh pertanyaan silahkan tingalkan dikolom komentar dibawah
Sumber https://www.larepacitan.com/
Sahare button yang akan kita buat ini tampilanya kekinian sederhana tapi keren, responsive tidak memberatkan loading blog, sanggup menyesuaikan saat blog diakses memakai komputer ataupun mobile
Dan menariknya lengkap dengan share sosial media whatsapp, sms, dan email. Makara pengunjung blog kau sanggup share artikel dengan gampang lewat sms melalui tombol button tersebut
Baca juga : Inidia grub whatsapp Blogger JATIM
Banyak menfaat memasang tombol share di blog maka tidak heran apabila ini menjadi atribut wajib sebuah web. Lebih-lebih jikalau tombol share terang dan gampang diketahui, gampang dipakai untuk share artikel keberbagai media umum oleh pengunjung
Maka akan memperlihatkan imbas baik untuk blog itu sendiri diantaranya sanggup meningkatkan pengunjung blog jikalau banyak orang yang melaksanakan share artikel-artikel yang ada diblog kita, selain itu juga sanggup memperkuat Seo off page
Cara gampang menciptakan tombol share Responsive lengkap dengan whatsapp di blog AMP
Naah inilah cara menciptakan tombol share yang responsive dan lengkap, untuk DEMO sanggup kau lihat dibawah artikel ini atau lihat gambar diatas artikel ini, cara yang aku bagikan ini sama dengan apa yang aku pasang di blog ini
Login blogger
Pilih sajian TEMA → EDIT HTML
Copy isyarat dibawah ini letakkan diatas kode <head/> atau </head><!--<head/>-->
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
Kemudian copy paste isyarat dibawah ini letakkan diantara isyarat CSS postingan
/* Tombol Share */
.sharethis{position:relative;margin:20px 0;padding:0;font-size:0}
.sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:15%;height:50px;line-height:50px;margin:0;text-align:center;display:inline-block;float:left;}
.sharethis amp-social-share{vertical-align:middle}
.sharethis .fb{background-color: #3b5998;border-radius: 2px 0 0 2px}
.sharethis .tw{background-color: #1DA1F2;}
.sharethis .gp{background-color: #dc4e41;}
.sharethis .wa{background-color: #25d366;}
.sharethis .sms{background-color: #ca2b63;}
.sharethis .em{background-color: #000;border-radius: 0 2px 2px 0}
Perhatikan isyarat width:15%; yang aku beri tanda warna merah silahkan sesuaikan dengan lebar wrapper yang ada di blog kamu, semakin tinggi angkanya maka akan semakin lebar dan begitu sebaliknya
Selanjutnya cari kode <b:includable id='shareButtons' var='post'> dengan menekan ctrl+f
Nanti kurang lebih akan muncul isyarat menyerupai ini <b:includable id='shareButtons' var='post'>...</b:includable>
Nah copy paste isyarat berikut, kemudian letakkan dibawah isyarat </b:includable> (yang aku sebutkan diatas)
<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharethis'>
<div class='fb'>
<amp-social-share data-param-app_id='168694007115948' height='25' type='facebook' width='25'/>
</div>
<div class='tw'>
<amp-social-share height='25' type='twitter' width='25'/>
</div>
<div class='gp'>
<amp-social-share height='30' type='gplus' width='30'/>
</div>
<div class='wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='"Check out this article: " + data:post.title + " - " + data:post.url' height='20' type='whatsapp' width='20'/>
</div>
<div class='sms'>
<amp-social-share height='20' type='sms' width='20'/>
</div>
<div class='em'>
<amp-social-share height='30' type='email' width='30'/>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>
Terakir copy paste isyarat dibawah ini kemudian letakkan dimana kau ingin menampilkan tombol share
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='share-tool'/>
</b:if>
Kalau berdasarkan aku lebih efisien jikalau ditaruh dibawah artikel namun tergantung selera Anda sanggup juga dipasang diatas artikel
Seperti misalnya di blog ini aku taruh dibawah artikel, sebab kenapa ? sebab umunya orang mengunjungi blog akan mencari gosip terlebih dahulu sebelum mendapatai tombol share. Namun itu tergantug selera masing-masing pemilik blog (nyatanya banyak juga yang pasang tombol share diatas postingan/di samping blog)
Baca juga : Manfaat dan cara menciptakan widget subscribe email di blog
Apakah cara ini berhasil diterapkan di blog Non AMP ? saya kira tidak berhasil sebab AMP dan NoAMP itu berbeda
Nah itulah cara gampang untuk menciptakan tombol share yang responsive di blog Valid AMP lengkap dengan whatsapp, sms, dan email. Jika kau kesulitan butuh pertanyaan silahkan tingalkan dikolom komentar dibawah
Sumber https://www.larepacitan.com/
