.

20 Mar 2012

Blogger Acilir Menu Eklentisi ( Drop Down )


Blogger Drop Down Acilir Menü Eklentisi

Bu eklentimizle , blogunuzda açılır bir menüye sahip olacaksınız , Blogunuzda hoş bir menü isterseniz bu eklenti işinize yarayabilir.

Resimden ön izlemesini yapabilir yada bu konunun altından Drop Down Acilir Menü Eklentisi'nin demosunu görebilirsiniz..

Aşağıdaki kodu blogunuza , yerleşim >> gadget ekle >> HTML/JavaScript olarak kaydedin , Bu gadgeti sayfanın üstüne ekleyin , yada en azından konu üstündeki gadget yerine..
<script src='http://yourjavascript.com/102231914611/dropdown.js' type='text/javascript'></script>  <style>  /* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/  font: normal 13px Verdana;  margin: 0;  padding: 0;  position: absolute;  left: 0;  top: 0;  list-style-type: none;  background: white;  border: 1px solid black;  border-bottom-width: 0;  visibility: hidden;  z-index: 100;  }
.ddsubmenustyle ul{  margin: 0;  padding: 0;  position: absolute;  left: 0;  top: 0;  list-style-type: none;  border: 0px none;  }
.ddsubmenustyle li a{  display: block;  width: 170px; /*width of menu (not including side paddings)*/  color: black;  background-color: lightyellow;  text-decoration: none;  padding: 4px 5px;  border-bottom: 1px solid black;  }
* html .ddsubmenustyle li{ /*IE6 CSS hack*/  display: inline-block;  width: 170px; /*width of menu (include side paddings of LI A*/  }
.ddsubmenustyle li a:hover{  background-color: black;  color: white;  }
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/  padding-left: 4px;  border: 0;  }
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/  position: absolute;  padding-top: 3px;  left: 100px;  border: 0;  }
.ddiframeshim{  position: absolute;  z-index: 500;  background: transparent;  border-width: 0;  width: 0;  height: 0;  display: block;  }
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{  margin: 0;  padding: 0;  font: bold 12px Verdana;  list-style-type: none;  border-bottom: 1px solid gray;  background: #414141; overflow: hidden;  width: 100%;  }
.mattblackmenu li{  display: inline;  margin: 0;  }
.mattblackmenu li a{  float: left;  display: block;  text-decoration: none;  margin: 0;  padding: 6px 8px; /*padding inside each tab*/  border-right: 1px solid white; /*right divider between tabs*/  color: white;  background: #414141;  }
.mattblackmenu li a:visited{  color: white;  }
.mattblackmenu li a:hover{  background: black; /*background of tabs for hover state */  }
.mattblackmenu a.selected{  background: black; /*background of tab with "selected" class assigned to its LI */  }
</style>

<div id="ddtopmenubar" class="mattblackmenu">  <ul>  <li><a href="#">LINK1</a></li>  <li><a href="#" rel="ddsubmenu1">LINK2</a></li>  <li><a href="#" rel="ddsubmenu2">LINK3</a></li>  <li><a href="#">Link4</a></li>  <li><a href="#" rel="ddsubmenu3">LINK5</a></li>  </ul>  </div>
<script type="text/javascript">  ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")  </script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>  <li><a href='#'>LINK2 ITEM 1</a></li>  <li><a href='#'>LINK2 ITEM 2</a>    <ul>    <li><a href='#'>LINK2 ITEM 2.1</a></li>    <li><a href='#'>LINK2 ITEM 2.2</a></li>    </ul>
</li>  <li><a href='#'>LINK2 ITEM 3</a>    <ul>    <li><a href='#'>LINK2 ITEM 3.1</a></li>      </ul>
</li>  <li><a href='#'>LINK2 ITEM 4</a></li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>  <li><a href='#'>LINK3 ITEM 1</a></li>  <li><a href='#'>LINK3 ITEM 2</a></li>  <li><a href='#'>LINK3 ITEM 3</a>    <ul>    <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>    <li><a href='#'>LINK3 ITEM 3.3</a></li>    <li><a href='#'>LINK3 ITEM 3.4</a></li>    </ul>  </li>  <li><a href='#'>LINK3 ITEM 4</a></li>  <li><a href='#'>LINK3 ITEM 5</a>    <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li>    <li><a href='#'>LINK3 ITEM 5.2</a>      <ul>      <li><a href='#'>LINK3 ITEM 5.2 1</a></li>      <li><a href='#'>LINK3 ITEM 5.2 2</a></li>      <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul>    </li>      </ul>  </li>  <li><a href='#'>LINK3 ITEM 6</a></li>  </ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>  <li><a href='#'>LINK5 ITEM 1</a></li>  <li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>  <li><a href='#'>LINK5 ITEM 4</a></li>  <li><a href='#'>LINK5 ITEM 5</a></li>  </ul>
Yukarıdaki renkli ve kalın olarak yazılmış yerleri, size uygun şekilde düzenleyerek özelleştirebilirsiniz..yada istemediğiniz yerkeri silerek kaldırabilirsiniz..Demosu için TIKLAYIN..

Eklentileri.blogspot.com Hakkında.


Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..

6 yorum:

Fırat Yalçın dedi ki...

bunu uygulayıp tüm sayfaları kaldırmak istiyorum fakat sayfaların bir kaçı kendi içeriklerine sahipler. mesela http://www.firatyalcin.com/p/misafir-yazarlk.html

..

Diyelim ben bu anlattığınız menüyü uyguladım. Menüdeki linklerden biri misafir yazarlık. bunun hedefinin "http://www.firatyalcin.com/p/misafir-yazarlk.html" olması gerek ama sayfaları devre dışı bıraktığım için olamayacak. Bu durumda ne önerirsiniz?

Unknown dedi ki...

Emeğine Sağlık Usta

Özge'nin Oltası dedi ki...

Merhaba, bu kodu bir süredir blogumda kullanıyordum ve çok memnundum, ancak 2 gündür açılır menü açılmıyor, normalde yanda bir kırmızı ok çıkıyordu üstüne gelince açılıyordu, şimdi ok da gitmiş, açılan menü de. Kodlarda bir değişiklik de yapmadım üstelik. Yardımcı olursanız sevinirim. Ya da önereceğiniz alternatif bir kod var mıdır?

Eklentileri.Blogspot dedi ki...

@OZGe

Merhabalar , Kodlar için bulunan , ilk satırdaki ;

http://mybloggertricks.googlecode.com/files/dropdownddlevel.js

yerine

http://yourjavascript.com/102231914611/dropdown.js

ekleyin düzelecektir..

Özge'nin Oltası dedi ki...

Çok çok teşekkür ediyorum, 2 gündür ne yapacağımı şaşırmıştım. Hızlı cevabınız için de ayrıca teşekkürler.

Eklentileri.Blogspot dedi ki...

@OZGe

ben teşekkür ederim ilginiz için , iyi günler..

Yorum Gönder

Blogger tarafından desteklenmektedir.