Blogger {Hover} Efektli Kategoriler Eklentisi

Hover Efektli Kategoriler Eklentisi

Bugün ki paylaşımımız hover efektli muhteşem kategoriler eklentisi olacak.Şahsen benimde kullanmış olduğum bu hover efektli kategoriler eklentisini gerçekten çok seveceksiniz.Renkli görünümü ve hover efektleri ile sitenize hava katacak olan bu eklentiyi çok fazla uzatmadan sizlere sunmak isterim.

İlk önce yapmanız gereken <head> kodunu bultuktan sonra hemen altına aşağıdaki kodu eklemek.

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

Sonrasında ]]></b:skin> kodunu bulup hemen üstüne aşağıdaki kodu eklemek

.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--sesuaikan sebagai tambahan--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Yine aynı işlemi tekrarlayıp ]]></b:skin> kodunun üzerine aşağıdaki kodları ekliyoruz.

#HTML5 ul li {float: left;width: 48%;
padding-left: -10px
 
}


ul.form {
  position:relative;
  background:#fff;
  width:350px;
  margin:auto;
  padding:0;
  list-style: none;
  overflow: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;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  text-transform:uppercase;
  font-size:11px;
  
  
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  transition:all 0.2s linear;   
 }



  .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;
    color:#fff;
    background:#008747;

 }

 .form li a.Android2:hover {
   border-left:3px solid #fecf54;
    color:#fff;
    background:#fecf54;

 }
  
 .form li a.And3:hover {
   border-left:3px solid #96908F;
    color:#fff;
    background:#96908F;

 }

 .form li a.Bilgi:hover {
   border-left:3px solid #EE715F;
    color:#fff;
    background:#EE715F;

 }
 .form li a.Blog:hover {
   border-left:3px solid #C4D96B;
    color:#fff;
    background:#C4D96B;

 }
 .form li a.Blog1:hover {
   border-left:3px solid #D082CF;
    color:#fff;
    background:#D082CF;

 }
 
 .form li a.Css:hover {
   border-left:3px solid #00ACEE;
    color:#fff;
    background:#00ACEE;

 }
 .form li a.Mod:hover {
   border-left:3px solid #ff9900;
    color:#fff;
    background:#ff9900;

 }
 .form li a.Güncel:hover {
   border-left:3px solid #cc9900;
    color:#fff;
    background:#cc9900;

 }
 .form li a.Genel:hover {
   border-left:3px solid #00445f;
    color:#fff;
    background:#00445f;

 }
 .form li a.Frang:hover {
   border-left:3px solid #7454AA;
    color:#fff;
    background:#7454AA;


 }
 .form li a.java:hover {
   border-left:3px solid #cc3f3f;
    color:#fff;
    background:#cc3f3f;

 }
 .form li a.women:hover {
   border-left:3px solid #FF4B45;
    color:#fff;
    background:#FF4B45;

 }
 .form li a.Magazin:hover {
   border-left:3px solid #ff8000;
    color:#fff;
    background:#ff8000;

 }
 .form li a.spor:hover {
   border-left:3px solid #6B8E23;
    color:#fff;
    background:#6B8E23;

 }
 .form li a.youtube:hover {
   border-left:3px solid #808080;
    color:#fff;
    background:#808080;
 }
 .form li a.google:hover {
   border-left:3px solid #DD5136;
    color:#fff;
    background:#DD5136;

 }
 .form li a.facebook:hover {
   border-left:3px solid #405D9B;
    color:#fff;
    background:#405D9B;

 }
 .form li a.twitter:hover {
   border-left:3px solid #87CEEB;
    color:#fff;
    background:#87CEEB;

 }

 .form li a.video:hover {
   border-left:3px solid #5F9EA0;
    color:#fff;
    background:#5F9EA0;

 }
 .form li a.arkeoloji:hover {
   border-left:3px solid #FE6E4C;
    color:#fff;
    background:#FE6E4C;

 }
 .form li a.Bilim:hover {
   border-left:3px solid #00ACEE;
    color:#fff;
    background:#00ACEE;

 }
 .form li a.word:hover {
   border-left:3px solid #21759B;
    color:#fff;
    background:#21759B;

 }
 .form li a.moda:hover {
   border-left:3px solid #F52887;
    color:#fff;
    background:#F52887;

 }

 .form li:first-child a:hover, .form li:first-child a {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

 .form li:last-child a:hover, .form li:last-child a {
  -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;

 }

 
 .form i {
  margin-right:3px;
  
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  transition:all 0.2s linear; 
 }

Son olarak ise Javascript kodlarını eklemek kaldı.Yerleşim html javascript bölümüne bu kodu yapıştırmanız yeterli olacaktır.

<ul class="form">
<li><a class="And3" href="http://birsorumolacak.blogspot.com.tr/search/label/google%20optimizasyonu?max-results=8"><i class=" icon-trophy icon-2x"></i>Google Optimizasyon</a></li>
<li><a class="Blog" href="http://birsorumolacak.blogspot.com.tr/search/label/blogger%20eklentileri?max-results=6"><i class=" icon-bitcoin icon-2x "></i>Blogger Eklentileri</a></li>
<li><a class="Blog1" href="http://birsorumolacak.blogspot.com.tr/search/label/blogger%20temalar%C4%B1?max-results=8"><i class=" icon-leaf icon-2x"></i>Blogger Temaları </a></li>
<li><a class="Mod" href="http://birsorumolacak.blogspot.com.tr/search/label/seo?max-results=8"><i class=" icon-linux icon-2x"></i>Seo Optimizasyon</a></li>
<li><a class="java" href="http://bisorunumvar.blogspot.com.tr/p/buraya-sectiginiz-html-kodunu-yapstrn.html"><i class=" icon-code icon-2x"></i>Kod Deneme Editörü</a></li>
<li><a class="arkeoloji" href="http://birsorumolacak.blogspot.com.tr/search/label/backlink?max-results=8"><i class=" icon-cny icon-2x"></i>Backlink Kaynakları</a></li>
<li><a class="twitter" href="http://birsorumolacak.blogspot.com.tr/"><i class=" icon-twitter icon-2x"></i>Twitter</a></li>
<li><a class="facebook" href="http://birsorumolacak.blogspot.com.tr/"><i class=" icon-facebook  icon-2x"></i>Facebook</a></li>
<li><a class="youtube" href="http://birsorumolacak.blogspot.com.tr/"><i class=" icon-youtube icon-2x"></i>Youtube</a></li>
<li><a class="google" href="http://birsorumolacak.blogspot.com.tr/"><i class=" icon-google-plus icon-2x"></i>Google</a></li>
</ul>

İşte bu kadar mükemmel bir kategori eklentiniz oldu.İsterseniz iconlarını değiştirebilir ve kategorileri çoğaltabilirsiniz.Yapamadığınız bir yer olursa yorum yapmanız yeterlidir.

4 yorum :

Unknown14 Ocak 2015 15:21
Blogları sürekli canlı tıtmak lazım.Özgün yazmak lazım.Bir blogger ın halinden başka bir blogger anlar inşallah emeğininizin karşılığını alırsınız.Seo ile ilgili yazılarınızı takip ederim sürekli. Başarılar dilerim Benim Bloğum http://www.okuruz.net bir inceler yorum yaparsanız sevinirim
YanıtlaSil
Yanıtlar
mnm14 Ocak 2015 15:24
Teşekkür ederim kardeşim inş.Hepimiz emeğimizin karşılığını alırız.:D
YanıtlaSil
Yanıtlar
Fikrat15 Ocak 2015 11:10
Başarılar dilerim :)

http://fikirizm.blogspot.com/
YanıtlaSil
Yanıtlar
mnm15 Ocak 2015 11:14
Eyw.Kardeşim saol
YanıtlaSil
Yanıtlar

Yorum ekle

Soru ve Yorumlarınızı Bize Yazın

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!

Blogger {Hover} Efektli Kategoriler Eklentisi

Hover Efektli Kategoriler Eklentisi

4 yorum :

Misafir Yazar Ol

-

Kategorilerimiz :)

Tavsiye Bağlantılar !

Sizin İçin Hazırladığımız Sayfalar !

Bana Mesaj Gönderin !