Tombol Mengembangkan Media Umum (Social Share) Responsive Di Bawah Posting Blog

Cara Pasang Tombol Berbagi Media Sosial (Social Share Button) di Bawah Posting Blog. Responsive Mobile Friendly.
 
Tombol Berbagi Media Sosial (Social Share) ialah elemen blog di bab bawah atau atas goresan pena untuk memudahkan pengunjung atau admin nge-share update postingannya ke akun media sosial.

Dalam teknik SEO, social share ini merupakan Social Signal yang menjadi salah satu faktor bagi mesin pencari, khususnya Google, untuk memeringkat posting blog di halaman hasil pencarian.

Blogger sendiri sudah menyediakan tombil menyebarkan sosial ini di template bawaannya, namun desainnya terlalu sederhana.

Berikut ini salah satu style social share yang dapat Anda pasang di blog. Penampakannya menyerupai ini:

Cara Pasang Tombol Berbagi Media Sosial

1. Tema > Edit HTML
2. Copas aba-aba berikut ini di atas aba-aba ]]></b:skin>

.share-art{float:left;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.read-art{margin-left:0}
.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}
}
@media only screen and (max-width:480px){
.share-art{float:none;margin:0 auto;text-align:center;clear:both}
}
@media only screen and (max-width:360px){
.share-art {float:none;margin:0 auto;text-align:center;clear:both}
}

 
3.  Copas aba-aba berikut ini di bawah aba-aba <data:post.body/> yang kedua atau ketiga. 

<div class='share-box'>
               <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>

4. Save!


Itu ia Cara Pasang Tombol Berbagi Media Sosial (Social Share Button) di Bawah Posting Blog.

Untuk social share lebih lengkap, menyerupai yang saya pasang di blog ini, silakan ambil kodenya di AddThis.*