Share Button Valid AMP

Cara Membuat Share Button Valid AMP Blogger, Share Button Valid AMP, Share Button Valid Non AMP, Share Button Valid AMP Fast Blogger, Tombol Berbagi AMP Blogger Sosial Media - Membuat tampilan cantik merupakan salah satu hal yang diinginkan semua kalangan manusia dalam untuk memberikan antusias terhadap sesama lawan jenis tentunya agar siapa yang tampil cantik tersebut dapat terbilang memberikan antusias khususnya.

Salah satu nya membuat cantik yang akan AA Sciences berikan di kali ini yakni mengenai tampilan cantik sebuah website terutama pada halaman Blogger yang dimana AA Sciences akan memberikan widget yang dimana memudahkan para pengunjung agar lebih mudah untuk membagikan sebuah artikel dengan adanya share button ini atau umum disebut tombol berbagi.

Share Button (Tombol Berbagi) salah satu nya terdapat beragam jenis fitur baik non AMP maupun yang Valid AMP sekalipun dalam sebuah tampilan website tersebut.

Seperti biasa nya, jika share button Non AMP pada umumnya yakni layaknya seperti sebuah script yang dimana tidak atau belum nya valid akan AMP biasa nya share button non valid AMP ini terdapat pada sebuah Jquery dan Javascript yang dianggap tidak valid AMP yang dimana fitur AMP sudah pastinya tidak mendukung script Jquery dan Javascript yang merender Valid AMP tentunya.

Namun, sedangkan share button Valid AMP pun berbeda tentunya. Share Button Valid AMP ini biasa nya tercakup script script tertentu yang dianggap valid akan AMP Google sehingga di nyatakan valid AMP tersebut.

Biasa nya jika sebuah share button yang valid akan Struktur AMP ini pada umumnya hanya mencakup sebuah script CSS dan HTML saja melainkan tidak dengan Jquery serta Javascript yang mem block fasilitas script AMP tersebut.

Share Button AMP yang akan AA Sciences berikan kali ini memilki tombol yang terbilang cukup lah banyak sosial media yang untuk kita berikan, agar para pengunjung agar lebih mudah nya membagikan sebuah artikel tersebut, diantaranya terdapat tombol sosial media valid AMP, seperti :

Facebook

Twitter

Google+

Linkedin

Pinterest

Telegram

Dan masih banyak fitur share button lainnya jika kalian ingin menambahkan nya sendiri.

Langsung saja, jika kalian sudahlah penasaran akan Cara Membuat Share Button Valid AMP di Blogger tentunya, maka langsung saja simak tutor untuk pembuatan nya di bawah ini :

Cara Membuat Share Button Valid AMP Blogger

Pembuatan CSS nya terlebih dahulu :

Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style> atau tag tertentu yang ingin kalian terapkan.

Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Widget Share Button Valid AMP Blogger nya di bawah ini tepat sebelum tag ]]></b:skin> atau </style> atau tag AMP tertentu seperti halaman yang diinginkan, berikut CSS nya :

/* Custom Sosial Share */

amp-social-share[type="twitter"] {

  background-size:15px 15px;

}



amp-social-share[type="gplus"], amp-social-share[type="facebook"], amp-social-share[type="linkedin"], amp-social-share[type="pinterest"] {

  background-size:20px 20px;

}



amp-social-share[type="telegram"] {display:block;float:left;padding-right:4px;}



/* Tambahan Customize */

.share-aldi {margin-top:10px}

.share-aldi h4{overflow:hidden;float:left;font-size:11px;background:#37474F;color:#fff;padding:7.5px;margin-right:3px}

Langkah selanjutnya, yakni memasang atribut share tool nya agar kumpulan tag tag share button nya tampil, cara nya CTRL+F (memudahkan pencarian) lalu cari tag script ini <b:includable id='postQuickEdit' var='post'> lalu jika sudah maka otomatis kalian gulir kebawah dan cari tag penutup nya yakni </b:includable>, selanjutnya nya pasang script pemanggil Share button pertama nya di bawah ini tepat tag script sesudah </b:includable> , berikut script nya :

<b:includable id='share-tool' var='post'>

<div>

 <amp-social-share height='28' type='twitter' width='28'/>

 <amp-social-share height='28' type='gplus' width='28'/>

 <amp-social-share data-param-app_id='145634995501895' height='28' type='facebook' width='28'/>

 <amp-social-share height='28' type='pinterest' width='28'/>

 <amp-social-share height='28' type='linkedin' width='28'/>

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>

<amp-social-share expr:data-share-endpoint='&quot;tg://msg?text=&quot; + data:post.title + &quot; - &quot; + data:blog.url' layout='container' type='telegram'>

    <amp-img alt='Telegram' height='28' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUJDtz_CGQYrqbVKvN44rWsXx6ykahbQXniVu4JLh15kh9GDmoByi-fQJW59OxDbG-YkTeQRGlDWLyYD5tlkHmcFAbN_50jl7_Qxv9_PWnK3m01p_qz_u0NuMB8KX0R2UQANRM46UNqg/s1600/telegram.png' width='28'/>

</amp-social-share>

</b:if>

</div>

<div class='clear'/>

</b:includable>



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

  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>

</b:includable>

Dan, masih terdapat steps selanjutnya, yakni pemanggil share button HTML kedua nya, pasang script di bawah ini tepat sesudah tag <data:post.body> atau tag dimana tepat sesudah kolom posting, berikut Script nya :

<div class='share-aldi'>

 <h4>SHARE</h4>

 <b:include data='post' name='share-tool'/>

</div>

<div class='clear'/>

Langkah Terakhir, langsung saja Simpan Template dan lihat hasil nya.

Share this post