Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial ialah sebuah media online yg sangat terkenal dimana penggunanya sanggup berinteraksi dengan pengguna jejaring lain. serta pengguna dengan gampang berpartisipasi, berbagi, serta membuat informasu mencakup blog, jejaring sosial, wiki, lembaga serta dunia virtual lainnya. media umum sendiri kini menso keperluan khusus yg harus dilakukan bagi sebagian orang, bagaimana tidak hampir semua lapisan masyarakat mempunyai media untuk melaksanakan medsos ibarat smartphone serta komputer/laptop.
Baca: Cara Buat Tombol Share di Blog ala EVO Magz
Karena banyaknya orang yg memakai media umum membuat pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara menempatkan share media umum di blog mereka, hal ini tidak lain ialah cara sempurna meningkatkan visitor blog. sebagai rujukan jika anda pengunjung yg membagikan artikel ke media umum mereka secara otomatis pengguna akun lain yg tertarik dengan artikel tersebut pastinya akan mengklik tautan tersebut yg sangat bermanfaat mendatangkan perhiasan visitor blog.
Nah untuk itu jangan hingga tidak menempatkan sahre media umum di blog anda alasannya tidak cuman akan menambah visitor namun pun akan membuat blog semakin professional dengan share media sosial. namun kebanyakan menempatkan share media umum di blog membuat loading blog menso usang alias tidak responsive. serta untuk itu saya disini akan membagikan cara menempatkan media umum di blog Responsive. untuk tutorial pemasanganya sanggup dilihat dibawah ini.
Cara Memasang Share Media Sosial Responsive di Blog
1. Pertama yg niscaya anda harus masuk ke Blogger.
2. Kemudian masuk ke sajian Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy isyarat 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/AVvXsEhWMnbNYqiWFfO_bxwYKvZB4pdXb8G-pokiV-bCHjKhfSIDewCMMB2h1rPd5l0ntn4NXjKxrIInkpfE_JIcV-0mkU5AtW41zeMOe_vv9hrX3a82OJQHpxzkRmKvRfsPLcEXGI6EQ-xGt9E/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 isyarat berikut <data:post.body/>, biasanya isyarat tersebut terdapat lebih dari satu silahkan pilih isyarat yg terakhir kemudian copy isyarat CSS dibawah ini serta paste dibawah isyarat tersebut.
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='article-share-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://plus.google.com/share?url=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='article-share-gp-label' expr:href='"https://plus.google.com/share?url=" + 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='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='padding-top:12px;'/>
</div>
</div>
6. Terakhir tinggal simpan template serta lihat hasilnya.
Bila tombol share tidak muncul silahkan paste isyarat yg ada pada langkah no 5 dibawah isyarat "<data:post.body/>" yg lain. Sekain yg sanggup saya bagikan serta Good luck!