Skip to main content
Website Mini

follow us

Membuat Social Share Fixed With Show Hide And Animation Untuk Blog AMP HTML

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 tentang 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 efek show hide yang keren, dan tidak banyak makan tempat. karena dengan model vertikal. Untuk demonya silahkan Anda lihat pada blog ini di bagian 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 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

Tambakan 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'>&#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 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 == &quot;item&quot;'>
<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 == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
  <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 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....

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar