Cara Menciptakan Tombol Share Sosial Button Ibarat Evomagz

Baca Juga

Kali ini aku akan membagikan bagaimana cara menciptakan 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, alasannya ialah 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 aba-aba CSS berikut, dan Letakkan diatas kode ]]</b:skin> atau </style>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpFmrHWk5iSqWRwe-m5OfyVC3y_Ey2SMr8vMP-3KlfaUtQGgzMIkC0Ksq16hyphenhyphencqyryxFMg6VU-iiyjzJNe8X2XYlXtT6ZbFOFYNOqqNNz5ru50POlDbsuTDjJIRUb-3SjgiTLp29fvL9S/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 aba-aba ini lebih dari satu, silakan pilih yang kedua atau yang ketiga. Atau dapat diatas Related Post.
4. Copy&paste aba-aba 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, jikalau 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