Cara Membuat Tombol Share Sosial Button Seperti EvoMagz

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 :

&

Baca Juga :

• Cara memasang Tombol Share di Blogger, Responsive!

Cara Membuat Tombol Share Sosial Button Seperti EvoMagz

Cara Pertama :

1. Buka Blogger Kemudian Login.

2. Dashboard - Template.

3. Edit HTML.

Cara Pembuatan :

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/AVvXsEgvnvYI_ybW3n8V-BnbXdW_JcbCHw93H8X0C7UG69JSj6C0TqQdS31SQyNGCwctDlchN42cMRNXeNbtzr49vNV87ZKR1OvS6hiyL01FOHuEUZP5Tp8Q9LmDjEiO7xLzWaWE1-ur8skyltrt/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.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

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

5. Simpan Template!

Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Tombol Share Sosial Button Seperti EvoMagz

Share this post

Related Post