 |
| Blogger İçin Asimetrik Genişleyen Menü Butonları |
Blogger tabanlı yayın yapan site sahiplerinin bir çok konuda ki daimi yardımcısı CSS kodlama sistemi. Blogger derslerinde çok sık yer verdiğimiz CSS kodları ile oldukça zorlu olan bir çok sorguyu çok kısa kod dizinleri ile gerçekleştirebiliyoruz. Hareketli ve asimetrik buton tarzı menüler oluşturmak için düşünülmüş Genişleyen Menü Butonları ile bloglarınıza biraz olsun hareket getirebilirsiniz.
Blogger Asimetrik Genişleyen Buton Menü Kodları
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen üzerine aşağıda ki kodları ekliyoruz.
.tg-title
{
margin: 4px;
font-size: 1.2em;
letter-spacing: 1px;
width: 980px;
}
.tg-Label
{
display: inline-block;
width: 6em;
float: left;
padding: 8px;
}
.atitle
{
display: inline-block;
width: 7em;
margin-left:10px;
float: left;
padding: 8px;
background-color: #eee;
opacity: 0.75;
border-radius: 4px;
border: 1px solid #d49090;
border-color: rgba(123,2,2,0.1);
-webkit-transition: -webkit-transform 0.5s ease-out, background-color 1s ease-in;
-moz-transition: -moz-transform 0.5s ease-out, background-color 1s ease-in; -o-transition: -o-transform 0.5s
ease-out, background-color 1s ease-in;
}
.atitle:hover
{ -webkit-transform: rotate(6deg) scale(1.2); background-color: rgba(241, 43, 61, 0.7);
-moz-transform: rotate(2deg) scale(1.2); -o-transform: rotate(2deg) scale(1.2);
border-color: #d49999;
}
.atitle:nth-child(even):hover { -webkit-transform: rotate(-6deg) scale(1.2); -moz-transform: rotate(-2deg) scale(1.2);
-o-transform: rotate(-2deg) scale(1.2);
}
.atitle a:link { text-decoration: none; }
.atitle a:hover { text-decoration: none; } scale(1.2);
}
3 ) CSS kodlarımızı ekledikten sonra buton menüleri kullanmak istediğiniz yere aşşağıdaki kodları ekleyin. Gadget ekle seçeneği ile yada yayınlar içinde HTML bölümüne ekleyerek kullanabilirsiniz.
<div class="tg-title"> <!-- <div class="tg-Label">Blogger Dersleri</div> --> <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ1</a></div> <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ2</a></div> <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ3</a></div> <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ4</a></div> <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ5</a></div> </div>
Asimetrik Genişleyen Menü Butonları Modifiye
- Kırmızı ile yazılmış olan link, atanmış menü başlığının link adresidir.
- Mavi alan görünecek olan buton adı.
- '' <div class="atitle"><a href="http:/www.bloggerdersleri.com">MENÜ</a></div> '' Ana menü kodudur. Menü sayısını artırmak isterseniz </div> kodu öncesine ekleyin.
Yorum Gönder