Menu

Blogger Dikey Menü Widget

Blogger dikey menü ile sitenizin tasarımına oldukça profesyonelce bir görüntü eklemiş olacaksınız.

Blogger dikey menüler ile önemli sayfalarınıza bağlantılar oluşturabilir veya kategorilerinizle oluşturacağınız navigasyon menü ile sayfalarınıza bağlantılar oluşturabilirsiniz.

Bu menü fare ile üzerine gelince hareket ederek göze hoş gelen bir hareket oluşturuyor.Menü CSS kullanılarak oluşturulmuştur.CSS kodları ile oynayarak site tasarımına uygun olan ölçü ve renkleri kullanabilirsiniz.

Blogger Dikey Menü Widget

Blogger için Css kodları ile oluşturulmuş bu Blogger Animasyonlu Dikey Menü Widget Kodlarının nasıl göründüğünü ve kodların çalışıp çalışmadığını test etmek için kod deneme penceresini kullanabilirsiniz.Kod Deneme Penceresi

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 Dikey Menü Widget

Blogger Dikey Menü Widget Kodları 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 Dikey Menü Widget

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



<style>
#nav12,#nav ul {
background-color: #00B366;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav12 {
display: block;
padding: 5px;
position: relative;
width: 112px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav12 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav12 li {
background-color: #FFFFFF;
position: relative;
}
#nav12 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav12 li a {
background-color: #00B366;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav12 li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;
}
#nav12 li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav12 ul li {
width: 100%;
}
</style>
<div class="container">
<ul id="nav12">
<li><a href="http://www.seomektebi.com/">Anasayfa</a></li>
<li><a href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Alt menü 1</a></li>
<li><a href="#">Alt menü 2</a></li>
<li><a href="#">Alt menü 3</a></li>
<li><a href="#">Alt menü 4</a></li>
<li><a href="#">Alt menü 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Alt menü 2-1</a></li>
<li><a href="#">Alt menü 2-2</a></li>
<li><a href="#">Alt menü 2-3</a></li>
<li><a href="#">Alt menü 2-4</a></li>
<li><a href="#">Alt menü 2-5</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Alt menü 3-1</a></li>
<li><a href="#">Alt menü 3-2</a></li>
<li><a href="#">Alt menü 3-3</a></li>
<li><a href="#">Alt menü 3-4</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.seomektebi.com/">Menu 7</a></li>
</ul>
</div><br/><a href="http://www.seomektebi.com/" style="font-size: 3px; text-decoration:none; color: #ffffff;">seo mektebi</a>

Blogger Dikey Menü Widget Widget 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 Dikey Menü Widget "

Önerilen Yazı
×