Blogger İçin Yandan Açılır Menü Eklentisi

Blogger bloğunuza çok hoş bir görünüm katmak istiyorsanız bu eklenti tam sizin için. Bu eklenti bloğunuzda şu şekilde görülür. Ekranın sağ köşesindedir. Tam ortasında değil de biraz daha yukarıdadır. Sadece bir satırlık bir kısmı ortadadır. Geri kalan kısmı fare ile üzerine gittiğiniz zaman ortaya çıkar. Ekranın neredeyse ortasına kadar uzar. Ona bir takım kısa yollar eklersiniz. Siteniz daha işlevsel hale gelir. 

Bu eklentiyi Blogger bloğunuza nasıl uygularsınız? 

İlk olarak altta yazdığım kodu bulunuz. 

]]></b:skin> 

Yukarıdaki kodun bir satır üstüne aşağıdaki kodu yapıştırın. 

/* Blogger Yandan Açılır Menü Eklentisi webmaster.10line.net */ 

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;
} 

Bunu yaptıktan sonra şablonunuzu kaydedin ve yerleşim – gatget ekle – HTML / JavaScript yolunu takip ederek açılan panele alta yazdığım kodları 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://www.webmaster.10line.net/"><b>Ana Sayfa</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http:// www.webmaster.10line.net /"><b>Link 1</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http:// www.webmaster.10line.net /"><b>Link 2</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http:// www.webmaster.10line.net /"><b>Link 3</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http:// www.webmaster.10line.net /"><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> 

Tüm bunları yaptığınız zaman yandan açılır Blogger eklentisi hazır demektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.