Blogger Renkli Üst Menü Yapımı

Yazan: Admin 2 Ocak 2013 Çarşamba 0 yorum
Sponsorlu Bağlantılar
Blogger sitenizde değişiklik yapmak istiyorsanız ve güzellik katmak istiyorsanız bu tam size göre. Bu eklenti ile blog sitenize renkli üst menü yapabilirsiniz. Mouse ile üzerine gelince renkleride değişmektedir. Oldukça hoş bir eklenti. Kendim denedim sorunsuz çalışmaktadır. Fakat boyutları uymassa ayarlamanız gerekiyor.

Html düzenle diyoruz ve widget şablonunu genişletiyoruz. Bu kodu buluyoruz. ]]></b:skin>
Bu koddan önce aşağıdaki kodları ekliyoruz.
#middle {
width: 765px;
float:center;
padding:10px 10px 10px 10px;
margin:10px 0;
background:#BDDFEB url() no-repeat;
}
.category {
width:133px;
float:left;
border-top:8px solid #333;
margin:5px;
padding:15px 10px 10px 10px;
background:#33AAFF;
}
.category p {
margin:0;
}

#cat-1 {width:133px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:133px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:133px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:133px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:133px; margin:0; border-top:8px solid #FFDD33; color:#000000;}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}

Aşağıdaki kodlarıda widget olarak ekliyorsunuz işlem tamamdır.
<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='URL 1'></a></h2><b>TEXTUL 1</b>
</div></div></div>

<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='URL 2'></a></h2><b>TEXTUL 2</b>
</div></div></div>

<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='URL 3'>/a></h2><b>TEXTUL 3</b>
</div></div></div>

<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='URL 4'></a></h2><b>TEXTUL 4</b>
</div></div></div>

<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='URL 5'></a></h2><b>TEXTUL 5</b>
</div></div></div></div>

0 yorum:

Yorum Gönder

Yorumlama biçimi: Adı/URL ya da Anonim seçerek yorum yapabilirsiniz.
Yorumlarınız denetlendikten sonra yayınlanacaktır.