IwanBerbagi.com - Berawal dari saya mencoba memodifikasi template brosense yang saya gunakan pada blog Droidbuzz.net dan dari sana saya harus menghapus fitur-fitur yang tidak terpakai pada template brosense, baik itu komentar facebook maupun komentar blogger yang belum support AMP.

Termasuk juga disana saya harus menghapus kode share button yang juga tidak support amp, karena amp sendiri sudah memiliki share button khusus namun dengan tampilan standar pabrik gitu hehe. nah dari hal itu saya mencoba memodifikasi tampilan dari share button tersebut menjadi lebih simple dan lebih cocok dengan design template nya juga.
Modifikasi Share Button AMP Menjadi Lebih Simple
Sharebutton ini saya sudah lengkapi dengan efek hover yang lumayan lah hehe. Jika kamu tertarik memasangnya pada template kamu, kamu bisa mengikuti tutorial singkat saya pada artikel kali ini.

Tahap pertama kamu harus pastikan sudah memasang script js share button amp berikut :
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
Jika di template kamu sudah ada js tersebut lewati langkah ini. Selanjutnya kamu hanya perlu menambahkan CSS sosial share pada tampilan posting (jika kamu menggunakan tag kondisional khusus) biasanya penggguna template yang di share kang Adhy, jika hanya menggunakan custom css satu saja kamu hanya menambahkan satu bagian saja, berikut ini CSS nya :
/* Custom Sosial Share by iwanberbagi.com */
amp-social-share[type="twitter"] {
  background-size:15px 15px;
  transition:all .4s ease-out;
box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}

amp-social-share[type="gplus"], amp-social-share[type="facebook"], amp-social-share[type="linkedin"], amp-social-share[type="pinterest"] {
  background-size:20px 20px;
  transition:all .4s ease-out;
box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
}
amp-social-share[type="twitter"]:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)}
amp-social-share[type="gplus"]:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)}
amp-social-share[type="facebook"]:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)}
amp-social-share[type="linkedin"]:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)}
amp-social-share[type="pinterest"]:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)}

.share-buzz {margin-top:10px}
.share-buzz h4{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);overflow:hidden;float:left;font-size:11px;background:#37474F;color:#fff;padding:8px;margin-right:3px}
Setelah itu kamu cari kode seperti gambar dibawah ini yang biasanya bisa kita gabung dengan kode komentar blogger, atau juga ada share bawaan dari template seperti ini :
Modifikasi Share Button AMP Menjadi Lebih Simple
Untuk kodenya berikut ini :
      <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'/>
</div>
<div class='clear'/>
</b:includable>
Selanjutnya kamu harus menempatkan kode pemanggil berikut ini yang biasanya ditempatkan dibawah postingan, dalam contoh kali ini dibawah postingan dengan kode <data:post.body/> dan tempatkan kode pemanggilnya :
<div class='share-buzz'>
    <h4>SHARE</h4>
    <b:include data='post' name='share-tool'/>
</div>
Setelah semua tahap nya kamu ikuti, selanjutnya kamu bisa Simpan Template dan lihat hasilnya, jika kamu masih ada yang bingun bisa komentar untuk saya bantu. Selamat mencoba.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed