Tombol Berbagi Media Sosial (Social Share) Responsive di Bawah Posting Blog

Baca Juga

Cara Pasang Tombol Berbagi Media Sosial (Social Share Button) di Bawah Posting Blog. Responsive Mobile Friendly.
 
Tombol Berbagi Media Sosial (Social Share) yaitu elemen blog di bagian bawah atau atas tulisan 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 berbagi sosial ini di template bawaannya, namun desainnya terlalu sederhana.

Berikut ini salah satu style social share yang bisa Anda pasang di blog. Penampakannya seperti ini:

Cara Pasang Tombol Berbagi Media Sosial

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></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 kode berikut ini di bawah kode <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 dia Cara Pasang Tombol Berbagi Media Sosial (Social Share Button) di Bawah Posting Blog.

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