Bumerang - Yazarkafe

Blogger Dönen Yapraklı Menü

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;
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.

<style type="text/css">
nav {
        width: 960px;
        height: 100px;
        margin: 120px auto;
        text-align: center;
}
.top-menu li {
        display: inline-block;
        text-align: center;
        margin: 30px 5px;
        position: relative;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
}
.top-menu li:hover {
        margin: 30px 20px;
}
.top-menu li:active {
        margin: 30px 33px;
}
.top-menu li a  {
        width: 100px;
        height: 100px;
        z-index: 9999;
        position: absolute;
        top: 35px;
        font-weight: bold;
        display: block;
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        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.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

8 yorum:

  1. ben yapamadım hata veriyor
     

    YanıtlayınSil
  2. Teşekkürler, denildiği gibi yaparsanız çok kolay!

    YanıtlayınSil
  3. TAMAM YAPIYORUM BLOĞUMDA MENÜ YER ALIYOR AMA ÖR/ MENÜDE ANA SYFAYA TIKLADIĞIMDA BENİM ANA SYFAM NASIL GÖRÜKECEK

    YanıtlayınSil
  4. bende yapamıyorum bloğumdaki içerikler nasıl yönlenecek,ayrıca html düznle kısmı yayın yaparken olan kısımmıdır.tasarım html düzenle diye bir buton yokki benim menümde lütfen yardım edermisiniz

    YanıtlayınSil
  5. Html Düzenle kısmı dediğimiz blogunuzun html kodlarının bulunduğu kısım, yani Şablon>Htmlyi Düzenle yolunu takip edip gideceğiniz kısım.Yazı yayınladığınız yerdeki html değil yani.
    İçerik yönlendirmeyle ilgili olarak:
    2.Adımda verdiğimiz mavi renkli karelerin yerine içeriğinizin linkini kırmızı renkli olan yere ise menüde görünmesini istediğiniz ismi yazıyorsunuz.
    Örnek:Menüde blog okulu görünecek ve tıklayınca www.blogokulu.org adresine yönlenecek diyelim.Bunun için 2. Adımda verdiğimiz kodu aşağıdaki düzenliyorsunuz.
     BlogOkulu

    YanıtlayınSil
  6. Göktuğ YEŞİLYURT21 Kasım 2012 21:27

    Ben maalesef Blogger'ın yeni arayüzü nedeniyle son adımı bir türlü yapamıyorum.Ek olarak resime bakıp anlayabilirsiniz.HTML/Java Script seçeneği yok.Lütfen yardım edin... :( :(

    YanıtlayınSil
  7. Kolay gelsin süper anlatım teşekkürler. 1. Sorum; ornegın hakkımızda bırşeyler yazdık bunun menüde gorunmesını tıklayınca da yazının okunmasını ıstedık... Bız bu hakkımda yazısını önce bloga yazıp yayınlıyacakmıyız( lınk olarak çıkması ıcın) sonra bu lınkımı kopyalıyacagız, yoksa daha kolay bır yolu var mı? 2. Sorum iletişime tıkladıgımızda dırek maıl sayfasını acılacak(mail kutusu gıbi) yoksa ıletısıme tıklıycaz oradakı sayfada maıl adresımı yazacak? İletişime tıkladıgımda dırek mail sayfasına nasıl ulaşırım? 3. Sorum;menüde " yemek" başlığı açtım dıyelim tıkladığımda tüm yemek yazıları ard arda nasıl sıralanacak? Yemeğe tıkladım makarna , pasta vsvs sonrakı sayfa gıbı? Tüm benzer konuları aynı katagorıde nasıl sıralarım? Çok sordum;) sabırsızlıkla yanıtınızı bekliyorum sevgıler saygılar

    YanıtlayınSil
  8. cevap:1hakkımızda kısmını aynen dediğiniz gibi yapabilirsiniz.Yada blogger kullanıcı panelinden sayfa oluştur ile yeni bir sayfada hakkınızda bilgi yayınlayabilirsiniz.Bu sayfanın linkinide herhengi bir yere verbilirsiniz.
    cevap:2bu kon ile ilgili google dökümanlar ile iletişim formu düzenleme adlı yazımıza bir göz atmanızı tavsiye ederim.
    cevap:3bununla ilgili olarakda blogger kategori oluşturma yazımıza göz atmanızı tavsiye ederim.
    eğer yapamazsanız iletişimden mesaj atın size yardımcı olalım.

    YanıtlayınSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...