Hover Efektli Özelleştirilmiş Kategori Menü Eklentisi

   Blogger için kullanabileceğiniz yeni bir menü.İnternette gezinirken bulduğum bu menü Blogger sitenizde daha çok kategoriler için kullanılabilir olmasıdır.Resimde de gördüğünüz gibi her menü başlığının renki ve menüye ait simgeleri farklıdır.Üstelik biraz kurcaladığınızda ve kod bilginiz varsa bir kaç değişiklik yaparak kendi isteğinize göre düzenlenebilir.

Hover Efektli Özelleştirilmiş Kategori Menü Eklentisi Kurulumu

1. Adım

• Kumanda paneli / Şablon / HTML Düzenle yolunu izleyin.
• Her ihtimale karşı şablon yeteğinizi alın.
• CTRL+F tuşları ile </head> kodunu aradın bulun ve hemen altına aşağıdaki kodları ekleyin.

<link href = '// netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel = 'stylesheet' />

• Tekrar CTRL+F tuşları ile ]]></b:skin> kodunu bulun ve üst kısmına aşağıda ki kodları ekleyin.

.element: önce { İçerik: "\ F000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: miras; / * - Sesuaikan sebagai tambahan - * / color: # 000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; Sol: 0; }

• Tekrar ]]></b:skin> kodunu bularak bir üst satırına altta ki kodları ekleyin.Ayrıca bu kodlar içerisinde renk ve simge değiştirme işlemlerini yapabilirsiniz.

# HTML5 ul li {float: left; width: 48%; padding-left: -10px } {ul.form position: relative; arka plan: #fff; genişliği: 350px; margin: auto; padding: 0; list-style: none; taşma: hidden; text-shadow: 1px 1px 1px rgba (191, 191, 191, 1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 1px 10px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 1px 10px rgba (0, 0, 0, 0,1); } .Form li a { padding-left: 7px; height: 38px; line-height: 50px; display: block; taşma: hidden; position: relative; text-decoration: none; text-transform: ı'nın; font-size: 11px; -webkit-geçiş Tüm 0.2s doğrusal; -moz-geçiş Tüm 0.2s doğrusal; o-geçiş Tüm 0.2s doğrusal; Geçiş Tüm 0.2s doğrusal; } .Form li a.Android { border-left: 3px solid # 008747; color: # 008747; } .Form li a.Android2 { border-left: 3px solid # fecf54; color: # fecf54; } .Form li a.And3 { border-left: 3px solid # 96908F; color: # 96908F; } .Form li a.Bilgi { border-left: 3px solid # EE715F; color: # EE715F; } .Form li a.Blog { border-left: 3px solid # C4D96B; color: # C4D96B; } .Form li a.Blog1 { border-left: 3px solid # D082CF; color: # D082CF; } .Form li a.Css { border-left: 3px solid # 00ACEE; color: # 00ACEE; } .Form li a.Mod { border-left: 3px solid # FF9900; color: # FF9900; } .Form li a.Güncel { border-left: 3px solid # CC9900; color: # CC9900; } .Form li a.Genel { border-left: 3px solid # 00445f; color: # 00445f; } .Form li a.Frang { border-left: 3px solid # 7454AA; color: # 7454AA; } .Form li a.java { border-left: 3px solid # cc3f3f; color: # cc3f3f; } .Form li a.women { border-left: 3px solid # FF4B45; color: # FF4B45; } .Form li a.Magazin { border-left: 3px solid # ff8000; color: # ff8000; } .Form li a.spor { border-left: 3px solid # 6B8E23; color: # 6B8E23; } .Form li a.youtube { border-left: 3px solid # 808080; color: # 808080; } .Form li a.google { border-left: 3px solid # DD5136; color: # DD5136; } .Form li a.facebook { border-left: 3px solid # 405D9B; color: # 405D9B; } .Form li a.twitter { border-left: 3px solid # 87CEEB; color: # 87CEEB; } .Form li a.video { border-left: 3px solid # 5F9EA0; color: # 5F9EA0; } .Form li a.arkeoloji { border-left: 3px solid # FE6E4C; color: # FE6E4C; } .Form li a.Bilim { border-left: 3px solid # 00ACEE; color: # 00ACEE; } .Form li a.word { border-left: 3px solid # 21759B; color: # 21759B; } .Form li a.moda { border-left: 3px solid # F52887; color: # F52887; } ------ .Form li a.Android: hover { border-left: 3px solid # 008747; Renk: #fff; background: # 008747; } .Form li a.Android2: hover { border-left: 3px solid # fecf54; Renk: #fff; background: # fecf54; } .Form li a.And3: hover { border-left: 3px solid # 96908F; Renk: #fff; background: # 96908F; } .Form li a.Bilgi: hover { border-left: 3px solid # EE715F; Renk: #fff; background: # EE715F; } .Form li a.Blog: hover { border-left: 3px solid # C4D96B; Renk: #fff; background: # C4D96B; } .Form li a.Blog1: hover { border-left: 3px solid # D082CF; Renk: #fff; background: # D082CF; } .Form li a.Css: hover { border-left: 3px solid # 00ACEE; Renk: #fff; background: # 00ACEE; } .Form li a.Mod: hover { border-left: 3px solid # FF9900; Renk: #fff; background: # FF9900; } .Form li a.Güncel: hover { border-left: 3px solid # CC9900; Renk: #fff; background: # CC9900; } .Form li a.Genel: hover { border-left: 3px solid # 00445f; Renk: #fff; background: # 00445f; } .Form li a.Frang: hover { border-left: 3px solid # 7454AA; Renk: #fff; background: # 7454AA; } .Form li a.java: hover { border-left: 3px solid # cc3f3f; Renk: #fff; background: # cc3f3f; } .Form li a.women: hover { border-left: 3px solid # FF4B45; Renk: #fff; background: # FF4B45; } .Form li a.Magazin: hover { border-left: 3px solid # ff8000; Renk: #fff; background: # ff8000; } .Form li a.spor: hover { border-left: 3px solid # 6B8E23; Renk: #fff; background: # 6B8E23; } .Form li a.youtube:hover { border-left: 3px solid # 808080; Renk: #fff; background: # 808080; } .Form li a.google: hover { border-left: 3px solid # DD5136; Renk: #fff; background: # DD5136; } .Form li a.facebook: hover { border-left: 3px solid # 405D9B; Renk: #fff; background: # 405D9B; } .Form li a.twitter: hover { border-left: 3px solid # 87CEEB; Renk: #fff; background: # 87CEEB; } .Form li a.video: hover { border-left: 3px solid # 5F9EA0; Renk: #fff; background: # 5F9EA0; } .Form li a.arkeoloji: hover { border-left: 3px solid # FE6E4C; Renk: #fff; background: # FE6E4C; } .Form li a.Bilim: hover { border-left: 3px solid # 00ACEE; Renk: #fff; background: # 00ACEE; } .Form li a.word: hover { border-left: 3px solid # 21759B; Renk: #fff; background: # 21759B; } .Form li a.moda:hover { border-left: 3px solid # F52887; Renk: #fff; background: # F52887; } .Form li: first-çocuk: bir {ilk çocuk: .Form li hover -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; sınır yarıçapı: 5px 5px 0 0; } .Form li: son-çocuk: hover, .Form li: son-çocuk { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .Form li a: hover {i color: # 000; } i {.Form margin-right: 3px; -webkit-geçiş Tüm 0.2s doğrusal; -moz-geçiş Tüm 0.2s doğrusal; o-geçiş Tüm 0.2s doğrusal; Geçiş Tüm 0.2s doğrusal; }

