Menu

Blogger CSS Kodlar Turuncu Renkli Açılır Menü

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 Turuncu Renkli Açılır Menü'nün nasıl göründüğünü test etmek istiyorsanız resmin altındaki Demo butonuna tıklayarak görebilirsiniz.

Blogger CSS Kodlar Turuncu Renkli Açılır Menü

---internetten Para Kazanma Stratejileri

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

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 CSS Kodlar Turuncu Renkli Açılır 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 Sosyal Medya Butonları 3

İlk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.
Blogger CSS Kodlar Turuncu Renkli Açılır Menü

Blogger CSS Kodlar Turuncu Renkli Açılır Menü

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

<style>
#org_menu {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 960px;
    }
#org_menu:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -9px;
    z-index: 1;
    border: 10px solid transparent;
    border-right-color: #c50;
}
#org_menu ul {
    display: block;
    position: relative;
    z-index: 2;
    padding: .2em 30px;
    margin-right: -2em;
    list-style: none;
    background: #f72;
    font-family: 'Arial', serif;
    font-weight:bold;
    font-size: 16px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
}
    #org_menu li {
        float: left;
        position: relative;
    }

        #org_menu a {
            display: block;
            padding: .8em 1.4em;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0,0,0,.3);
            color: white;
            transition:.3s box-shadow, .3s padding;
            border-radius: 9999px;
        }
   
        #org_menu a:hover,
        #org_menu a:active {
            background: rgba(0,0,0,.1);
            color: #F90;
            box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
        }
   
        #org_menu a:active {
            background:white;
            color: #eee;
            padding: .5em .6em .3em 1em;
            text-shadow: 1px 1px 0 rgba(0,0,0,.4);
            box-shadow: 10px 6px 1px #c50 inset;
        }
    #org_menu:hover {
        transform: rotate(720deg);
    }
</style>
 <nav id="org_menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>


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 CSS Kodlar Turuncu Renkli Açılır Menü "

Önerilen Yazı
×