Memasang Tombol Share Ala Vio Magz

Tombol Share Vio Magz template terbaru karya mas Sugeng memang hadi lebih moderen dengan flat designnya yang dinamis. Terlihat berbeda dari tombol share/share button dari template-template pendahulunya. Memang tidak dipungkiri tombol share menjad hal yang krusial pada sebuah laman blog/web. Karena terkadang pembaca menemukan/menjumpai sesuatu tulisan yang menurut mereka menarik dan bermanfaat untuk diketahui orang lain. Hal yang dilakukan pembaca umumnya adalah dengan membagikan hal yang menarik tersebut melalui e-mail atau pun sosial media, pembaca mengharapkan orang lain bisa meperoleh informasi yang sama. Maka dari itulah, tugas dari pemberdaya laman tersebut untuk memberikan kemudahan pembaca dalam membagikan tulisan yang dirasanya menarik dengan menyediakan tombol share, sehingga pembaca tidak perlu repot-repot copy paste link. Maka tak heran keberadaan tombol share di template terbarunya mas Sugeng begitu diperhatikan fungsi dan unsur estetikanya agar senada dengan template Vio Magz, yaitu minimalis. Dimana tombol share salah satu fitur yang sering dilirik oleh pengunjung blog/web.
       Karena tombol share Vio Magz ini yang cukup menarik dan patut dicoba digunakan pada halaman agan dipadukan dengan template yang ada apabila tidak ingin berganti template tetapi ingin tampil sedikit berbeda agar tidak serupa dengan laman yang memakai tema/template yang sama dengan agan. Maka tak salah jika agan mencoba tombol share dari Vio Magz ini. Style nya jaman now banget, flat design seperti Metro UI membuat tampilan halamanmu lebih dinamis dan stylish namun tetap sederhana.

Oke, sudah cukup basa-basinya, saya sudah kehabisan kata-kata tidak bisa mengarang lagi, silahkan disimak langkah-langkah cara pemasangan script share buttons ala Vio Magz.

1. First, log in dan masuk dashboard blogger.
2. Kemudian pilih menu Theme dan klik Edit HTML.
3. Lalu, terlebih dahulu menghapus script CSS dan HTML share button yang ada pada template yang sobat gunakan dengan cara tekan CTRL+F dan ketik "share" (tidak selalu "share" tergantung script yang dibuat pengembang, untuk mengetahuinya bisa dengan inspect element halaman sobat) dan cari untuk kemudian dihapus.



HTML Share Button Bawaan Template

4. Setelah itu ganti dengan script HTML berikut.

   <b:includable id='postsharebutton' var='post'>
   <div id='share-container'>
   <div class='label-line-c'>
   <p class='share-this-pleaseeeee'>Share this post</p>
   </div>
   <div id='share'>
     <!-- facebook -->
     <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
     <!-- twitter -->
     <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
     <!-- google plus -->
     <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-google-plus'/></a>
     <!-- linkedin 
     <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='blank'><i class='fa fa-linkedin'></i></a> -->
     <!-- pinterest 
     <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='blank'><i class='fa fa-pinterest-p'></i></a> -->
     <!-- WhatsApp -->
     <a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
   </div>
   </div>
   </b:includable>
   

5. Jangan lupa CSS juga dihapus.



CSS utama yang perlu dhapus

6. Apabila menjumpai CSS seperti ini yang terpisah dari kumpulan CSS lainnya, terserah akan dihapus atau tidak. Jika tidak cukup ruba selectornya saja menjadi serupa selector CSS yang baru misal, share-post{..} menjadi share-container{...}. Selama script nya hanya mengatur hal yang umum tidak akan menjadi masalah.



CSS optional

7. Jika semua sudah selesai, silahkan copy dan paste script CSS berikut di atas kode ]]></b:skin> atau di tempat CSS sebelumnya juga boleh.

   
   /* Share button */
   .share-this-pleaseeeee{display:inline-block;margin:0;color:#afafaf;text-transform:uppercase;font-size:16px;background:#fff;z-index:1;position:relative;padding:0 10px;font-weight:500}
   #share-container{margin:20px auto;overflow:hidden}
   #share{width:100%;text-align:center}
   #share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity .15s linear;float:left}
   #share a:hover{opacity:.8}
   #share i{position:relative;top:50%;transform:translateY(-50%)}
   #share a:first-child{border-radius:3px 0 0 3px}
   #share a:last-child{border-radius:0 3px 3px 0}
   .facebook{background:#3b5998}
   .twitter{background:#55acee}
   .googleplus{background:#dd4b39}
   .linkedin{background:#0077b5}
   .pinterest{background:#cb2027}
   .whatsapp{background:#25d366}
   

8. Terakhir, klik Save untuk menyimpan perubahan

N.B

---

secara default, mas Sugeng hanya mengaktifkan 4 tombol share, yaitu Facebook, Twitter, Google Plus, dan WhatsApp. Jika agan ingin mengakfitkan keseluruhan tombol yang tersedia, silahkan agan melakukan perubahan sedikit pada CSS dan HTML nya. Perubahan tersebit meliputi hal berikut:

1. Merubah CSS
   • Perhatikan angka 25% pada kode #share a{width:25%;height:40px;...
   • Rubahlah angka tersebut menurut perhitungan berikut, bagilah nilai 100% dengan jumlah tombol yang akan diaktifkan. Misalkan 5 tombol, maka 100% : 5 = 20%, jika seluruhnya (6 tombol) maka 100% : 6 = 16.66
2. Merubah HTML
   • Dari mas Sugengnya tombol Linkedin dan Pinterest dimatikan, untuk mengaktifkannya silahkan perhatikan kode berikut --> diakhir kode penutup HTML Linkedin dan Pinterest
   • Pindah kode --> di belakang tulisan nama tombol yang akan diaktifkan
   • Misal Pinteres, Senula seperti ini

     
     <!-- pinterest 
     <a class='pinterest' ...
     .....</a> -->
     

     menjadi

     
     <!-- pinterest -->
     <a class='pinterest' ...
     .....</a>
     

   • Kode <!-- ... --> merupakan kode comment, semua yang diantara kode tersebut tidak akan dieksekusi karena dianggap komentar, sama seperti /* ... */ jika di CSS
   • Terakhir, klik Save untuk menyimpan perubahan

       Oke, demikian tulisan saya mengenai cara Memasang Share Button Ala Vio Magz di laman/blog kita. Apabila ada hal yang membingungkan silahkan tanyakan di kolom komentar, insya Allah saya jawab (kalau bisa hihi :D ).
Credit by Mas Sugeng – Sugeng.id