Blogger için ‘yeni’ kategori sistemi!

Herkese yeni bir blogger yazı dizisinden merhabalar! Bu sefer anlatacağım eklentiyi, bizzat kendim geliştirdim. Bir eklentiyi geliştirmek belki zor gibi gözükmeyebilir, fakat gerçekten belli bir çaba gerektiriyor. O yüzden lütfen, bu eklenti de dahil olmak üzere paylaşmış olduğum eklentileri blogunuzda paylaşırken lütfen kaynak olarak Teknobeyin‘i gösterirseniz sevinirim. Eklentiye Teknobeyin falan ekleyin demiyorum zaten, sadece blogunuzda paylaşırsanız kaynak gösterirseniz sevinirim. Herneyse, şimdi eklenti anlatımımıza geçelim. Bu sefer ki eklenti gerçekten çok hoş bir eklenti. Herkesin de bildiği gibi, blogger’ın kendi kategori sistemi var. Yan menüde, alt alta veyahut etiket bulutu şeklinde kategoriler oluşturabiliyorsunuz. Fakat anlatacağım eklenti, hem görsellik açısından güzel. Hem de kullanımı gerçekten çok basit, yani sizin yapmanız gereken tek şey; aşağıdaki adımları uygulamak.

Öncelike CSS kısmına aşağıdaki kodları ekleyelim;

/* Teknobeyin Farklı Kategori sistemi */
aside#sidebar1{float:left;padding:0 6px;width:102px;margin-left:-0.5em;margin-top:0.6em;}
aside#sidebar1 nav li a{background:#f2f2f2;border-bottom:1px solid #fff;display:block;font-size:11px;height:40px;padding:5px 10px 10px;}
aside#sidebar1 nav li a span{color:#666;display:block;font-size:10px;font-weight:400;}
aside#sidebar1 nav li a:hover{background:#eee;}
aside#sidebar1 nav li.khusus a{height:43.4px;}

Daha sonra ise, aşağıdaki kodları kod bölümümüze ekliyoruz;

<aside id="sidebar1">
<h3>Kategori (1)</h3>
<nav>
<ul>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
</ul>
</nav>
<h3>Kategori (2)</h3>
<nav>
<ul>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
<li><a href='http://www.blogunuzunadi.com/kategorinizin-adi'>Kategori <span>Kategoriyle ilgili açıklama</span></a></li>
</ul>
</nav>
</aside>

Not 1: Yukarıdaki yer alan CSS kodları vasıtası ile, kategori sistemini görsel açıdan istediğiniz gibi değiştirebilirsiniz.

Not 2: Yukarıda yer alan “Kategoriyle ilgili açıklama” kısmını fazla uzun yazdığınızda, açıklama kategori sisteminde yer alan kutucuklardan taşmaktadır. O yüzden açıklamayı ne kadar kısa tutarsanız, o daha iyi olur. Fakat uzun açıklamalar yazmak istiyorsanız, CSS kodları ile kutucukları büyülterek, açıklama kısmına daha fazla yer verebilirsiniz.

Herkese iyi bloglamalar.