Skip to main content
WARIM

follow us

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

Sosial share atau tombol sosial share ke sosmed adalah salah satu tombol berbagi yang akan memudahkan pengunjung yang akan membagikan artikel kita ke berbagai sosial media yang di sukainya.

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, 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'>&#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>

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 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.

You Might Also Like:

Buka Komentar