Membuat Social Share Fixed With Show Hide And Animation Untuk Blog AMP HTML - Setelah sebelumnya Saya posting Membuat Sosial Share Buttons Responsive Pada Blog Hanya Menggunakan CSS. Untuk kesempatan kali ini Saya akan coba posting ihwal Membuat Social Share Fixed With Show Hide And Animation Untuk Blog AMP HTML.Sosial share atau tombol share sosial media cukup penting untuk kita terapkan pada blog kita. Karena dengan adanya tombol sosial share, maka akan sangat memudahkan pengunjung yang akan membagikan artikel kita kepada kerabat atau orang lain melalui sosial media.
Semakin banyak yang membagikan artikel kita ke sosial media, maka akan semakin banyak juga yang mengunjungi blog kita, dan artikel yang kita tulis akan di baca oleh banyak orang.
Sosial share ini sangat simple. Dengan dampak show hide yang keren, dan tidak banyak makan tempat. alasannya yakni dengan model vertikal. Untuk demonya silahkan Anda lihat pada blog ini di bab bawah sebelah kanan (Jika Saya belum menggantinya. hehe)
Nah, bagi Anda yang ingin Membuat Social Share Fixed With Show Hide And Animation Untuk Blog AMP HTML, mari kita ikuti caranya berikut ini.
1. Langkah Pertama
Pastikan blog AMP Anda sudah mempunyai 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 instruksi 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'></i></div>
<div class='show-less rotateIn'><i class='material-icons'></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 instruksi
</b:includable> pada instruksi berikut <b:includable id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>
3. Langkah Ketiga
Simpan instruksi di bawah ini <b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='share-tool'/>
</b:if>
Di bawah postingan atau di bawah instruksi menyerupai atau menyerupai mirip di bawah ini.
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
4. Langkah Keempat
Silahkan simpan instruksi CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile kalau 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}
}
5. Langkah Kelima
Karena ada tombol yang memakai 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'/>
Selesai... selamat mencoba....
Share this Article