Disqus for Blog Okulu

Bumerang - Yazarkafe

Home acilir menu
acilir menu etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
acilir menu etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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

32 Yorumlar Edit
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.
Devamını Oku

Blogger Yatay Menu Navigasyonlu

7 Yorumlar Edit
Blogger Yatay Menu Navigasyonlu

Navigasyonlu yatay menü sekmelerinin bloglara ayrı bir hava kattığı aşikar.Blogunuzun üst tarafında isteğinize göre adlandırıp link verebileceğiniz tam 30 adet yatay menü kodlarını sizlerin kullanımına sunuyoruz.Beğendiğiniz yatay menünün altında bulunan  kodu kopyalayıp Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip seçtiğimiz yatay menüye ait kodu açılan gaddgetimizin içerisine yapıştırıp kaydediyoruz.Daha sonra eklediğimiz gadgeti blog kayıtları yada,blogumuzun üst tarafında istediğimiz yere sürükleyip bırakıyoruz.
Kodlar içerisinde:
<li><a href="#" ><span>Link 1</span></a></li> 
  <li><a href="#" ><span>Link 2</span></a></li> 
  <li><a href="#" ><span>Link 3</span></a></li> 
  <li><a href="#" ><span>Link 4</span></a></li> 
  <li><a href="#" ><span>Link 5</span></a></li> 
  <li><a href="#" ><span>Link 6</span></a></li> 
  <li><a href="#" ><span>Link 7</span></a></li>
# ile gösterdiğimiz yere linklerinizi Örnek:http://blogokulu.blogspot.com
Link1 diye gösterdiğimiz yerede menüde görünmesini istediğiniz ismi yazarak (Ör:Blog Okulu) menüyü kendinize göre düzenleyebilirsiniz.
Menüdeki sekme sayısını arttırmak isterseniz aşşağıdaki kodu tekrarlamanız yeterli olacak.
<li><a href="#" ><span>Link</span></a></li>
Blogger Navigasyonlu Açılır Menü-1                                               

Blogger Navigasyonlu Açılır Menü-2                                               

Blogger Navigasyonlu Açılır Menü-3                                               

Blogger Navigasyonlu Açılır Menü-4                                               

Blogger Navigasyonlu Açılır Menü-5                                               


Blogger Navigasyonlu Açılır Menü-6                                              

Blogger Navigasyonlu Açılır Menü-7                                            
Devamını Oku