 |
| Blogger CSS3 Hareketli Dikey Menü Yapımı |
Blogger Dersleri kuşağında üst menü kullanımında pekte hoşnut olmayanlar için hareketli bir yan menü örneğini paylaşacağım. Üzerine fare imleci ile gelince hareketlenen menü sağ tarafa sabitlenmiş. Menü başlık uzunluklarına göre otomatik olarak buton görünümü değişmekte.
Blogger İçin CSS3 Hareketli Dikey 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.
ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background:white;/* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}
ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background:#35BEFF; /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: #0B55F1;
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent white; /* change black to match the background color of the menu UL */
}
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.<ul class="svertical">
<li><a href="http://www.bloggerdersleri.com/">Blogger Dersleri</a></li>
<li><a href="http://www.bloggerdersleri.com/">Blogger Eklentileri</a></li>
<li><a href="http://www.bloggerdersleri.com/">Blogger Seo Çalışmaları</a></li>
<li><a href="http://www.bloggerdersleri.com/">Blogger Tema</a></li>
<li><a href="http://www.bloggerdersleri.com/">Blogger</a></li>
<li><a href="http://www.bloggerdersleri.com/">İletişim</a></li>
</ul>
- Menü başlıklarını uygun gördüğünüz linkler ile eşleştirmeniz yeterlidir.
Yorum Gönder