Menu

Blogger Mega Drop Navigation Menü

Bütün Blogger site sahiplerinin işine yarayabilecek çok kullanışlı Css menü ile siteniz şık ve kullanışlı bir menüye sahip olacaktır.

Blogger için Css kodları ile oluşturulmuş bu CSS Blogger Mega Drop Navigation Menu'nün nasıl göründüğünü test etmek istiyorsanız ve kodların çalışıp çalışmadığını kod deneme penceresinden öğrenebilirsiniz.Kod Deneme Penceresi

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 Mega Drop Navigation Menü


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

---6 Adet İnternetten Para Kazandırma Kitapları

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

---Blogger Yeşil Navigation Menü Tasarımı

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


Blogger Mega Drop Navigation Menü
Blogger Mega Drop Navigation Menu sitenize yüklemek için,ilk önce Blogger.com giriş yapınız sonra Yerleşim/Gedget Ekle/ HTML/JavaScript adımlarını takip ediniz.

Blogger Mega Drop Navigation Menü
HTML/JavaScript tıkladıktan sonra aşağıdaki kodu kopyalayarak resimdeki gibi boşluğa yapıştırınız, Yeni Blogger Mega Drop Navigation Menü Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<style type="text/css"> * { padding: 0; margin: 0; }
body {
background: #ccc;
font-family: oswald, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.bigbox {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
} .avdore {
background: #6EAF8D;
background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-avdoreation: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
} ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
ul.firstbaba li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.firstbaba li:last-child a {
border-right: none;
}
ul.firstbaba li a:hover {
color: #000;
}
ul.secondbaba {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.secondbaba li {
float: none;
margin: 0;
}
ul.secondbaba li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.secondbaba li:last-child a {
border-bottom: none;
}
ul.secondbaba li a:hover {
color: #000;
background: #eeeeee;
}
 ul.firstbaba li:hover ul {
display: block;
background: #fff;
} ul.firstbaba li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.firstbaba li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.avdore {
padding: 3px;
}
.bigbox {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.firstbaba li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.firstbaba li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.secondbaba {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.secondbaba li a {
background: #485f6f;
border: none;
color: #8B8B8B;
}
ul.secondbaba li a:hover {
color: #ccc;
background: none;
}
}
</style> <div class="bigbox">
<span class="avdore"></span>
<nav>
<ul class="firstbaba">
<li>
<a href="">Blogger</a>
<ul class="secondbaba">
<li><a href="">History</a></li>
<li><a href="">widget</a></li>
<li><a href="">SEO</a></li>
<li><a href="">Tips</a></li>
</ul>
</li>
<li>
<a href="">Wordpress</a>
<ul class="secondbaba">
<li><a href="">widget</a></li>
<li><a href="">seo</a></li>
<li><a href="">template</a></li>
</ul>
</li>
<li>
<a href="">SEO</a>
<ul class="secondbaba">
<li><a href="">Tips</a></li>
<li><a href="">Tools</a></li>
<li><a href="">Websites</a></li>
</ul>
</li>
<li>
<a href="">About Me</a>
<ul class="secondbaba">
<li><a href="">My Life</a></li>
<li><a href="">History</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
</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 Mega Drop Navigation Menü "

Önerilen Yazı
×