Cara membuat tombol social share serta tombol whatsapp di blog

Pada postingan sebelum saya pernah bahas tentang Cara Memasang Tombol Share Whatsapp With Thumbnail. Dan untuk postingan kali ini saya akan berbagi Cara membuat tombol social share serta tombol whatsapp di blog. Tombol social yang saya akan bahas kali ini sangat cocok buat kalian yang template nya sama sekali tidak ada tombol share social nya. Tapi enggak mungkin juga sih kalo template kalian sama sekali tidak ada tombol share nya. Tapi bila kalian ingin mencoba nya tidak ada salah nya untuk menggantikan tombol share yang sudah kalian punya dengan tombol share yang saya akan bagikan kali ini.

Kelebihan dari tombol share social ini bagi saya cukup simple dan tidak berat saat bila mana ada pengunjung yang singgah di artikel blog kalian. Apalagi buat kalian yang aktif di dunia maya yang selalu share di media social seperti Fb, twitter, google+ bahkan sampai di grup whatsapp sekalipun. Untuk contoh seperti apa sih tampilan nya,, kalian bisa lihat di tombol share social yang saya miliki di atas postingan. Bagamana menurut kalian? Lumayan lah yaa,, hahaha... :D
Ok bila kalian ingin juga memasang nya di template kalian silahkan simak baik" tutorial yang saya bagikan kali ini.

Cara membuat tombol social share serta tombol whatsapp di blog

1. Silahkan kalian copy code di bawah ini tepat di bagian atas code ]]></b:skin> atau </style>

/* Social Sharing Widget */
.share-box {
position: relative;
    margin: 10px 0 0;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}
.share-title {
color: #010101;
display: inline-block;
    box-shadow: inset 0 -7px 0 rgba(2, 171, 104, 0.16);
font-size: 15px;
font-weight: 500;
position: relative;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
    display: none;
}
.item .share-art a span {
display: inline-block;
    margin-left: 5px;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
.item .share-art a span {display:none;}}

Dan silahkan tambahkan code css untuk media screen mobile di bawah ini dan letakan di bawah nya code css yang di atas tadi.

@media only screen and (max-width:480px){
.share-box {text-align: center;}
.share-title {display: none;}
.share-art {float: none;}}

2. Dan untuk code pemanggilnya silahkan kalian copy code di bawah ini dan paste di bagian yang yang kalian ingin kan. Seperti contoh bila mana kalian ingin memasang nya di bawah judul artikel kalian bisa taro code tersebut di atas code <data:post.body/> dan bila kalian ingin memasang nya di bawah artikel kalian bisa letakan code nya di bawah code <data:post.body/>

<div class='share-box'>
          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'> 

<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>

<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  

<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>

</div>
         </div>
      <div style='clear:both'/> 

Perlu di perhatikan pada code <data:post.body/> kemungkinan ada code yang sama di template kalian. Jadi kalian bisa coba satu persatu yang menurut kalian posisi nya tepat pada bagian yang kalian ingin kan. Atau kalian bisa ganti code tombol share yang sudah ada di template kalian dengan code yang sekarang ini.

Bila ukuran share social na tidak pas sesuai sama template kalian, kalian cukup edit code css nya saja. Mungkin itu saja yang bisa saya bagikan di tutorial kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara membuat tombol social share serta tombol whatsapp di blog. Selamat mencoba!

Share this post