Cara Pasang Sosial Share Show Hide di Blog AMP HTML

Perkembangan di Dunia IT kalau kita bahas memang tidak akan ada habisnya, selalu terus berkembang seiring dengan kebutuhan akan informasi yang cepat dan tepat, bermunculan banyaknya sosial share seperti facebook, twitter, Path, Whatsapp, Linkedin, dan sejenisnya menambah ramai dunia Maya. Belakangan ini banyak sekali informasi yang terbaru bahkan belum tentu kebenarannya muncul dan sangat cepat informasi tersebut diterima. 

Pemanfaatan sosial share sekarang ini sudah menjadi andalan bagi kita dalam mencari dan menyebarkan informasi dengan cepat, hanya hitungan detik informasi yang di sebar melalui media sosial sudah tersebar sampai ke penjuru dunia, ada berita yang positif dan tidak banyak juga berita yang belum tentu benar atau istilahnya adalah berita bohong atau HOAX.

Penggunaan Media sosial sebenarnya sangat bermanfaat dan bernilai ekonomis jika dipergunakan yang baik dan sesuai dengan kebutuhannya, seperti halnya saya pribadi justru merasa sangat di untungkan dengan banyaknya kehadiran Media Sosial, kenapa saya katakan demikian karena saya selaku Blogger sekarang ini sangat di mudahkan untuk berbagi informasi manfaat yang baik dengan menyajikan Informasi pengetahuan khususnya di dunia Blogging.

Pada awal tahun 2003 saya memulai ngeblog agak sulit terkadang untuk mendapatkan pengunjung ke Blog, saya harus ekstra untuk memasarkannya dan bahkan cara manual pun dilakukan, namun sekarang ini sudah berbeda, bagi para blogger sekarang ini sudah sangat mudah untuk memasarkan blog atau websitenya, karena support untuk blogger sudah banyak.

(baca juga : 6 Alasan Ngeblog Menggunakan Blogger)

Dari mulai penyedia hosting dan domain dapat dengan mudah membantu memasarkan bahkan Google sendiri punya alat pemasaran untuk membantu para developer website dan aplikasi untuk memasarkan produk mereka. Aplikasi google yang sudah terkenal dan predikatnya bagus adalah Google Adword. 

Nah dari fenomena diatas sudah dapat kita simpulkan bahwa sekarang ini sudah bukan hal yang sulit bagi para Blogger untuk mendatangkan trafik tinggal bagaimana caranya agar banyak pengunjung ke Blog kita, tentunya Postingan sebelumnya sudah banyak saya bahas dan sobat bisa lihat.

Untuk Postingan kali ini berhubungan dengan fenomena diatas saya akan berbagi mengenai cara pemanfaatan Media Sosial tersebut adalah dengan Pasang Sosial Share Show Hide di Blog AMP HTML, disini akan saya jelaskan cara menerapkannya, tentunya tombol sosial share ini sangat berguna bagi peningkatan Rangking di Blog kita, dengan adanya ini jika nanti ada pengunjung yang suka dengan informasi yang kita berikan dan merasa sangat bermanfaat sajian Konten yang benilai sudah secara Otomatis pengunjung tanpa di minta akan membagikannya di Media Sosial.

Untuk Tampilan Sosial media share ini untuk Blog AMP HTML namun jika sobat belum menggunakan Template Blog AMP HTML bisa juga di gunakan. Tampilan amp-sosial-share ini terlihat datar dan bisa show hide jadi tidak akan mengganggu pandangan pembaca berada horizontal di pojok kanan bawah dengan bentuk kotak, namun untuk penempatannya sobat bisa atur sendiri mau di kanan atau kiri, nah bagaimana cara penerapannya mari kita simak.

Untuk tampilannya kita gunakan CSS style dan untuk tampilan show hide nya kita akan gunakan amp-accordion dan ditambahkan CSS Animation gunanya untuk efek show button.

Jika sobat kebetulan sudah menggunakan template Blog AMP HTML bisa langsung dicoba Sosial Share Show Hide di Blog AMP HTML berikut ini.

Langkah Awal

Silahkan periksa terlebih dahulu apakah sobat sudah pasang JS amp-sosial-share, jika belum silahkan salin kode berikut.

<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'/>

Langkah ke Dua
Silahkan salin kode HTML dibawah 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>

Jika sudah di salin silahkan simpan tepat dibawah kode </b:includable> di kode berikut dibawah ini

<b:includable id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>

Langkah Ketiga
Silahkan salin kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

Kemudian simpan tepat di bawah postingan atau kodenya mirip seperti 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>

Langkah ke Empat
Silahkan salin dan simpan kode CSS ini di setingan Style amp-custom agar tampilan di postingan baik desktop ataupun mobile kalau ingin 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}
}

Lanjut ke Langkah Kelima
Disini saya menggunakan Material Icon jadi pastikan sobat sudah memasang font material iconnya, jika belum berikut silahkan salin kode font face dan simpan di atas </style> atau diatas ]]></b:skin>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

atau bisa gunakan kode CSS ini

<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet' type='text/css'/>

dan Selesai, silahkan dicoba semoga bermanfaat.