- Home>
- Blogger , Blogger Eklenti , blogger eklentileri , blogger eklentisi , Blogger Widget , Css3 , menü >
- Blogger Yandan Açılır Menü Eklentisi
Posted by : Unknown
29 Ocak 2013 Salı
Blogger blogunuzda , Yandan açılır menü eklentisi isterseniz , bu eklenti çok hoşunuza gidecek..
Fare ile üzerine gelindiğinde açılan menümüz , blogunuza hoş bir görsellik katabilir..
Altta yer alan kodumuzu buluyoruz
]]></b:skin>
Bir satır üstüne altta yer alan kodları ekliyoruz..
/* Blogger Yandan Açılır Menü Eklentisi eklentileri.blogspot.com */
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;
}
Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodlarımızı ekliyoruz
<ul class="nav8">
<li>
<!--[if lte IE 6]><a class="ie6" href="#url"><table>
<tr><td><![endif]-->
<ul class="sub">
<li><a href="http://eklentileri.blogspot.com/"><b>Ana Sayfa</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 1</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 2</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 3</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 4</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr>
</table>
</a><![endif]-->
</li>
</ul>
Yukarıdaki işlemleri yaptıysanız Blogger Yandan Açılır Menü Eklentisi hazır , yukarıdaki kodları kendinize göre düzenleyiniz..
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Yandan Açılır Menü Eklentisi , Blogger Menü Eklentisi , Blogger Açılır Menü , Menü Eklentileri , Blogger Yana Açılan Menü , Menü , Slideout Menu Bar For Blogger , Blogger Menu Widget
Blogger Yandan Açılır Menü Eklentisi , Blogger Menü Eklentisi , Blogger Açılır Menü , Menü Eklentileri , Blogger Yana Açılan Menü , Menü , Slideout Menu Bar For Blogger , Blogger Menu Widget