Blogunuza harika açılır menü ekleyin

selam blog arkadaslarim nasilsiniz :)

bugun sizlere cok guzel bir menunun kodunu paylasacagim...

bu menu blogunuzun sol tarafinda sabit bi sekilde duracak  1 2 3 4 5 rakamlari ve mausla uzerine geldiginiz zaman menu genisleyecek yani acilacak ve menude koymus oldugunuz sayfa veya konu basliklari gorunecektir... cok sade ve kullanisli bir menudur eminim ki sizinde hosunuza gidicektir..

menu'nun önizlemesini görmek için TIKLA

menuyu blogunuza eklemeniz icin yapmaniz gerekenleri anlatayim simdi.

once blogunuzun paneline girip sablon butonuna tiliyoruz tikladiktan sonra acilan sayfada html'yi duzenle butonuna tikliyoruz ondan sonra altaki  kodu aratiyoruz

]]></b:skin>

kodu bulduktan sonra bulgugumuz kodun hemen uzerine altaki kodu ekliyoruz..

.menu {text-shadow:none;position: fixed;height: 100%;width: 65px;background: #00a7ef;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 220px;}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #6cb4f7;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}

bu islem tamamlandiktan sonra geldi ikinci kodu eklemeye ikinci kodu eklemek icin oncelikle yine html duzenle yerinden altaki kodu aratiyoruz

</body>

usteki bu kodu bulduktan sonra hemen uzerine gelicek sekilde altaki kodu ekliyoruz...

<div class="menu">
<div class="menuItem satu">1<span><a href="#">Başlık</a></span></div>
<div class="menuItem dua">2<span><a href="#">Başlık </a></span></div>
<div class="menuItem tiga">3<span><a href="#">Başlık</a></span></div>
<div class="menuItem empat">4<span><a href="#">Başlık</a></span></div>
<div class="menuItem lima">5<span><a href="#">Başlık</a></span></div>


</div>

simdi arkadaslar ikinci kodu goruyorsunuz orda baslik yaziyor baslik yazan yerlerde siz kendi sayfanizin basligini yada konunuzun basligini ekleyeceksiniz baslik yazisinin sol tarafindaki ( # ) isaretin yerine ise ekleyeceginiz sayfanin yada konunun linkini koyacaksiniz

menu'nun önizlemesini görmek için TIKLA