Tutorial Memasang Sosial Share Show Hide di Blog AMP HTML

Untuk Postingan kali ini saya akan berbagi mengenai cara pemanfaatan Media Sosial dengan memasang Sosial Share Show Hide di Blog AMP HTML, disini akan saya jelaskan cara menerapkannya, tentunya tombol sosial share ini sangat berguna bagi peningkatan pengunjung di Blog kita, dengan adanya ini jika nanti ada pengunjung yang suka dengan informasi yang kita berikan dan merasa sangat bermanfaat sajian Konten yang benilai sudah secara Otomatis pengunjung tanpa di minta akan membagikannya di Media Sosial.

Untuk Tampilan Sosial media share ini untuk Blog AMP HTML namun jika sobat belum menggunakan Template Blog AMP HTML bisa juga di gunakan. Tampilan amp-sosial-share ini terlihat datar dan bisa show hide jadi tidak akan mengganggu pandangan pembaca berada horizontal di pojok kanan bawah dengan bentuk kotak, namun untuk penempatannya sobat bisa atur sendiri mau di kanan atau kiri, bagaimana cara penerapannya mari kita sima dibwah.

Untuk tampilannya kita gunakan CSS style dan untuk tampilan show hide nya kita akan gunakan amp-accordion dan ditambahkan CSS Animation gunanya untuk efek show button.

Jika sobat menggunakan blog AMP dan ingin mencoba menggunakan amp social share fixed with show hide and animation ini, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Pastikan blog AMP sobat sudah memiliki kedua js di bawah ini.

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

2. Langkah Kedua
Tambakan kode HTML di bawah ini

<b:includable id='share-tool' var='post'>
<amp-accordion class='shares'>
    <section>
<h4 class='show-share'>
<div class='show-more rotateIn'><i class='material-icons'>&#59405;</i></div>
<div class='show-less rotateIn'><i class='material-icons'>&#58829;</i></div>
</h4>
<div class='share-icon'>
<ul class='slideInUp'>
   <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li>
   <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li>
   <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>
   <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li>
   <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li>
  </ul>
      </div>
  </section>
  </amp-accordion>
<div class='clear'/>
</b:includable>

Dan simpan di bawah kode </b:includable> pada kode berikut

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

2. Langkah Ketiga
Simpan kode di bawah ini

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

Di bawah postingan atau di bawah kode seperti atau mirip seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

2. Langkah Keempat
Silahkan simpan kode CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile jika dipisahkan).

amp-accordion.shares{position:fixed;bottom:70px;right:30px;z-index:9999}
amp-social-share{border-radius:100%;box-shadow: 0 6px 12px rgba(0,0,0,.2);background-size:30px}
h4.show-share{background:none;border:none;margin:0;padding:20px}
.show-share .show-less,.show-share .show-more{color:#fff;font-size:24px;width:50px;height:50px;line-height:50px;padding:0;margin:0;text-align:center;border-radius:100%;background:#2196f3;border:none;box-shadow: 0 6px 12px rgba(0,0,0,.2);position:fixed;bottom:30px;right:30px;z-index:10000}
amp-accordion.shares section:not([expanded]) .show-less,amp-accordion.shares section[expanded] .show-more{display:none}
amp-accordion.shares ul,amp-accordion.shares li{list-style-type:none}
amp-accordion.shares li{margin-bottom:5px}
amp-accordion.shares li:last-child{margin-bottom:0}
amp-accordion.shares .share-icon{padding:0;position:absolute;top:100%}

.slideInUp1,.slideInUp2{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp1{animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both}
.slideInUp2{animation-name:slideInUp;-webkit-animation-duration:2.5s;animation-duration:2.5s;animation-fill-mode:both}
.slideInUp3,.slideInUp4{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp3{animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}
.slideInUp4{animation-name:slideInUp;-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}
.slideInUp,.slideInUp5{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}

2. Langkah Kelima
Karena ada tombol yang menggunakan material icon, jadi pastikan Anda sudah memasang font Material Icon.

<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet' type='text/css'/>

Selamat mencoba ...

Sumber : Kompiajaib.com