Cara Membuat Tombol Share Sosial Button Seperti EvoMagz ~ Gudang ITE

Kali ini saya akan membagikan bagaimana cara membuat Tombol Share Sosial Media Buttons Seperti EvoMagz. Tombol Share ini, merupakan Tombol Share karya Mas Sugeng yang sudah ada di Template EvoMagz. Tombol Share ini keren serta unik sekali, karena Tombol Share Button ini disertai dengan gambar dan Box-Count. Untuk lebih jelasnya perhatikan gambar berikut :

Cara Membuat Tombol Share Sosial Media Button :

Cara Pertama :

1. Buka Blogger Kemudian Login.

2. Dashboard - Template.

3. Edit HTML.

Cara Pembuatan/Proses Editing :

1. Temukan Kode (CTRL+F) ]]</b:skin> atau </style>

2. Copy & Paste kode CSS berikut, dan Letakkan diatas kode ]]</b:skin> atau </style>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgin_QviIiXjXnCT91KU5iuFzuRUtUsiYBhsh97HhVatiGZEtpw0gy1_ThaygRkG98dSv800MvigN4cG_GaL8yke4A3aPaMxc5GVDJF-1nI8xHqju7N6yPmKlANWbKQV-lOWLeLuHzHCg3P/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}

3. Jika sudah? Temukan kode <data:post.body/> . Biasanya kode ini lebih dari satu, silakan pilih yang kedua atau yang ketiga. Atau bisa diatas Related Post.

<div class='share-buttons-box'>
  <div class='share-buttons'>
   <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
   <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
   <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
   <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
   <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
   lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
  </div>
  </div>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

4. Simpan Template!

Sekian Tips Blogger dari saya, Semoga Bermanfaat!

Gudang ITE

Cara Membuat Tombol Share Sosial Button Seperti EvoMagz

Label