Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation - Kemarin Saya sudah membagikan artikel cara Membuat Sosial Share Buttons Pada Blog Hanya Menggunakan CSS. Dan pada kesempatan kali ini Saya masih membahas sosial share lagi, adalah cara Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation.Dengan adanya tombol sosial share, maka akan sangat memudahkan pengunjung yang akan membagikan artikel kita kepada kerabat atau orang lain melalui sosial media. Maka dari itu, kita harus menciptakan dan memasang sosial share yang keren dan simple, semoga pengunjung tertarik untuk membagikannya.
Semakin banyak yang membagikan artikel kita ke sosial media, maka akan semakin banyak juga pengunjung blog kita dari sosial media, dan artikel yang kita tulis akan di baca oleh banyak orang.
Tombol sosial share ini sangat simple. Dengan efek show hide yang keren, dan tidak banyak makan tempat. Nah, bagi Anda yang ingin Membuat Social Share Fixed Dengan Show Hide Dan Animation Untuk Blog AMP HTML, mari kita ikuti caranya dibawah ini.
Baca juga: Memasang Share Button AddThis Pada Blog AMP
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
Simpan isyarat 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>
Simpan di bawah isyarat
</b:includable> pada isyarat berikut <b:includable id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>
3. Langkah Ketiga
Simpan isyarat 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 isyarat 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 isyarat CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile jikalau tampilannya 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. Dan semoga bermanfaat.
