Cara Memasang Tombol Sosial Sharing Responsive di Template AMP Blogger

Postingan kali ini yaitu lanjutan dari postingan sebelumnya yaitu Cara Memasang Tombol Share BBM Dan Line Di Blogger disini kita membahas masih seputar Tombol Sosial Media Share yang akan dipasang pada blog. Namun di postingan kali ini agak berbeda lebih di khususkan untuk pengguna Template Blogger .

Di pembahasan kali ini akan kita tambahkan lebih banyak tombol sosial sharenya menyerupai Facebook, Google Plus, BBM, Whatsapp, Twitter, Pinterest, LinkedIn, Tumblr, SMS dan Email tampilannya dibuat lebih Responsive sehingga dapat menyesuaikan pada tampilan di smart phone sehingga lebih enak dilihat dan pastinya tidak menggangu area pandang postingan pengunjung.

Bagaimana penasaran ? bagi sahabat yang mau mencobanya mari kita simak Cara Memasang Tombol Sosial Sharing Responsive di Template Blogger.

Langkah Pertama

Silahkan sahabat salin instruksi Js amp-social-share dibawah ini lalu letakkan di atas instruksi </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/> </b:if>

Untuk yang sudah pernah memasang instruksi Js amp-social-share di template nya silahkan lewati langkah ini.


Langkah Ke Dua
Silahkan salin dan simpan instruksi CSS dibawah ini.

/* Social 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:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left} .sharethis amp-social-share{vertical-align:middle} .sharethis .tw{background-color: #55acee;} .sharethis .gp{background-color: #dc4e41;} .sharethis .fb{background-color: #3b5998;} .sharethis .pi{background-color: #bd081c;} .sharethis .li{background-color: #0077b5;} .sharethis .wa{background-color: #25d366;} .sharethis .ta{background-color: #3c5a77;} .sharethis .sms{background-color: #ca2b63;} .sharethis .em{background-color: #000;}

Langkah Ke Tiga
Silahkan cari instruksi berikut dibawah ini.

<b:includable id='shareButtons' var='post'> ............ ............ ............ </b:includable>

Setelah ketemu silahkan sahabat salin instruksi berikut ini lalu letakkan diatas instruksi </b:includable> yang nantinya akan menyerupai ini.

            <b:includable id='share-tool' var='post'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='sharethis'> <div class='tw'> <amp-social-share height='20' type='twitter' width='20'/>   </div> <div class='gp'> <amp-social-share height='25' type='gplus' width='25'/>   </div> <div class='fb'> <amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>   </div> <div class='pi'> <amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/>   </div> <div class='li'> <amp-social-share height='25' type='linkedin' width='25'/>   </div> <div class='ta'> <amp-social-share height='20' type='tumblr' width='20'/>   </div> <div class='wa'> <amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='15' type='whatsapp' width='15'/> </div> <div class='sms'> <amp-social-share height='15' type='sms' width='15'/> </div> <div class='em'> <amp-social-share height='25' type='email' width='25'/> </div> <div class='clear'/> </div> </b:if> </b:includable>

Langkah Ke Empat
Silahkan salin instruksi dibawah ini lalu letakkan bebas dimana sahabat ingin menampilkan tombol share nya.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='share-tool'/> </b:if>

Selesai silahkan SAVE, selamat mencoba supaya bermanfaat.