Blogger için tasarlanmış müthiş görünümlü, renga renk maus üzerine geldiğinde dönen yaprak şeklinde menü.Blogunuza eklemek için;
Eklentinin Demosu
1.Adım CSS Kodlarını Ekleme:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip Ctrl +F yardımı ile kodlar içerisinde ]]></b:skin> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>
2.Adım HTML Kodu Ekleme:Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetin içerisine yapıştırıp kaydedin.
<nav>
<ul class="top-menu">
<li><a href=#>Ana Sayfa</a><div class="menu-item" id="home"></div></li>
<li><a href=#>BlogOkulu</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Menü</a><div class="menu-item" id="price"></div></li>
<li><a href=#>Hakkımızda</a><div class="menu-item" id="about"></div></li>
<li><a href=#>İletişim</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>
Kod içerisinde mavi renkle yazdığımız # yerine linkleri, kırmızı renkle yazdığımız yerlerede menüde görünmesini istediğiniz isimleri yazıyorsunuz.
Son olarak kaydettiğimiz html/javascript gadgetini blog kayıtlarının hemen üstüne yada başlık kısmının hemen altına sürükleyip bırakıyoruz.
Eklentinin Demosu
1.Adım CSS Kodlarını Ekleme:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip Ctrl +F yardımı ile kodlar içerisinde ]]></b:skin> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>
2.Adım HTML Kodu Ekleme:Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetin içerisine yapıştırıp kaydedin.
<nav>
<ul class="top-menu">
<li><a href=#>Ana Sayfa</a><div class="menu-item" id="home"></div></li>
<li><a href=#>BlogOkulu</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Menü</a><div class="menu-item" id="price"></div></li>
<li><a href=#>Hakkımızda</a><div class="menu-item" id="about"></div></li>
<li><a href=#>İletişim</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>
Kod içerisinde mavi renkle yazdığımız # yerine linkleri, kırmızı renkle yazdığımız yerlerede menüde görünmesini istediğiniz isimleri yazıyorsunuz.
Son olarak kaydettiğimiz html/javascript gadgetini blog kayıtlarının hemen üstüne yada başlık kısmının hemen altına sürükleyip bırakıyoruz.
0 yorum:
Yorum Gönder
~~~~~~~~~~~~~~~~~Yorum Kuralları~~~~~~~~~~~~~~~
Yorum yazmak için Google hesabına sahip olmanız gerekmektedir.
Eğer Google hesabınız yoksa yorum kutusundaki ''yorumlama biçimi''ne tıklayıp ''adı/url''yi seçerek İsminizi girin ve devama tıklayın.
1. Yorumunuz onaylandıktan sonra yayınlanır, lütfen aynı yorumu 2-3 kez göndermeyin.
2. Küfür veya argo, spam içeren yorumlar barındırılmaz, silinir.
3. Türkçe imla kurallarına uymayan yorumlar kesinlikle yayınlanmayacaktır.
4. Youtube ve hizliresim.com haricinde yorumiçi link veren yorumlar barındırılamaz, silinir.
**Yazdığınız yoruma cevap yazıldığında haberdar olmak için yorum formunun sağ alt köşesinde bulunan Beni Bilgilendir kutucuğunu işaretleyebilirsiniz.**