Cara memasang Social Share Buttons AMP di Blogger


TIPS CODE SHARE - Cara memasang Social Share Buttons AMP diblogger. Widget ini akan valid AMP HTML karena Social Share Buttons ini dengan menggunakan Custom Javascript dari AMP sendiri.

Dengan tampilan sederhana, rapi dan ringan cocok untuk Blog sobat yang mengincar Fast Loading. Untuk cara pemasangan simak berikut ini.


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

Letakan kode tersebut tepat di atas kode </head>.


.sharetitle{text-align:center;padding:5px;margin:20px 0 0;border:1px solid#e7e7e7}.sharetitle a{display:block;float:left;font-size:16px;margin:-18px 0 5px;font-weight:500;line-height:1.4em;background-color:#fff;text-transform:uppercase}

Letakan kode css tersebut diatas kode </style>.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharetitle'>
<a>Bantu Bagikan:</a> 
<div class='clear'/>
<b:include data='post' name='share-tool'/>
</div>
</b:if>

Letakan kode tersebut diatas kode </article atau di pasang dibawah <data:post.body/>.



<b:includable id='share-tool' var='post'>
<div>
<amp-social-share height='27' type='twitter' width='30'> </amp-social-share>
<amp-social-share height='27' type='gplus' width='30'/>
<amp-social-share data-param-app_id='1718444355142584' height='27' type='facebook' width='30'/>
<amp-social-share height='27' type='pinterest' width='30'/>
<amp-social-share height='27' type='linkedin' width='30'/>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='shareButtons' var='post'/>

Letakan kode tersebut dibawah kode <b:includable id='post' var='post'>, Seperti gambar berikut ini.


Cukup sekian dari tutorial yang saya berikan, jika kurang jelas maka berkomentarlah insyaallah komentar tersebut saya balas.
ADS SPACE

Deskripsi ADS.

ADS SPACE

Deskripsi ADS.

Disqus Comments