Seo I Backlink I Blogger Temaları I Blog Eklentileri I Blog İpuçları: 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.

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!

Blogger {Hover} Efektli Kategoriler Eklentisi

Hover Efektli Kategoriler Eklentisi

Misafir Yazar Ol

-

Kategorilerimiz :)

Tavsiye Bağlantılar !

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

Bana Mesaj Gönderin !