İçerikler
Bu eğitimde, CSS ile sosyal medya butonlarının nasıl hazırlandığından bahsedeceğim. Hazırlayacağımız sosyal medya butonları, sayfanın belirli bir yanına yapışık olan ve mouse ile üstüne geldiğinizde detaylar sunan bir örnek olacak. Bu tarz işlevsel alanlar genellikle jQuery eklentileri ile hazırlanmaktadır. Fakat bu eklentiler sitenin yavaşlamasına yada karmaşaya yol açabilir. Bundan dolayı da bu tarz işlemleri CSS ile gerçekleştirmek en doğrusu olacaktır.
Hazırlayacağımız örnekte, sayfanın sağ tarayında sabir bir şekilde duran ve mouse ile üstüne gelindiğinde, takip et gibi mesajın yer aldığı bir uygulama geliştirelim. Bu örneği CSS ve HTML kullanarak gerçekleştireceğiz.
HTML Kodları
İlk olarak HTML bölümü oluşturuyoruz. Bu bölümde eklemek istediğimiz sosyal medya hesaplarını iconları ile hazırlıyoruz. Ayrıca mouse ile üstüne gelindiğinde bir yazı görünmesi içinde ilgili alanı oluşturuyoruz.
<div class="sticky-container">
<ul class="sticky">
<li>
<img src="images/facebook-circle.png" width="32" height="32">
<p><a href="https://www.facebook.com/ibrahimcevruk" target="_blank">Takip Et<br>Teşekkürler</a></p>
</li>
<li>
<img src="images/twitter-circle.png" width="32" height="32">
<p><a href="https://twitter.com/ibrahimcevruk" target="_blank">Takip Et<br>Teşekkürler</a></p>
</li>
<li>
<img src="images/youtube-circle.png" width="32" height="32">
<p><a href="http://www.youtube.com/ibrahimcevrukcom" target="_blank">Abone Ol<br>Teşekkürler</a></p>
</li>
</ul>
</div>
Hazırladığımız bu HTML yapısını CSS ile düzenleyerek hoş görünüme sabit bir sosyal medya takip alanı oluşturalım.
CSS Kodları
Bu bölümde de HTML alanı için gerekli düzenlemeyi gerçekleştireceğiz. Sosyal medya ikonlarını sayfanın sağına sabitleyip, mouse ile üzerine gelindiğinde açılmasını sağlayacağız.
<style>
/* Sağ bölüe sabitliyoruz. */
.sticky-container{
padding:0px;
margin:0px;
position:fixed;
right:-130px;
top:230px;
width:210px;
z-index: 1100;
}
/* Listeyi biçimlendirdik. */
.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;
}
/* Mouse ile üzerine gelindiğinde sola kaymasını sağladık */
.sticky li:hover{
margin-left:-115px;
}
/* Görselleri konumlandırdık */
.sticky li img{
float:left;
margin:5px 4px;
margin-right:5px;
}
/* Yazıyı konumlandırdık */
.sticky li p{
padding-top:5px;
margin:0px;
line-height:16px;
font-size:11px;
}
/* Linki düzenliyoruz */
.sticky li p a{
text-decoration:none;
color:#2C3539;
}
/* Linkin üstüne gelince, yazının atını çizdik. */
.sticky li p a:hover{
text-decoration:underline;
}
</style>
Yukarıdaki kodlarla birlikte sosyal medya hesaplarının takip edilmesi için güzel bir uygulama hazırlamış olduk. CSS ve HTML kodlarında değişiklikler yaparak farklı sonuçlar elde edebilirsiniz. Yada bu uygulamayı farklı amaçlarla da kullanabilirsiniz.
Örnekte yer alan dosyaları da aşağıdaki yandex linki üzerinden indirebilirsiniz.
