Bumerang - Yazarkafe

Açılır Menü-Blogger Drop-Down Menü-2



Blog yazarlarının en çok istediği, okuyucularının yazılarına kolay ve kısa yoldan ulaşabilmesini sağlamak.Siteler üzerinde yapılan araştırmalarda da en çok dikkat çeken ve tıklanma oranı en yüksek olan bölgeler sağ-sol kenar çubukları ve üst taraftaki linklerdir.Üst tarafa daha fazla sayıda link eklemek ve site içeriklerinize erişim kolaylığı için mutlaka açılır menüyü kullanmak gerekir.
Daha önceden farklı bir drop down  açılır menü örneğini sizlere sunmuştuk.Önceki açılır menü örneği daha sade ve eklemesi buna göre biraz daha zordu.Şimdiki drop-down açılır menü eklentisinde ise biraz efekt ve renk verip daha profesyonel bir görünüme kavuşturup, eklemesini daha basit hale getirip drop down açılır menüyü sizlerin kullanımına sunuyoruz.
DEMO GÖRÜNÜM
Drop down Açılır Menüyü Blogunuza Eklemek İçin:
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript  yolunu takip ediyoruz aşşağıdaki kodu kopyalayıp açılan gadgetin içine yapıştırıyoruz.
<!-- Start Drop Down Menu Code From http://www.blogokulu.blogspot.com/ --><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", 
 orientation: 'h', 
 classname: 'ddsmoothmenu', 
 
 contentsource: "markup" 
})
</script>

<style> 
.ddsmoothmenu {
    width: 100%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPaX6gWeJpw3uBm2ev9OZySxgjCgeeOUIYHz4fCrpS0A0tMAfQtgQSRmMrtK9z-V0zIm9zIK3YS23kpz0ZBB2HcSt0QVkzhuMdbvSxd8Onrawr932ZJZt1EDAQxq4zh4J2fAN-3g_bX4/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPaX6gWeJpw3uBm2ev9OZySxgjCgeeOUIYHz4fCrpS0A0tMAfQtgQSRmMrtK9z-V0zIm9zIK3YS23kpz0ZBB2HcSt0QVkzhuMdbvSxd8Onrawr932ZJZt1EDAQxq4zh4J2fAN-3g_bX4/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
} 
</style>  

<div id="smoothmenu1" class="ddsmoothmenu">
     <ul>
        <li>
            <a href="http://blogokulu.blogspot.com/">Ana Sayfa</a>
        </li>
        <li>
            <a href="#">Dosya 0</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
<li><a href='#'>Alt Dosya 1.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.1</a></li>
<li><a href='#'>Alt Dosya 1.3.2</a></li>
<li><a href='#'>Alt Dosya 1.3.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.3-1</a>
<li><a href='#'>Alt Dosya 1.3.3-2</a>
<li><a href='#'>Alt Dosya 1.3.3-3</a>
</li>
</li></li></ul>
</li>
</ul>
</li>
            </ul>
        </li>
        <li>
            <a href="#">Dosya 1</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.blogokulu.blogspot.com">Blog Okulu</a>
        </li>
        <li>
            <a href="#">Dosya 2</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.blogokulu.blogspot.com/">Sitene Ekle</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>
<!-- End Drop Down Menu Code From http://www.blogokulu.blogspot.com/ -->
Kod içerisinde kırmızı renkli yerlere linkleri, mavi renkli yerlere de menüde görünmesini istediğiniz ismi yazın.Gatgeti kaydedip başlığın altına yada blog kayıtlarının üzerine sürükleyip bırakıyoruz.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

