Cara Memasang Tombol Share Keren di Blog

Nah, Pada postingan kali ini saya akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini sangat simple dan keren, mudah terlihat oleh pengunjung dan fast loading juga responsive. Kurang lebih tampilannya seperti gambar dibawah ini:

Jika anda tertarik silahkan ikuti langkah-langkahnya berikut ini:

Cara Memasang Tombol Share Keren di Blog

1. Silahkan login akun Blogger >> Tema >> Edit HTML
2. Lalu letakkan kode berikut ini tepat diatas kode ]]></b:skin>

   /* Tombol Share */
   .share-judule {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 {margin:0 0 8px;padding:0;overflow:hidden}
   #share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
   text-align: center;text-transform: uppercase;}
   #share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
   transition: opacity 0.15s linear;float: left;text-align: center;}
   #share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
   .wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
   .wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
   .wa-button i{font-weight:400;margin:0 10px 0 0}
   .label-line {text-align: center;margin-bottom: 6px;position:relative;}
   .label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
   top: 50%;left: 0;margin-top: -2px;}

3. Kemudian letakkan kode HTML berikut ini tepat dibawah kode <data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

   <div id='share-container'>
   <div class='label-line'>
   <p class='share-judule'>Bagikan Artikel ini</p>
   </div>
   <div id='share'>
   <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
   <a data-action='share/whatsapp/share' style='background:#43d854' 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'></i></a>
   </div>
   </div>

4. Terakhir letakkan kode font awesome tepat diatas kode </head>

   <link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

5. Simpan tema dan lihat hasilnya.

Jika tidak ada kesalahan, maka tombol share keren sudah terpasang dibawah halaman postingan blog anda.