Cara Memasang Tombol Share MedSos Responsive di Blog

Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial adalah sebuah media online yang sangat populer dimana penggunanya dapat berinteraksi dengan pengguna jejaring lain. serta pengguna dengan mudah berpartisipasi, berbagi, dan menciptakan informasu meliputi blog, jejaring sosial, wiki, forum dan dunia virtual lainnya. media sosial sendiri sekarang menjadi kebutuhan khusus yang harus dilakukan bagi sebagian orang, bagaimana tidak hampir semua lapisan masyarakat memiliki media untuk melakukan medsos seperti smartphone dan komputer/laptop.

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

Karena banyaknya orang yang menggunakan media sosial membuat pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara memasang share media sosial di blog mereka, hal ini tidak lain adalah cara tepat meningkatkan visitor blog. sebagai contoh bila anda pengunjung yang membagikan artikel ke media sosial mereka secara otomatis pengguna akun lain yang tertarik dengan artikel tersebut pastinya akan mengklik tautan tersebut yang sangat bermanfaat mendatangkan tambahan visitor blog.

Nah untuk itu jangan sampai tidak memasang sahre media sosial di blog anda karena tidak cuman akan menambah visitor namun juga akan membuat blog semakin professional dengan share media sosial. namun kebanyakan memasang share media sosial di blog membuat loading blog menjadi lama alias tidak responsive. dan untuk itu saya disini akan membagikan cara memasang media sosial di blog Responsive. untuk tutorial pemasanganya bisa dilihat dibawah ini.

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/AVvXsEihKz6iJmplhiTyqVZ0FXNl79chC4sPrjPexj6Kx57bI-ugG23jkILjyW6JF7lsBUOiQARCyXtZ9SpGYTYN8_LfoX-frH5zKui0B9VAD_6x-n-i01i6cLpgWrBBgmDtXcJFbPRCZEZaIYs/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!

Tweet