Öncelikle <head> kodunun altına şu linkimizi ekliyoruz. css iconlarımızı çağırması için
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>ikinci olarak arkadaşlar temamızda ]]></b:skin> burdaki kodu buluyoruz ve hemen üstüne font awasome iconlarımızın css kodunu ekliyoruz
.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;
}
Son olarak ise katagori alanını oluşmamız içingereken css kodlarını ekliyorun yine aynı şekilde ]]></b:skin> burdaki kodun üstüne
.shop-category-widget li a,
.category-widget li a,
.product-categories li a{
position: relative;
overflow: hidden;
display: block;
padding-left: 3px;
background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(231, 231, 231, 0.45) 140%);
box-shadow: 0px 0px 20px #F0F0F0 , 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
#HTML5 ul li {float: left;width: 45%;
padding-left: -10px
}
.shop-category-widget li a:hover,
.category-widget li a:hover,
.widget_nav_menu li a:hover,
.widget_nav_menu li.current-menu-item>a{
background-color: #fcfcfc;
color: #000;
}
.shop-category-widget li a:hover .styled-icon,
.category-widget li a:hover .styled-icon {
background-position: 0 100% !important;
transition: all 0.4s ease 0s;
}
En son olarak yerleşim bölgesinden gadget ekle diyip Html/Javascript olarak katagori alanlarını ekliyoruz. Yukardaki kodda #HTML5 yazan kısma siz gadget olarak eklediğinizde katagorilerin yanyana sıralnması için kullanıyoruz sizde HTML5 Olmaya bilir eklediğinizde onagöre değiştirirsiniz html1 olabilir 2 olabilir siz onagöre değişirsiniz.
<ul class="category-widget"> <li><a href="http://www.tolgagonul.net/"><span class="icon-stack"><i class=" icon-check-empty icon-stack-base"></i><i class=" icon-android icon-2x "></i></span> <span class="category-border">Android Haberler</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-android icon-2x"></i> <span class="category-border">Android Oyunlar</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-rocket icon-2x"></i> <span class="category-border">Android Uyg</span> </a></li><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-gamepad icon-2x"></i> <span class="category-border">Pc Oyunlar</span> </a></li><br /> <li><a href="http://www.tolgagonul.net/"><span class="icon-stack"><i class=" icon-check-empty icon-stack-base"></i><i class=" icon-bitcoin icon-2x "></i></span> <span class="category-border">Blogger Widget</span> </a></li><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-bitcoin icon-2x"></i> <span class="category-border">Blogger Temalar�±</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-html5 icon-2x"></i> <span class="category-border">Css ve Html</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-linux icon-2x"></i> <span class="category-border">CyanogenMod</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-film icon-2x"></i> <span class="category-border">Frangmanlar</span> </a></li><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-bullhorn icon-2x"></i> <span class="category-border">Genel Katagori</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-rss icon-2x"></i> <span class="category-border">G�¼ncel Haberler</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-code icon-2x"></i> <span class="category-border">Javascript</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-female icon-2x"></i> <span class="category-border">Kad�±nlar B�¶l�¼m�¼</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-group icon-2x"></i> <span class="category-border">Magazin</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-coffee icon-2x"></i> <span class="category-border">Moda ve G�¼zellik</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-list icon-2x"></i> <span class="category-border">Teknoloji ve Bilim</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-dribbble icon-2x"></i> <span class="category-border">Spor Haberleri</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-play icon-2x"></i> <span class="category-border">Videolar</span> </a></li><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-krw icon-2x"></i> <span class="category-border">Wordpress Tema</span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-cny icon-2x"></i> <span class="category-border">Arkeoloji </span> </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-twitter icon-2x"></i> <span class="category-border">Twitter</span> </a></li><br /><br /><br /><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-facebook icon-2x"></i> <span class="category-border">Facebook</span> </a></li><br /><br /><br /><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-youtube icon-2x"></i> <span class="category-border">Youtube</span> </a></li><br /><br /><br /> <li><a href="http://www.tolgagonul.net/"><i class=" icon-google-plus icon-2x"></i> <span class="category-border">Google</span> </a></li><br /><br /><br /><br /> </ul>
İconları değiştirmek içinse Burdaki adresten iconları değiştirebilirsiniz. iconlar şu şekildedir örnek olarak <i class=" icon-group icon-2x"></i> magazin iconu için kullandığım <i class=" icon-film icon-2x"></i> film iconu için kullandığım
Siz bu linkleri kendinize göre düzenliyip kullanabilirsiniz
0 yorum: