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

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

Thanks for reading Tombol Berbagi Media Sosial (Social Share) Responsive di Bawah Posting Blog | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!