32 yorum:

  1. http://yemekelkitabi.blogspot.com/ dediklerinizi yaptım böyle oldu nasıl düzeltebilirim

    YanıtlaSil
  2. reklam flash olduğu için menü reklamın altında kalıyor.Gadgeti reklamın bulunduğu gadgetin altına alrak problemi çözebilirsin.

    YanıtlaSil
  3. çok güzel bir paylaşım sağolun

    YanıtlaSil
  4. rica ederim, işinize yaradıysa ne mutlu bize.

    YanıtlaSil
  5. Sdfsfsfsf olarak yazdığım yorumu silermisiniz 

    YanıtlaSil
  6. İzninizle bir sorum olacak.. Yukarıda ki resimde eklediğiniz gibi 3. bir menü açılımı nasil oluyor?
    Örnek : Yukarıda ki eklediğiniz menüde "Folder 2 (Ana menü) - Folder 2.1 (Bir alt ana menü)- Folder 2.1.1 (Folder 2.1'in alt menüsü" gibi bir menü açılımı yapmak istediğimizde ne yapmamız gerekir?

    Teşekkürler..

    YanıtlaSil
  7. Bu arada bir ilave soru da doğrudan gadget'e eklediğim için menüler açılmıyor.. Html koduna girip menülerin açılması için gerekli olan css kodlarını da alabilir miyim?

    İlginiz için Teşekkürler..

    YanıtlaSil
  8. kodlar sizin istediğiniz gibi düzenlenmiştir.Dosya O ın altında bulunan Alt Dosya 1.3 ile başlayan kısım kodlara eklenmiştir.Bu kodları koyu renkle belirttim zaten.Diğer menülere de sizin belirttiğiniz gibi aşşağıda verdiğim kodları ekliyerek alt menü oluşturabilirsiniz.
    <li><a href='#'>Alt Dosya 1.3</a><ul class='children'><li><a href='#'>Alt Dosya 1.3.1</a></li><li><a href='#'>Alt Dosya 1.3.2</a></li><li><a href='#'>Alt Dosya 1.3.3</a><ul class='children'><li><a href='#'>Alt Dosya 1.3.3-1</a><li><a href='#'>Alt Dosya 1.3.3-2</a><li><a href='#'>Alt Dosya 1.3.3-3</a></li></li></li></ul></li></ul></li>

    YanıtlaSil
  9. css kodları zaten kodların üst kısmında bulunuyor.Bu kodlar gadget olarak bloggere eklenecek şekilde düzenlenmiştir.Gadgeti sürükleyip ya sayfanın en üstüne yada blog kayıtlarının hemen üstüne sürükleyip bırakıyoruz.

    YanıtlaSil
  10. İrfan Karabulut8 Mayıs 2012 15:39

    Merhabalar  
    Blog adresim.http://karamavi.blogspot.comBen bu açılır menüyü begendim ve  bloguma  uygulamaya çalıştım ama sadece başlık göründü  sayfa tam açılmadı sildim Lütfen YARDIM edermisiniz.  teşekkür ederim.

    YanıtlaSil
  11. menünün altına müzik çalan bir gadget eklemişsiniz.Menü gadgeti ile bu müzik çalan eklentinin yerini değiştirin.Yani Üst kısımda en son gadgetde menü kodları bulunsun.

    YanıtlaSil
  12. benim konuyla alakasız ama bulamadım bi türlü bloguma simge eklicem resmi küçültm ama Kare bir resim değil diyor bu ne demek ?

    YanıtlaSil
  13. birde kategoriler bölümde  ne kadar içerik eklediysem  onun sayısı çıkıyor bunu nasıl hallederim çıkmasını istemiyorum

    YanıtlaSil
  14. İrfan Karabulut9 Mayıs 2012 11:33

    Merhabalar dost okul 
    Dediginizi yaptım  ama yinede gadget çugu ani açılıyor ve kapanıyordu. mecburen  tekrar eski  haline döndüm. bana açıklayıcı ve daha aydınlatıcı bir şekilde izah ederseniz sevinirim. 

    NOT: Acaba şablonum mu uygun degil yoksa eski sayfalar varda ondan mı olmuyor. veya çok mu gadget varda  sayfam mı yetersiz kalıyor. 

    Yardımlarınızı  ACİL bekliyor ve çalışmalarda BAŞARILAR diliyorum.

    YanıtlaSil
  15. eklentiyi tasarım modundayken blog kayıtlarının üzerine konumlandırmayı deneyin.Bu eklenti bütün şablonlarda çalışıyor.

    YanıtlaSil
  16. Tasarım modundayken bahsettiğiniz  gadgeti düzenle linkine tıkladığınızda açılan pencerede Her Etiketteki kayıt sayısını göster diye bir kutucuk var bu kutucuktaki işareti kaldırırsanız sorun çözülür.

    YanıtlaSil
  17. nereye simge eklemek istiyorsunuz?

    YanıtlaSil
  18. İrfan Karabulut10 Mayıs 2012 15:37

    Merhaba Blog Okulu
     Bu gün dediginizi yaptım ama maalesef açılır menü başarılı olmadı şöyleki:Eger başlık altına koyup müzigi aşagı çekersem sayfalar görünüyor ama içleri açılmıyor. Veya Eklentiyi blog kayıtları üstüne  koyuyorum. menü hep anasayfaya açılıyor (örnek  kendi sayfamı tıklıyorum  sürekli anasayfada kalıyor). olmadı yine anlayacagınız. yeni önerilerinize ihtiyacım olucak.Yeni yorumlarda buluşmak dileklerimle HOŞ KALIN 
    .!!!!!!

    YanıtlaSil
  19.  # yazan yerlere linkleri yazman lazım,linkleri yazmazsan ana sayfaya yönlendirir Örnek
    Dosya
    yerine
    Dosya
    gibi.

    YanıtlaSil
  20. Sık kullanılan simgeye

    YanıtlaSil
  21. merhaba bn kategoriler bölümü koymadan üsteki menülere aktaramıyorum şöyleki Kategoriler bölümünde gözükmesin ama açılık menüde gözüksün bunu nasıl yapıcm

    YanıtlaSil
  22.  Açılır menüye eklemek için tek tek link olarak yazılarınızı eklemeniz gerekli.Kategorilerde görünmesini istemediğiniz linki,kategoriler gadgetini düzenle linkini tıklayarak görünmesini istemediğiniz linkin kutusundaki işareti kaldırarak bu sorunu halledebilirsiniz.

    YanıtlaSil
  23. olmuyorki ya birini seçmediğimde katogoriler hepsi yok oluyor bide sık kullanılan simgede kare resmi değil diyor onu nasıl yapıcam Bhgfd bnm

    YanıtlaSil
  24. İrfan Karabulut15 Mayıs 2012 11:51

    Merhaba 
    Dosyayerine
    Dosyagibi.Dediginizi aynen yaptım bu kez de sayfa hiç açılmadı.şimdi sorun nerede acaba .kolay gelsin 

    YanıtlaSil
  25. Süper birpaylaşım ya teşekkür ederim

    YanıtlaSil
  26. bandwith ex...gibi birşey cıkıyor menü başlıklarının altında. Ayrıca alt başlıkları da göremiyorum.

    YanıtlaSil
  27. Hocam soru sormuştum ama cevaolamadınız

    YanıtlaSil
  28. Ya da ben soruyu yollayamadım ikisinin biri. Tekrar soruyorum lütfen cevaplayın hocam. sanalbilgic.blogspot diye bir sitem var.  Sayfa oluşturup yaptığım sekmelerim var. Ben istiyorum ki bunları menü gibi kullanayım. Kategori işini biliyorum sorun yok. Fakat anlamadığım şey şu ; illa bu şekilde dışardan menü eklemek mecburi mi? Bi yardımcı olun size zahmet hocam. Saygılar...

    YanıtlaSil
  29. her hangi bir soru bana ulaşmadı?yada gözden kaçırdım,gözden kaçırmışsam kusura bakma;
    kullandığın şablon bloggere ait hazır şablonlardan bir tanesi,bu hazır şablonda senin menüleri koyduğun yere ait gadgetin özelliği;sayfaları koyduğunda o şekilde görünüyor.İşin özüne geldiğimizde bu şablonu kullanmaya devam edersen dışarıdan menü eklemen gerekir başka yolu yok,ama hazır menüleri bulunan şablonlarda var,bu şablonlardan birini yüklersen menü yüklemene gerek kalmaz,ama sonuçta hazır menülü şablon da yüklesen bu menülere isimleri ve linkleri elle tek tek girmen gerekecek.bilmem anlatabildimmi?

    YanıtlaSil
  30. arkadaşım bunun rengini değiştiremiyouz bi yardımcı olsanız

    YanıtlaSil
  31. kırmızı renkle belirttiğim 
    http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png adresteki resmi alıp istediğin gibi renklendirerek açılır menü rengini değiştirebilirsin.

    YanıtlaSil
  32. Anlatımlarınız çok güzel herşey tamam açılır münü oldu diyelim
    peki bu açılır menü başlıklarına nasıl içerik ekliyecegiz
    açılır menüler sadece süs diye kalacakmı öyle 

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...