14 Aralık 2012 Cuma
Multi Color CSS3 Blogger Menü Eklentisi
Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?
Bu eklentimizle , Blogunuzda post üstüne , bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..
Aşağıda yer alan kodu buluyoruz..
]]></b:skin>Bir satır üstüne , alttaki kodları ekliyoruz..
/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */
.cbdb-menu li {
display: block;
float: left;
line-height: 35px;
list-style:none;
margin: 0 5px;}
.cbdb-menu li a {
/* This generators the gradient on top of the solid color */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image: -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color: #f4f4f4; /* IE */
color: rgba(255, 255, 255, 0.8);
display: block;
font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
outline:none;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); }
.cbdb-menu li a:active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}
/* Dark Text */
.cbdb-menu li a.dark {
color: #333; /* IE */
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
background: #B80202;
border: #B80202 1px solid}
.red:hover, .red:focus{
background-color:#e30606
}
.green {
background: #46c431;
border: #46c431 1px solid}
.green:hover,.green:focus {
background-color:#44e329
}
.yellow {
background: #D9CE1C;
border: #D9CE1C 1px solid}
.yellow:hover,.yellow:focus {
background-color:#eee117}
.cyan {
background: #23c6de;
border: #23c6de 1px solid}
.cyan:hover,.cyan:focus {
background-color:#18d8f4
}
.blue {
background: #3271d9;
border: #3271d9 1px solid}
.blue:hover,.blue:focus {
background-color:#377ef2
}
Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim
<ul class="cbdb-menu">
<li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li>
<li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li>
</ul>
Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın..
<<< Bu Yazı için Arama Sonuçları >>>
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
