Menu

Blogger Mavi Tasarım Navigation Menü Kodları


Blogger css kodlar ile güzel açılır menü yapma,aşağıda verdiğim Blogger Mavi Tasarım Navigation Menü Kodlarının uygulaması çok basit ve kolaydır.

Html veya css kodlar her internet tarayıcı ile uyuşmaktadır.İstediğiniz gibi düzenleyerek kendimize uygun bir menü elde edebilirsiniz.Bu menüyü bloğunuza ekleyerek etikete bağlı olarak da kullanabilirsiniz.

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

Blogger Mavi Tasarım Navigation Menü Kodları

---internetten Para Kazanma Stratejileri

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

---Facebooktan Para Kazanma Yöntemleri

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 Mavi Tasarım Navigation Menü Kodları


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ı

---Blogger İçin Yüzer Sosyal Medya Widget

İ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 Mavi Tasarım Navigation Menü Kodlarını site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<!-- seomektebi.com mavi navigation menü--><style>
#nav_menu {
    width: 100%;
    margin: 10px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-right: auto;
    margin-left: auto;
    text-transform: capitalize;
   
}
#nav_menu ul {
    float: auto;
    overflow: hidden;
    margin:0 auto;
    text-align: center;

}
#nav_menu:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
 #nav_menu a {
    display:block;
    padding: 10px 30px;
    color: #fff;
    margin: 0 auto;
    text-decoration: none;
    text-shadow: 0 1px #333;
    text-align:center;
}
#nav_menu a:hover {
    color: #FFF;
    text-shadow: 0 2px #000;
}
#nav_menu li {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    border-color: #005fa1 #005fa1 #005fa1 #005fa1;
    background: #0096ff; /* Old browsers */
    background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
    background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */
}
#nav_menu li:hover {
    background: #404040; /* Old browsers */
    background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
    background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
}
#nav_menu li:first-child {
    border-color: none;
    border-radius: 100px 0 0 100px;
}
#nav_menu li:last-child {
    border-color: none;
    border-radius: 0 100px 100px 0;
}
#nav_menu li:first-child a:hover {
border-color: #252525;
}
</style>
    <!-- begin navigation -->
    <nav id="nav_menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
               <li><a href="#">Products</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Faqs</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
   
    </nav>
  <!-- seomektebi.com mavi navigation menü-->


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 Mavi Tasarım Navigation Menü Kodları "

Önerilen Yazı
×