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.
|
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.