Cara Memasang Share Media Sosial Responsive di Blog

Cara Memasang Share Media Sosial Responsive di Blog

1. Pertama yang pasti anda harus masuk ke Blogger.
2. Kemudian masuk ke menu Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy kode CSS dibawah ini lalu paste tepat diatas kode ]]</b:skin>

 /* -- Tombol Share Medsos Responsive -- */
.article-share{
width: 100%;
display: block;
overflow: hidden;
}
.article-share-fb-cont, .article-share-other-cont {
float: left;
width: 114px;
padding: 5px;
height: 41px;
}
.article-share-tw-cont, .article-share-other-cont, .article-share-like-cont {
float: left;
width: 114px;
height: 41px;
padding: 5px;
}
.article-share-fb, .article-share-tw, .article-share-gp, .article-share-li, .article-share-pi {
float: left;
display: block;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJYBx7aAe37eT734lBSVC3FqEwIUdy9DNkkw5PVVzspCNzp8G7MyFtQZVRCEMNe7hHvagvLWG8ChvCV1yAyKPtt8yT1ClbdVc4Aekp8LX_nFTzaaGGDS9zogPz8wTiCP2OCvzrKoWJjM/s1600/share.png') no-repeat;
width: 42px;
height: 41px;
margin-right: 3px;
}
.article-share-fb-label {
color: #2d609b;
}
.article-share-fb-label, .article-share-tw-label, .article-share-gp-label {
float: left;
width: 58px;
height: inherit;
font-size: 12px;
font-family: 'Open Sans Bold', Arial, sans-serif;
line-height: 14px;

margin: 5px 0 0 4px;
}
.article-share-tw {
background-position: 0 -43px;
}
.article-share-tw-label {
color: #00c3f3;
}
.article-share-gp {
background-position: 0 -86px;
}
.article-share-gp-label {
color: #f00;
}

5. Langkah selanjutnya adalah memunculkan tombol share media sosial tersebut di blog dengan cara cari kode berikut <data:post.body/>, biasanya kode tersebut terdapat lebih dari satu silahkan pilih kode yang terakhir lalu copy kode CSS dibawah ini dan paste dibawah kode tersebut.

<div class='article-share'>
<div class='article-share-fb-cont'>
  <a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
     <a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
  <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
  <a class='article-share-tw-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
  <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
          <a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='article-share-like-cont'>
  <iframe class='article-share-like' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='padding-top:12px;'/>
</div>
</div>

6. Terakhir tinggal simpan template dan lihat hasilnya.

Bila tombol share tidak muncul silahkan paste kode yang ada pada langkah no 5 dibawah kode "<data:post.body/>" yang lain. Sekain yang dapat saya bagikan dan Good luck!