Yazar: 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.
