Membuat & Memasang Sosial Media Share di Gambar Blog

Pernah melihat tampilan gambar blog yang jika disorot dengan mouse akan muncul icon sosial media dari gambar blog tersebut? Tentu pernah dong,, Dan jika sobat tertarik untuk memasangnya maka saya akan menjelaskannya bagaimana cara membuat dan memasang sosial media share di gambar blog tersebut

Dengan adanya sosial media share di gambar blog tersebut, selain menambah tampilan blog lebih keren dan bagus, kemungkinan juga akan menjadi daya tarik bagi pengunjung untuk membagikannya ke sosial media mereka. Apalagi jika gambar yang ditampilkan unik, maka kemungkinannya semakin besar untuk di share ke sosial media

Dalam membuat sosial media share ini, kita tidak perlu menggunakan script tapi cukup dengan menggunakan kode CSS. Sehingga dengan hanya menggunakan CSS, blog tidak terlalu berlebihan dengan kode script seperti yang terdapat pada blog saya ini, over script!
Karena hanya menggunakan kode css maka untuk pembahasan kali ini saya hanya bisa menjelaskan pada tahap pembuatannya saja serta tampilan yang diterapkan juga dilakukan secara manual yang terpasang pada gambar blog

Untuk menampilkan secara otomatis pada semua gambar blog, terus terang saya masih belum bisa karena untuk menampilkannya secara otomatis diperlukan kode script dan saya hanya bisa membuat kode cssnya saja,, hehee

Namun, jika sobat hanya ingin menampilkannya di bagian thumbnail gambar blog yaitu di halaman depan bukan di halaman artikel, maka dengan menggunakan trik khusus, sobat bisa menampilkannya secara otomatis di semua thumbnail gambar. Caranya bagaimana? Maaf saya hanya bisa menjelaskan pada tahap cara membuat dan memasang sosial media ini pada gambar blog saja

Cara Membuat & Memasang Sosial Media Share di Gambar Blog

Sebelum membuat dan memasang sosial media di gambar blog, dan agar lebih jelas seperti apa tampilannya maka kita lihat dulu demonya langsung seperti berikut ini. silahkan soror gambar berikut ini..

CSS

.img-sosmed {border: 3px solid #FFFFFF;-webkit-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);display: block;overflow: hidden;position: relative;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.img-sosmed-bg{border: medium none;display: inline-block !important;float: none !important;font-size: 14px;font-weight: normal;height: 40px;line-height: 40px;margin: 0 2px;text-align: center;width: 40px;-webkit-border-radius: 250px 250px 250px;border-radius: 250px 250px 250px;}
.img-sosmed-bg > a {color: #ffffff;display: block;font-weight: normal;}
.img-sosmed .img-sosmed-over {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);bottom: 0;display: block;height: 100%;left: 0;opacity: 0;position: absolute;right: 0;top: 0;-webkit-transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-o-transition: all 0.2s ease 0s;transition: all 0.2s ease 0s;width: 100%;}
.img-sosmed:hover {opacity: 1;}
.img-sosmed .img-sosmed-style span {position: absolute;}
.img-sosmed .img-sosmed-style span:nth-of-type(1) {bottom: 50%;top: 50%;left: 0;margin: -20px 0 0 -68px;visibility: hidden;opacity: 0;-webkit-transition: all 400ms cubic-bezier(1.000, 0, 0.570, 0) !important;-webkit-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;-moz-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;-o-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;}
.img-sosmed .img-sosmed-style span:nth-of-type(2) {bottom: 50%;top: 50%;left: 50%;right: 50%;margin: -20px 0 0 -20px;visibility: hidden;opacity: 0;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.img-sosmed .img-sosmed-style span:nth-of-type(3) {bottom: 50%;top: 50%;right: 0;margin: -20px -68px 0 0;visibility: hidden;opacity: 0;-webkit-transition: all 400ms cubic-bezier(1.000, 0, 0.570, 0) !important;-webkit-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;-moz-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;-o-transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;transition: all 400ms cubic-bezier(1.000, -0.360, 0.570, -0.150)!important;}
.img-sosmed:hover .img-sosmed-style span:nth-of-type(1) {left: 50%;visibility: visible;opacity: 1;}
.img-sosmed:hover .img-sosmed-style span:nth-of-type(2) {visibility: visible;opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.img-sosmed:hover .img-sosmed-style span:nth-of-type(3) {right: 50%;visibility: visible;opacity: 1;}
.img-responsive{display:block;height:auto;max-width:100%}

HTML
Untuk icon sosial saya menggunakan font awesome

<div class="img-sosmed">
<img class="img-responsive" src="ganti-dengan-link-gambar"/>
<div class="img-sosmed-style">
<span class="img-sosmed-bg"><a href=""><i class="icon-google-plus-sign icon-4x"></i></a>
</span>
<span class="img-sosmed-bg"><a href=""><i class="icon-facebook-sign icon-4x"></i></a>
</span>
<span class="img-sosmed-bg"><a href=""><i class="icon-twitter-sign icon-4x"></i></a>
</span>
</div>
</div>

Bagaimana mudah bukan? Agar muncul secara otomatis di setiap gambar blog, silahkan di edit sendiri dan pergunakan script jika memang dibutuhkan. Saya hanya sebatas memberikan cara dasarnya saja :) Dan terimakasih telah membaca artikel ini, Membuat & Memasang Sosial Media Share di Gambar Blog