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 menyerupai facebook, twitter, Path, Whatsapp, Linkedin, dan sejenisnya menambah ramai dunia Maya. Belakangan ini aneka macam 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 umum sudah tersebar hingga ke penjuru dunia, ada isu yang nyata dan tidak banyak juga isu yang belum tentu benar atau istilahnya ialah isu bohong atau HOAX.

Penggunaan Media sosial bergotong-royong sangat bermanfaat dan bernilai ekonomis kalau dipergunakan yang baik dan sesuai dengan kebutuhannya, menyerupai halnya saya pribadi justru merasa sangat di untungkan dengan banyaknya kehadiran Media Sosial, kenapa saya katakan demikian alasannya saya selaku Blogger sekarang ini sangat di mudahkan untuk mengembangkan informasi manfaat yang baik dengan menyajikan Informasi pengetahuan khususnya di dunia Blogging.

Pada awal tahun 2003 saya memulai ngeblog agak sulit terkadang untuk menerima 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, alasannya 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 mengagumkan ialah 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 biar banyak pengunjung ke Blog kita, tentunya Postingan sebelumnya sudah banyak saya bahas dan sahabat mampu lihat.

Untuk Postingan kali ini berafiliasi dengan fenomena diatas saya akan mengembangkan mengenai cara pemanfaatan Media Sosial tersebut ialah dengan Pasang Sosial Share Show Hide di Blog , disini akan saya jelaskan cara menerapkannya, tentunya tombol sosial share ini sangat berkhasiat bagi peningkatan Rangking di Blog kita, dengan adanya ini kalau 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 namun kalau sahabat belum menggunakan Template Blog mampu juga di gunakan. Tampilan amp-sosial-share ini terlihat datar dan mampu show hide jadi tidak akan mengganggu pandangan pembaca berada horizontal di pojok kanan bawah dengan bentuk kotak, namun untuk penempatannya sahabat mampu 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 sahabat kebetulan sudah menggunakan template Blog mampu pribadi dicoba Sosial Share Show Hide di Blog berikut ini.

Langkah Awal

Silahkan periksa terlebih dahulu apakah sahabat sudah pasang JS amp-sosial-share, kalau belum silahkan salin aba-aba 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 aba-aba 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 sempurna dibawah aba-aba </b:includable> di aba-aba berikut dibawah ini

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

Langkah Ketiga
Silahkan salin aba-aba ini

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

Kemudian simpan sempurna di bawah postingan atau kodenya menyerupai mirip 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 aba-aba CSS ini di setingan Style amp-custom biar 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 sahabat sudah memasang font material iconnya, kalau belum berikut silahkan salin aba-aba 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 mampu gunakan aba-aba CSS ini

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

dan Selesai, silahkan dicoba semoga bermanfaat.