Kapat

css kullanarak sitemize nasıl sosyal butonlar ekleyebiliriz.

elbette bu mümkündür arkadaşlar oldukçada kolaydır. şimdi ben sadece sol tarafa ekleyebileceğiniz bir örnek yazayım siz sonra bunu kendinize göre düzenleyebilirsiniz.

öncelikle <div> tanımlamalarımızı yapıyoruz ve gerekli kodlarımızı yazıyoruz.

ardından ise css kodlarımızı ekleyim kodlama işlemini bitiiriyoruz.

 

Kod:
<div align="center" id="feedback">

<a title="facebook" href="http://www.facebook-site-adresi" target="_blank">
<div class="facebook-left" title="facebook">
</div>
</a>
<div class="clear">
</div>
<div class="line-shadow">
</div>
<a title="twitter" href="https://twitter-site-adresiniz" target="_blank">
<div class="twitter-left" title="twitter">
</div>
</a>
<div class="clear">
</div>
<div class="line-shadow">
</div>
<a title="google+" href="http://www.gplus-site-adresiniz.html" target="_blank">
<div class="google-left" title="google+">
</div>
</a>
<div class="clear">
</div>
<div class="line-shadow">
</div>
<a title="rss" href="http://rss-site-adresiniz.html" target="_blank">
<div class="rss-left" title="rss">
</div>
</a>
</div>
not: kırmızı ile belirtilen yerlere kendin sitenizi eklemeyi unutmayın.

aşağıdaki kodlar ise css kodlarıdır bu kodlarıda ekleyin.

Kod:
#feedback {
background: none repeat scroll 0 0 #FBFBFB;
background-attachment: scroll;
background-repeat: repeat;
position: fixed;
left: 20px;
top:225px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 30px #f1f1f1;
border: 1px #CCCCCC solid;
box-shadow: 0 0 5px #CDCDCD;
padding:10px;
z-index:9;

}

.facebook-left {
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-0-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: url(resimler/facebook-left.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
width: 31px;
height: 26px;
float: left;
cursor:pointer;
}
.facebook-left:hover {
background-position: 0 -26px;

}

.twitter-left {
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-0-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: url(resimler/twitter-left.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
width: 31px;
height: 23px;
float: left;
cursor:pointer;
}
.twitter-left:hover {
background-position: 0 -23px;
}

.dribble-left {
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-0-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: url(resimler/dribble-left.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
width: 31px;
height: 26px;
float: left;
cursor:pointer;

}
.dribble-left:hover {
background-position: 0 -26px;
}

.google-left {
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-0-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: url(resimler/google-left.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
width: 31px;
height: 27px;
float: left;
cursor:pointer;

}
.google-left:hover {
background-position: 0 -27px;
}

.rss-left
{
-moz-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-0-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background: url(resimler/rss-left.png) no-repeat 0 0;
display: block;
text-indent: -9999px;
width: 31px;
height: 22px;
float: left;
cursor:pointer;

}
.rss-left:hover {
background-position: 0 -22px;
}

.line-shadow {
width:31px;
height:30px;
margin: 10px 0 0 0;
}

.banner-button {
width:448px;
cursor: pointer;
height: 50px;
text-align: center;
font-size: 24px;
font-weight: bold;
line-height: 47px;
color: #fff;
text-shadow: 0px 1px 0px rgba(0, 0, 0, .2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .3);
transition: all 0.2s ease-in-out 0s;

}
.banner-button:active {
text-shadow: 0px 0px 20px #000000;
line-height: 48px;
}

.banner-button:hover {
text-shadow: 0px 0px 20px #deff00;
transition: all 0.2s ease-in-out 0s;
}
.banner-button.green4 {
background: -webkit-linear-gradient(top, rgba(153, 191, 77, 1) 0%, rgba(134, 169, 63, 1) 50%, rgba(114, 148, 48, 1) 95%, rgba(88, 114, 36, 1) 100%);
background: -moz-linear-gradient(top, rgba(153, 191, 77, 1) 0%, rgba(134, 169, 63, 1) 50%, rgba(114, 148, 48, 1) 95%, rgba(88, 114, 36, 1) 100%);
background: -o-linear-gradient(top, rgba(153, 191, 77, 1) 0%, rgba(134, 169, 63, 1) 50%, rgba(114, 148, 48, 1) 95%, rgba(88, 114, 36, 1) 100%);
background: -ms-linear-gradient(top, rgba(153, 191, 77, 1) 0%, rgba(134, 169, 63, 1) 50%, rgba(114, 148, 48, 1) 95%, rgba(88, 114, 36, 1) 100%);
background: linear-gradient(top, rgba(153, 191, 77, 1) 0%, rgba(134, 169, 63, 1) 50%, rgba(114, 148, 48, 1) 95%, rgba(88, 114, 36, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad44f', endColorstr='#609d29', GradientType=0 );
border: 1px solid #5b8821;

}

resimler kısmına ise seçtiğiniz resimleri ftp aracılığı ile yükleyin.

Bir önceki yazımız olan css form örneği başlıklı makalemizde css, css form ve css form tasarımı hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat