Menu

Blogger Hareketli Açılır Mavi Menü

Blogger çekici şık tasarımlar ile navigasyon menüleri farklı türde bol miktarda görmek istiyorsanız SEO Mektebini takip ediniz.

Bir web sitesi,blog için navigasyon menüsü sayfanızın izlenimlerini geliştirmek oldukça önemlidir.Web sitesi tasarımında navigasyon menüler web sitesinin kullanılabilirliği ve kullanıcı dostu olan menüler site tasarımında önemli rol oynar.

Bu basit ve kullanıcı dostu navigasyon menüsü sadece CSS kullanarak oluşturulmuştur. 


Blogger Hareketli Açılır Mavi Menü

---internetten Para Kazanma Stratejileri

---Google Kazançları Affiliate Satış Ortaklığı

---Facebooktan Para Kazanma Yöntemleri

Blogger için Css kodları ile oluşturulmuş bu Blogger Hareketli Açılır Mavi Menü'nün nasıl göründüğünü test etmek istiyorsanız resmin altındaki Demo butonuna tıklayarak görebilirsiniz.

Blogger Html veya css kodlarından, Css kodları ile oynayarak site tasarımınıza uygun şekli ve renklerini de kendinize göre,zevkinize göre ayarlamak da mümkündür.


Blogger Hareketli Açılır Mavi Menü


Ayrıca daha önce yayınladığımız aşağıdaki eklentilerde işinize yarayabilir,deneyebilirsiniz.

---Blogger CSS3 Siyah Açılır Menu Yapma

---Blogger Yeşil Navigation Menü Tasarımı
İlk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger Mavi Tasarım Navigation Menü Kodları

Blogger Mavi Tasarım Navigation Menü Kodları

HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız, Blogger Hareketli Açılır Mavi Menü Kodlarını site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<style>
#bt-menu ul,
#bt-menu li,
#bt-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu {
  height: 49px;
  background: #123D60;
  background: -moz-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0077D7), color-stop(100%, #123D60));
  background: -webkit-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -o-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: -ms-linear-gradient(top, #0077D7 0%, #123D60 100%);
  background: linear-gradient(to bottom, #0077D7 0%, #123D60 100%);
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7, endColorStr=#123d60);
   /* IE is so silly */
   border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-bottom: 4px solid #002A4C;
}
 #bt-menu span {
  margin: 0;
  padding: 0;
  position: relative;
}
#bt-menu:after,
#bt-menu ul:after {
  content: "";
  display: block;
  clear: both;
}
#bt-menu a {
  color: #ffffff;
  display: inline-block;
  font-family: Trebuchet MS, Arial, Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 49px;
  padding: 0 25px;
  border-right: 1px solid #123D60;
  text-decoration: none;
}
#bt-menu ul {
  list-style: none;
  }
#bt-menu > ul {
  float: left;
    }
#bt-menu > ul > li {
  float: left;
   }
#bt-menu > ul > li:hover:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: -10px;
 }
 #bt-menu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#bt-menu > ul > li:last-child > a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#bt-menu > ul > li.active > a {
background: #004074;
 }
#bt-menu > ul > li:hover > a {
  background: #004074;
}
#bt-menu .has-sub {
  z-index: 1;
}
#bt-menu .sub:hover > ul {
  display: block;
}
#bt-menu .sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#bt-menu .sub ul li {
  *margin-bottom: -px;
 }
#bt-menu .sub ul li a {
  background: #047DCB;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 14px;
  font-weight: bold;
  display: block;
  line-height: 120%;
  padding: 10px;
  text-shadow:1px 1px 3px #333;
}
#bt-menu .sub ul li:hover a {
  background: #009BFF;
  text-shadow:1px 2px 1px #000;
}
#bt-menu .sub .sub:hover > ul {
  display: block;
}
#bt-menu .sub .sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  }
#bt-menu .sub .sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;

}
#bt-menu .sub .sub ul li a:hover {
  background: #095c80;
}
</style>
<div id='bt-menu'>
 <ul>
<li class='active'><a href='http://bl0gger-tricks.blogspot.com'><span>Home</span></a></li>
<li class='sub'><a href='#'><span>Application</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li><a href='URL'><span>HTML Encoder</span></a></li>
<li><a href='URL'><span>HTML Encoder</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Tools</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li> <a href='URL'><span>Sub Item 1</span></a></li>
<li> <a href='URL'><span>Sub Item 2</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Page Rank Checker</span></a></li>
<li class='sub'><a href='URL'><span>Color Code</span></a></li>
</ul>
</li>
<li><a href='#'><span>Faqs</span></a></li>
<li><a href='#'><span>Advertise</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>


Düzenleme:
Yayınladığımız bu eklentiler içinde ki renk kodları #XXXX şeklinde olan kodlardır bunları aşağıdaki SEO Mektebi renk kodları sayfasından istediğiniz renkleri seçerek ekleyebilirsiniz.

SEO Mektebi CSS Renk Kodlarına Buradan Ulaşabilirsiniz

Ayrıca eklentiler içindeki sayısal değerlerle oynayarak site tasarımına uygun olan ölçüleri sağlayabilirsiniz.

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Hareketli Açılır Mavi Menü "

Önerilen Yazı
×