Widget Ekleme Yöntemiyle Şık Tasarımlı Dikey Menü Yapımı

Blogunuzun kenar çubuğu (sidebar) için şık bir şekilde tasarlanmış olan dikey menü kutusunu, burada yaptığımız anlatım sayesinde blogunuzun temasına uygun renklerle değiştirip kendinize göre tasarlayabilir ve blogunuza ekliyebilirsiniz.Dikey menü kutusunu blogunuza eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydettiğimizde dikey menü kutusu blogumuza eklenmiş olacak.

<style type="text/css">

/* Made By blogokulu.blogspot.com */

#ddblueblockmenu{
border: 1px solid #f2890c; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #83b617; /*Menu background Color */
border-bottom: 1px solid #FFFFFF; /*Bottom border color */
border-left: 7px solid #4d6b0c; /*Left border color */
list-style-type:none; 
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #f2890c; /*Menu background Color On Hover*/
border-left-color: #FDB600; /*Left border color On Hover*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #f2890c;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>

<div id="ddblueblockmenu">

<div class="menutitle">Başlık</div>
<ul>
<a href="http://blogokulu.blogspot.com/">Ana Sayfa</a>
<a href="http://blogokulu.blogspot.com/search/label/blogger%20widget">Blogger Widgets</a>
<a href="http://blogokulu.blogspot.com/search/label/blogger%20temalar%C4%B1">Blogger Temaları</a>
<a href="http://blogokulu.blogspot.com/"><b>Blog Okulu</b></a>
<a href="http://blogokulu.blogspot.com/search/label/sitene%20ekle">Blogger Eklentileri</a>
<a href="#">Ayarlar</a>
</ul></div><font size="1">Menu By <a
href="http://www.blogokulu.org">BlogOkulu</a
href="http:></font>

Kod içerisinde  
mavi renkle yazdığımız yerler, menüde görünecek metinler,
kırmızılar ise menüde görünen metinlere ait linklerdir.
Dikey Menü Kutusunun Renklerini Değiştirip temanıza uygun hale getirmek isterseniz aşşağıdaki resimde oklarla ,kod içerisinde yapacağınız değişikliklerin yerleri ve isimleri belirtilmiştir.Ayrıca renk kodlarını burdan bulabilirsiniz.