Yandan Açılır Menü ( Blogger )

ads

ads

Açılır Menü Yapımı - Blogger Dersleri

Bu dersimizde blogger kullanıcıları için yandan  açılır menü eklemesini   yapacağız..


Yandan açılır menü daha  önceki menülerden  farkı  ziyaretçinin siteye girdiğinde mause ile  üstüne geldiğinde   sol tarafa doğru açılır şekilde düzenlenmiştir.  sitenize güzellik katacak farklı bir menü kodunu uygulamaya başlayalım. Kumanda paneli  Şablon + HTML'yi düzenle seçeneğinden Ctrl + F yardımı ile aşağıdaki kodu bulunuz.

]]></b:skin>

 Kodu bulduysanız bulduğunuz kodun üst kısmına gelecek şekilde aşağıdaki kodları ekleyiniz.


/* Blogger Yandan Açılır Menü Eklentisi ibrahimfirat.net */ ul.nav8 { list-style:none; height:120px; margin:0; padding:0; } ul.nav8 table { border-collapse:collapse; width:0; height:0; margin:-1px 0 -5px -1px; } ul.nav8 > li { float:right; height:120px; width:40px; position:relative; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; } * html ul.nav8 > li { width:auto; } ul.nav8 > li a.ie6 { float:left; height:120px; width:39px; position:relative; overflow:hidden; } ul.sub { list-style:none; height:120px; width:600px; background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top; position:absolute; left:0; top:0; margin:0; padding:0; } ul.sub li { float:left; } ul.sub li:first-child { margin-left:45px; } ul.sub li a { display:block; width:110px; height:120px; float:left; overflow:hidden; position:relative; text-decoration:none; color:#000; } ul.sub li a b { font-size:14px; display:block; padding:15px 15px 5px; } ul.sub li a b:hover { font-size:16px; color:#FF0000; display:block; padding:15px 15px 5px; } ul.sub li a p { font-size:12px; display:block; margin:0; padding:0 10px; } ul.sub li a p:hover { font-size:13px; display:block; margin:0; padding:0 10px; } ul.nav8 > li:hover { width:600px; } ul.nav8 > li a.ie6:hover { direction:ltr; width:600px; } ul.sub li a:hover i { opacity:1.0; }

Bütün işlemleri doğru yaptıysanız  şablonunuzu kaydedin ve   yerleşim kısmına gelin  Gadget ekleme kısmından aşağıda verdiğim HMTL kodlarına ekleyin ve   açılır menünüz hazır gelsin..

<ul class="nav8"> <li> <!--[if lte IE 6]><a class="ie6" href="#url"><table> <tr><td><![endif]--> <ul class="sub"> <li><a href="http://ibrahimfirat.net/"><b>Ana Sayfa</b> bilgi yazısı<br /> <i></i></a></li> <li><a href="http://ibrahimfirat.net/"><b>Link 1</b>yazı yazılcak<br /> <i></i></a></li> <li><a href="http://ibrahimfirat.net/"><b>Link 2</b>yazı yazılıcak<br /> <i></i></a></li> <li><a href="http://ibrahimfirat.net/"><b>Link 3</b>yazı yazılıcak<br /> <i></i></a></li> <li><a href="http://ibrahimfirat.net/"><b>Link 4</b>yazı yazılıcak<br /> <i></i></a></li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul>

Demosuna bakmak için  Videoyu İzle

ads