Gri Buton!
-------------------------------------------------------------
Gri Buton
Yazılarınızdaki linkleri butonlar sayesinde tıklanabilir hale getirebilirsiniz. İşte size bir buton örneği ve kodları.

CSS Kodu
/* Butonun Genel Ayarları - destek-şehri.tr.gg */
.buttongonez {
font:15px Helvetica, Arial, sans-serif;
line-height:18px;
padding: 8px 14px 6px;
display: block;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: solid 1px #c0c3c5;
background-color:#f3f5f7;
background-image: -webkit-linear-gradient(bottom, #dfe3e6, #fff);
background-image: -moz-linear-gradient(bottom, #dfe3e6, #fff);
background-image: -o-linear-gradient(bottom, #dfe3e6, #fff);
background-image: -ms-linear-gradient(bottom, #dfe3e6, #fff);
background-image: linear-gradient(to top, #dfe3e6, #fff);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfe3e6',GradientType=0 );
font-size: 13px;
font-weight: bold;
color: #626363;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5);
text-align:center;
width:140px;
margin:0 auto;


}
/* Butonun üzerine gelince - gonez.tr.gg */ (hover)
.buttongonez:hover {
color: #787b7d;
background-image: -webkit-linear-gradient(bottom, #e6eaec, #fff);
background-image: -moz-linear-gradient(bottom, #e6eaec, #fff);
background-image: -o-linear-gradient(bottom, #e6eaec, #fff);
background-image: -ms-linear-gradient(bottom, #e6eaec, #fff);
background-image: linear-gradient(to top, #e6eaec, #fff);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6eaec',GradientType=0 );
}
/* Butona tıklanınca - gonez.tr.gg */ (active)
.buttongonez:active {
border: solid 1px #aab2b6;
background-image: -webkit-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
background-image: -moz-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
background-image: -o-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
background-image: -ms-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
background-image: linear-gradient(to top, #f1f4f6, #cfd4d7 100%);
}

Html Kodu
<div class="buttongonez">Önizleme destek-şehri.tr.gg</div>

Önizleme
(Daha Koyulmadı)
 

Üst Çubuk!
-------------------------------------------------------------
Üst Çubuk
Toolbar veya üst çubuk olarak adlandırılan bu kısa linkler sitemizin google index'in daha ön sıralarda gözükmesini sağlar.Sağlamaklada yetinmez düzensiz olan sitelerde gezinmenizi kolaylaştırır.Bedava-sitemde olmasa da diğer Wordpress gibi hostlarda arama kutularıda eklenebiliyor....

CSS Kısmına

#toolbar { background-image: url(https://img.webme.com/pic/h/hibycocuk/bctop.png);
border-style: none; margin:0px; font-size:11px;
font-family: Trebuchet MS, Arial, Verdana;
top: 0px; margin-bottom:0px;
padding:0px; z-index:1; height: 30px;
left: 0px; position: fixed; right: 0px;
color: #fff; width: 100%; }
.sehribarsol { float: left; margin: 4px; }
.sehribarorta { float: center; margin: 4px; }
.sehribarsag { float: right; margin: 4px; }

Tasarımın Üstüne

<div id="toolbar">
<div class="sehribarsol">Buraya Yazı</div>
<div class="sehribarsag">Buraya Yazı</div>
<div class="sehribarorta">Buraya Yazı</div>
</div>

Önizleme
http://i.hizliresim.com/Kr4rAm.png