Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation
Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation - Pada kesempatan kali ini Saya masih membahas sosial share lagi, yaitu 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 membuat dan memasang sosial share yang keren dan simple, agar 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 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
Simpan 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'></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 kode </b:includable> pada kode berikut
<b:includable id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>3. Langkah Ketiga
Simpan kode 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 kode seperti atau mirip seperti 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 kode CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile jika 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 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'/>Selesai... selamat mencoba. Dan semoga bermanfaat.
Komentar