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

Romeltea | Follow @romel_tea
Tombol Berbagi Media Sosial (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) 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:


Tombol Berbagi Media Sosial

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

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

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *