Blogger Resimli Kategori

Blogger Resimli Kategori Kodu

1-Öncelikle ]]></b:skin> kodumuzu CTRL+F Yardımı ile buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz..

Kod:

#ustkatagori { width:945px ;margin: 10px 0 2px 0; height:60px; padding:0 0 0 13px; overflow:hidden; } #ustkatagori li { float:left; margin-top:-2px; height:60px; list-style: none; margin:0px; } #ustkatagori li:hover { background:#f2f2f2; } #ustkatagori li a, #ustkatagori li a.bir,#ustkatagori li a.iki#ustkatagori li a.uc,#ustkatagori li a.dort,#ustkatagori li a.bes,#ustkatagori li a.alti{ color:#6d6d6d; display:block; padding:12px 14px; height:36px; } #ustkatagori li a.bir:hover { color:#174e80; } #ustkatagori li a.iki:hover { color:#669a18; } #ustkatagori li a.uc:hover { color:#670871; } #ustkatagori li a.dort:hover { color:#bc0c0c; } #ustkatagori li a.bes:hover { color:#373737; } #ustkatagori li a.alti:hover { color:#c4006f; } #ustkatagori li a span.yazi { float:left; } #ustkatagori li a span.bir { font:16px Medium; } #ustkatagori li a span.iki { font:12px "Regular"; display:block; } .kenarlik { border: 1px solid #c0c0c0; } .alt2px { background:#fafafa; border: 1px solid #c0c0c0; border-bottom:1px solid #c0c0c0 !important; } .biconKaydir { margin: 0 7px 0 0; } .ustmb { height: 36px; width: 36px; display: block; float: left; background: url(https://lh6.googleusercontent.com/-Ocovk7Tj8IU/UaaaA0AgJaI/AAAAAAAAB_w/P2eA1VTGV8U/h78/ustkatagori.png) !important; } .ustmb1 { background-position: -2px -8px !important; } .ustmb2 { background-position: -42px -8px !important; } .ustmb3 { background-position: -76px -8px !important; } .ustmb4 { background-position: -117px -8px !important; } .ustmb5 { background-position: -155px -8px !important; } .ustmb6 { background-position: -189px -8px !important; }

2-Alttaki Kodu İstediğiniz Yere Yapıştırıyorusunuz.Menü Altıda Olabilir..

Kod

<ul class='kenarlik alt2px oval3pxUst' id='ustkatagori'><li style='opacity: 0.6;'><a class='bir' href='/search/label/Teknoloji'><span class='ustmb1 ustmb biconKaydir'/><span class='yazi'><span class='bir'>TEKNOLOJİ</span><span class='iki'>Güncel Teknoloji</span></span></a></li><li style='opacity: 0.6;'><a class='iki' href='/search/label/İnternet'><span class='ustmb2 ustmb biconKaydir'/><span class='yazi'><span class='bir'>İNTERNET</span><span class='iki'>İnternet Haberleri</span></span></a></li><li style='opacity: 0.6;'><a class='bes' href='/search/label/Duyurular'><span class='ustmb5 ustmb biconKaydir'/><span class='yazi'><span class='bir'>DUYURULAR</span><span class='iki'>Sitemizdeki Duyuru</span></span></a></li><li style='opacity: 0.6;'><a class='uc' href='/search/label/Genel'><span class='ustmb3 ustmb biconKaydir'/><span class='yazi'><span class='bir'>Genel</span><span class='iki'>Yazılarımız</span></span></a></li><li style='opacity: 0.6;'><a class='dort' href='/search/label/Blogger/'><span class='ustmb4 ustmb biconKaydir'/><span class='yazi'><span class='bir'>BLOGGER</span><span class='iki'>Eklenti - Tema</span></span></a></li><li style='opacity: 0.6;'><a class='alti' href='/search/label/WordPress/'><span class='ustmb6 ustmb biconKaydir'/><span class='yazi'><span class='bir'>WORDPRESS</span><span class='iki'>Eklenti - Tema</span></span></a></li></ul>