Home CSS Cara Memasang Tombol Share MedSos Responsive di Blog

Cara Memasang Tombol Share MedSos Responsive di Blog

by Erzed

Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial merupakan 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 tak hampir semua lapisan masyarakat terdapat media untuk melakukan medsos seperti smartphone dan komputer/laptop.

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

Karena kayanya orang yang menggunakan media sosial menciptakan pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara memasang share media sosial di blog mereka, hal ini tak lain merupakan 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.

Cara Memasang Tombol Share MedSos Responsive di Blog 5

Nah untuk itu jangan sampai tak memasang sahre media sosial di blog anda sebab tak hanyan akan menambah visitor namun juga akan menciptakan blog semakin professional dengan share media sosial. namun kekayaan memasang share media sosial di blog menciptakan loading blog menjadi lama alias tak responsive. dan untuk itu admin disini akan membagikan cara memasang media sosial di blog Responsive. untuk tutorial pemasanganya dapat 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(‘http://3.bp.blogspot.com/-3ypydr9U3DI/U9DHOBQy-vI/AAAAAAAAAbs/hvhfDPIpevI/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 merupakan 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.

Baca :  Cara membuat Popular Post Cantik Warna Warni

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

You may also like