Menu

Blogger Animasyonlu 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.Ayrıca menü başlığına tıklayarak tüm bağlantılar otomatikman gizlenmektedir.Bu menü CSS kullanılarak oluşturulmuştur.CSS kodları ile oynayarak site tasarımına uygun olan ölçü ve renkleri kullanabilirsiniz.

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.

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

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


Blogger Animasyonlu Dikey Menü Widget
Blogger Animasyonlu 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 Animasyonlu 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 Animasyonlu Dikey Menü Widget Kodları Eklentisini site tasarımınıza uygun olarak istediğiniz yere ekleyebilirsiniz.

<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* Blogger Animasyonlu Dikey Menü Widget seo mektebi */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
html{
  height: 100%;
background: rgb(234, 246, 243);
}
body{
  text-align:center;
  vertical-align:middle;
  height:100%;
}
.menu{
  vertical-align:middle;
  width:300px;
  display:inline-block;
 font-family: 'Source Sans Pro', sans-serif;
  transform:translate3d(0,0,0);
}
.menu input{
  position:absolute;
  left:-9999px;
}
.menu #togglemenu:checked ~ ul {
  max-height:300px;
  padding-bottom:1em;
}
.togglemenu {
background: #FC634B;
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'entypo', sans-serif;
}
.togglemenu:before{
  content: "\2630";
  font-size:1.5em;
  vertical-align:middle;
}
.menu ul{
  margin-top:2px;
  text-align:left;
  max-height:0px;
  overflow:hidden;
  padding-bottom:0;
  transition:300ms ease all;
}
.menu li{
  margin-bottom:1px;
  position:relative;
  z-index:10;
  transition:300ms ease all;
}
.menu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;
box-sizing:border-box;
transition:300ms ease all;
}
.menu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.menu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}
.menu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.menu li:hover + li{
  z-index:1;
}
</style>
<nav class="menu">
  <input type="checkbox" id="togglemenu" checked />
  <label for="togglemenu" class="togglemenu"></label>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav><br/><a href="http://www.seomektebi.com/" style="font-size: 3px; text-decoration:none; color: #ffffff;">seo mektebi</a>


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

Önerilen Yazı
×