Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Responsive Yan Yana Kategori Listesi Yapımı


FacebookTwitterPinterestTumblrYazdır


Blogger için Responsive Yan Yana Kategori Listesi YapımıBlogunuza giriş yaptığınızda, kategorilerinizin oldukça profesyonel ve dikkat çekici bir şekilde görüntülenmesini ister miydiniz? Dilerseniz, bu işlemi tamamen Responsive ve renkli bir şekilde yapabiliriz. Blogger için hazırladığımız kategori listesi eklentisi ile, sitenizin daha ilgi çekici bir görünüme sahip olmasını sağlayabilirsiniz. Aşağıdaki kodları temanızın HTML/JavaScript bölümüne eklemeniz ve kırmızı alanları kendinize göre değiştirmeniz yeterli olacaktır. Örnek bir kullanımı da, hemen en altta sizlerle paylaşıyor olacağız.

AYRICA: Blogger'da Sayfa Boyutunu Azaltmak için Harika Yöntem

Blogger için Responsive Yan Yana Kategori Listesi Yapımı

<style>
.bensayfa .bubir{background:#e94e77;border-right:2px solid #fff;border-bottom:2px solid #fff}
.bensayfa .buiki{background:#009688;border-right:2px solid #fff;border-bottom:2px solid #fff}
.bensayfa .buuc{background:#eb6841;border-right:2px solid #fff;border-bottom:2px solid #fff}
.bensayfa .budort{background:#6EBE27;border-right:2px solid #fff;border-bottom:2px solid #fff}
.bensayfa .bubes{background:#149A48;border-bottom:2px solid #fff}
.bensayfa .bualti{background:#086b75;border-right:2px solid #fff}
.bensayfa .buyedi{background:#288abb;border-right:2px solid #fff}
.bensayfa .busekiz{background:#863e86;border-right:2px solid #fff}
.bensayfa .budokuz{background:#938657;border-right:2px solid #fff}
.bensayfa .buon{background:#444444}
.bensayfa {
overflow: hidden
}
@media screen and (max-width:970px){
.bensayfa a{width:100%!important;float:none!important}
.bensayfa a{border:0!important}
}
.bensayfa a {line-height:1.7em;
float: left;font-weight:bold;
display: block;
color: #ffffff;box-sizing:border-box;
text-align: center;width:20%;font-size:15px;
padding:10px 10px
}
</style>
<div class="bensayfa">
<a class="bubir" href="#">Kategori 1</a>
<a class="buiki" href="#">Kategori 2</a>
<a class="buuc" href="#">Kategori 3</a>
<a class="budort" href="#">Kategori 4</a>
<a class="bubes" href="#">Kategori 5</a>
<a class="bualti" href="#">Kategori 6</a>
<a class="buyedi" href="#">Kategori 7</a>
<a class="busekiz" href="#">Kategori 8</a>
<a class="budokuz" href="#">Kategori 9</a>
<a class="buon" href="#">Kategori 10</a>
</div>

Örnek Görünüm

Blogger için Responsive Yan Yana Kategori Listesi Yapımı
  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.