Media Sosial mengambil bagian penting dari bisnis online kamu untuk menjangkau lebih banyak pelanggan. Tombol media sosial sangat berguna untuk setiap website dan membantu pelanggan untuk mendapatkan update dari situs web. Dan juga, tombol media sosial Sticky pasti meningkatkan pengikut media sosial dari situs kamu dan membantu untuk mengarahkan lalu lintas ke situs Web kamu. Dalam tutorial ini, kita akan membuat tombol Media Sosial Sticky yang mengambang di sidebar hanya dengan CSS tanpa mempengaruhi desain website.
Kamu dapat menemukan banyak plugin jQuery untuk sidebar yang mengambang, tetapi dapat mempengaruhi kecepatan dan desain situs kamu. Untuk mengatasi masalah ini, saya akan memberikan kode CSS sederhana untuk menambahkan animasi bar sosial Sticky di sisi kiri / kanan website kamu.
Dalam contoh kode ini, saya akan menerapkan tombol share media sosial di sisi kanan dengan CSS murni, maksudnya hanya dengan CSS. Di bar sosial ini, beberapa link media sosial yang paling populer akan dimasukkan seperti Facebook, Twitter, Google+, LinkedIn, YouTube, dan Pinterest.
Kode HTML
Letakkan kode HTML berikut di dalam tag <body>, dan tambahkan link profil media sosial kamu dengan ikon sosial masing-masing.
<div class="container">
<div class="sticky-container">
<ul class="sticky">
<li>
<img src="ikon/facebook-circle.png" width="32" height="32">
<p><a href="https://www.facebook.com/codingan" target="_blank">Sukai kami di<br>Facebook</a></p>
</li>
<li>
<img src="ikon/twitter-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Ikuti kami di<br>Twitter</a></p>
</li>
<li>
<img src="ikon/gplus-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Ikuti kami di<br>Google+</a></p>
</li>
<li>
<img src="ikon/linkedin-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Ikuti kami di<br>LinkedIn</a></p>
</li>
<li>
<img src="ikon/youtube-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Berlangganan di kanal<br>YouTube kami</a></p>
</li>
<li>
<img src="ikon/pin-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Ikuti kami di<br>Pinterest</a></p>
</li>
</ul>
</div>
</div>
Kode CSS
Kode CSS pendek berikut ini cukup untuk menerapkan Ikon Sosial bar Sticky ke website kamu. Tempatkan CSS ini dalam tag <head>.
<style>
.container{background-color: #DD4814;width: 100%;height: 100%;}
/* Ikon media sosial */
.sticky-container{ padding:0px; margin:0px; position:fixed; right:-130px;top:230px; width:210px; z-index: 1100;}
.sticky li{list-style-type:none;background-color:#fff;color:#efefef;height:43px;padding:0px;margin:0px 0px 1px 0px; -webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; cursor:pointer;}
.sticky li:hover{margin-left:-115px;}
.sticky li img{float:left;margin:5px 4px;margin-right:5px;}
.sticky li p{padding-top:5px;margin:0px;line-height:16px; font-size:11px;}
.sticky li p a{ text-decoration:none; color:#2C3539;}
.sticky li p a:hover{text-decoration:underline;}
</style>
Kesimpulan
Di sini saya tlah menambahkan hanya beberapa ikon media sosial yang paling populer ke sosial bar Sticky. Kamu bisa menambahkan ikon media sosial yang lainnya atau link yang berguna berdasarkan kebutuhan kamu.
