Cara Membuat Widget Sosial Share Show Hide Fixed Melayang Valid AMP

Untuk Tutorial atau cara ini hanya untuk blog yg telah valid AMP. Untuk Demo atau Resultnya Silahkan lihat dibawah ini.

Demo

apabila berminat silahkan anda tutorial dibawah ini.

Petama pastikan Template yang anda pakai sudah terpasang kode js dibawah 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'/>

Jika sudah ada lewati saja.

Lanjut, Silahkan anda Copy kode dibawah 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 Letakan Kode diatas di bawah kode </b:includable>

...............

...............

...............

Baca Juga : Cara Membuat Related Post Valid AMP

Langkah selanjutnya Silahkan Copy Kode dibawah ini

Dan simpan kode Diatas dibawah kode seperti dibawah 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>

Selanjutnya Agar Widget Social Membentuk Tampilan yang Akan dibuat sekarang, silahkan anda copy kode css dibawah ini dan letakan di Amp style custom bagian postingan.

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}

}

Langkah Selanjutnya Silahkan anda tambahkan kode material icon dibawah ini dan letakan di atas Head

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

Terakhir Klik Simpan Template Dan Silahkan Chek pada Tampilan Post.

Mungkin hanya itu saja untuk artikel Cara Membuat Widget Sosial Share Show Hide Fixed Melayang Valid AMP, Semoga bermanfaat.

Berbagi :