Sekilas Informasi Trik Memasang Tombol Share Medsos Responsive Di Blog

Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial ialah sebuah media online yang sangat terkenal dimana penggunanya sanggup berinteraksi dengan pengguna jejaring lain. serta pengguna dengan gampang berpartisipasi, berbagi, dan membuat informasu mencakup blog, jejaring sosial, wiki, lembaga dan dunia virtual lainnya. media umum sendiri kini menjadi kebutuhan khusus yang harus dilakukan bagi sebagian orang, bagaimana tidak hampir semua lapisan masyarakat mempunyai media untuk melaksanakan medsos menyerupai smartphone dan komputer/laptop.

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

Karena banyaknya orang yang memakai media umum membuat pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara memasang share media umum di blog mereka, hal ini tidak lain ialah cara sempurna meningkatkan visitor blog. sebagai teladan jikalau anda pengunjung yang membagikan artikel ke media umum mereka secara otomatis pengguna akun lain yang tertarik dengan artikel tersebut pastinya akan mengklik tautan tersebut yang sangat bermanfaat mendatangkan pemanis visitor blog.

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

Cara Memasang Share Media Sosial Responsive di Blog

1. Pertama yang niscaya anda harus masuk ke Blogger.
2. Kemudian masuk ke hidangan Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy arahan CSS dibawah ini kemudian paste sempurna 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/AVvXsEjeYx-6z7pHCtr_u2MdcvyiqvLgqYKVFqTnIeVN9dPKAMWIFR7Qv1oCQ9hwp4p5wnEW7yRQRg7cvmsdg9gimL2tHzBwufDYbZZ-Q4pVwFw6nOWhLfnvHOsd5vUm-J39Fmc2vBDBKFcOz2k/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 ialah memunculkan tombol share media umum tersebut di blog dengan cara cari arahan berikut <data:post.body/>, biasanya arahan tersebut terdapat lebih dari satu silahkan pilih arahan yang terakhir kemudian copy arahan CSS dibawah ini dan paste dibawah arahan 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 arahan yang ada pada langkah no 5 dibawah arahan "<data:post.body/>" yang lain. Sekain yang sanggup saya bagikan dan Good luck!