• Son olarak şablon ön izlemesini yapın sorun yoksa şablonu kaydedip çıkın.

2. Adım

• Kumanda paneli / Yerleşim / Gadget ekle / HTML/Javascrit yolunu izleyerek açmış olduğunuz gadget içerisine allta ki HTML Menü kodlarını ekleyin ve düzenleyin.

<ul class = "form"><li> <a class="Android" href="#"> <i class = "icon-android simge-2x"> </ i> Android Haberleri < / a> </ li><li> <a class="Android2" href="#"> <i class = "icon-görevler simge-2x"> </ i> Android OyunlarÄ ± </a> </ li><li> <a class="And3" href="#"> <i class = "icon-kupa simge-2x"> </ i> Android Uygulama </a> </ li><li> <a class="Bilgi" href="#"> <i class = "icon-gamepad simge-2x"> </ i> Pc Oyunlar < / a> </ li><li> <a class="Blog" href="#"> <i class = "icon-bitcoin simge-2x"> </ i> Blogger Eklentileri < / a> </ li><li> <a class="Blog1" href="#"> <i class = "icon-yaprak simgesi-2x"> </ i> Blogger TemalarÄ </a> </ li> ± <li> <a class="Css" href="#"> <i class = "icon-html5 simge-2x"> </ i> Css Html A.Ş. </a> </ li><li> <a class="Mod" href="#"> <i class = "icon-linux simge-2x"> </ i> CyanogenMod </ a> </ li><li> <a class="Frang" href="#"> <i class = "icon-film ikonu-2x"> </ i> Frangmanlar </ a> </ li><li> <a class="Genel" href="#"> <i class = "icon-borazanı simge-2x"> </ i> Genel Katagori </a> </ li><li> <a class="Güncel" href="#"> <i class = "icon-rss icon-2x"> </ i> Güncel Haberler </a> </ li><li> <a class="java" href="#"> <i class = "icon-kodu simge-2x"> </ i> JavaScript </ a> </ li><li> <a class="women" href="#"> <i class = "icon-dişi simge-2x"> </ i> KadÄ ± nlar Bölümü </a> </ li><li> <a class="Magazin" href="#"> <i class = "icon-grup simge-2x"> </ i> Magazin </ a> </ li><li> <a class="moda" href="#"> <i class = "icon-kahve simge-2x"> </ i> Moda Güzellik </a> </ li><li> <a class="Bilim" href="#"> <i class = "icon-listesi simgesi-2x"> </ i> Teknoloji Bilim A.Ş. </a> </ li><li> <a class="spor" href="#"> <i class = "icon-dribbble simge-2x"> </ i> Spor Haberleri < / a> </ li><li> <a class="video" href="#"> <i class = "icon-play icon-2x"> </ i> Videolar </ a> </ li><li> <a class="word" href="#"> <i class = "icon-KRW simge-2x"> </ i> WordPres Temalar < / a> </ li><li> <a class="arkeoloji" href="#"> <i class = "icon-CNY simge-2x"> </ i> Arkeoloji </ a> </ li><li> <a class="twitter" href="#"> <i class = "icon-twitter simge-2x"> </ i> Twitter </ a> </ li><li> <a class="facebook" href="#"> <i class = "simgesi facebook simge-2x"> </ i> Facebook </ a> </ li><li> <a class="youtube" href="#"> <i class = "icon-youtube simge-2x"> </ i> Youtube </ a> </ li><li> <a class="google" href="#"> <i class = "icon-google-plus simge-2x"> </ i> Google </a> </ li> </ Ul>

• Kod içerisinde yer alan # işareti yerine menü başlıklarına ait linkleri ekleyecek olduğunuz yerlerdir.

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Aşağıdan Yorum ve Sorularınızı Bırakın...