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 – Kemarin Saya telah membagikan postingan cara Membuat Sosial Share Buttons Pada Blog Hanya Menggunakan CSS. Dan pada kesempatan kali ini Saya masih membicarakan sosial share lagi, yakni cara Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation.

Dengan adanya tombol sosial share, maka akan sangat membuat lebih mudah hadirin yang hendak membagikan postingan kita terhadap saudara atau orang lain lewat sosial media. Maka dari itu, kita harus membuat dan memasang sosial share yang keren dan simple, semoga pengunjung kepincut untuk membagikannya.

Semakin banyak yang membagikan postingan kita ke sosial media, maka akan bertambah banyak juga pengunjung blog kita dari sosial media, dan postingan yang kita tulis akan di baca oleh banyak orang.

Tombol sosial share ini sungguh simple. Dengan imbas show hide yang keren, dan tidak banyak makan daerah. 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 telah memiliki kedua js di bawah ini.

 

2. Langkah Kedua

Simpan isyarat HTML di bawah ini

               

   







       

  •    

  •    

  •    

  •    

  •  

     

 

 



Simpan di bawah isyarat pada arahan berikut

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

3. Langkah Ketiga

Simpan arahan di bawah ini

 


Di bawah artikel atau di bawah arahan seperti atau mirip mirip di bawah ini.

 
 

     

   

4. Langkah Keempat

Silahkan simpan aba-aba CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile jikalau tampilannya dipisahkan).

 amp-accordion.sharesposition:fixed;bottom:70px;right:30px;z-index:9999
amp-social-shareborder-radius:100%;box-shadow: 0 6px 12px rgba(0,0,0,.2);background-size:30px
h4.show-sharebackground:none;border:none;margin:0;padding:20px
.show-share .show-less,.show-share .show-morecolor:#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-moredisplay:none
amp-accordion.shares ul,amp-accordion.shares lilist-style-type:none
amp-accordion.shares limargin-bottom:5px
amp-accordion.shares li:last-childmargin-bottom:0
amp-accordion.shares .share-iconpadding:0;position:absolute;top:100%

.slideInUp1,.slideInUp2-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both
.slideInUp1animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both
.slideInUp2animation-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
.slideInUp3animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both
.slideInUp4animation-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 slideInUp0%-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible
100%-webkit-transform:translateY(0);transform:translateY(0)

@keyframes slideInUp0%-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 rotateIn0%-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 rotateIn0%-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.

 

Selesai… selamat mencoba. Dan semoga berfaedah.

Tinggalkan komentar