Cara Membuat Tombol Share (bagikan) keren di Blog

Cara Membuat Tombol Share (bagikan) Keren di Blog - Pada Kesempatan Kali ini saya akan coba membahas bagaimana caranya membuat Tombol Share di Blog, Tombol ini berguna untuk membagikan artikel secara Langsung ke media Sosial oleh pengunjung Blog anda.


Sebenarnya Banyak sekali cara dan bentuk Tombol Share yang bisa di buat, Namun kali ini saya akan membahas cara membuat Tombol Share versi Template Viomgaz, untuk langkah langkah nya bisa di simak di bawah ini ya.

CARA CARA 


1. Seperti biasa anda masuk dulu ke editor Template Blog anda

2. jika sudah terbuka Kotak editor Template nya silahkan anda letakan kode di bawah ini tepat di atas 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;}

2. Langkah Terakhir silahkan anda letakan kode di bawah ini tepat di atas kode <data:post.body/>

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

3. Jangan Lupa tempel kan pula Kode di bawah ini tepat di atas kode </head>

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

Silahkan anda Save Template anda kemudian Lihat hasil nya. pasti Tombol Share pun sudah muncul.

Jika anda lebih Suka dengan Tampilan Share dari Temlate Blog Evo Magz, cara cara nya bisa lihat di bawah ini.

1. Silahkan anda Tempel kan Kode di bawah ini tepat di atas kode ]]></b:skin>

.share-buttons-box {height: 67px;background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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}

2. Kemudian silahkan pasang kode di bawah ini tepat di bawah kode <data:post.body/>  
3. Kode <data:post.body/> biasanya lebih dari satu, silahkan anda Tempel kan di <data:post.body/> yang ke dua atau yang ke tiga.


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

Jika Sudah selesai, silahkan Simpan Template anda, kemudian Lihat Hasil nya.

Catatan*
pada Bulan April mendatang layanan sosial Media Google Plus akan di hapus oleh pihak Google, maka dari itu bagi blog nya yang masih ada tombol Share on Google Plus, silahkan anda menggantinya dengan tombol sosial media Linked in atau Pinteres, untuk kode Tombol nya bisa anda lihat di Bawah ini

<!-- linkedin -->
  <a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a>
  <!-- pinterest -->
  <a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i></a>

Nah itulah sedikit penjelasan mengenai Cara Membuat Tombol Share (bagikan) keren di Blog, selamat mencoba ya.

Berlangganan update artikel terbaru via email:

3 Responses to "Cara Membuat Tombol Share (bagikan) keren di Blog"

Iklan Tengah Artikel 2