Blogger’da uğraşmadan kategori sistemli footer’iniz olsun!

Önceden aktif olarak Blogger kullandığım için, kendi blogger blogum için geliştirdiğim elbette bir çok tema ve eklenti mevcuttu. Fakat artık, Blogger için geliştirdiğim bütün eklentileri sizlerle paylaşmaya karar verdim. İşte, onlardan birisi de, blogger için yazdığım bir temam için geliştirmiş olduğum footer bölümü. Bu footer bölümünü paylaşmamın en temel sebebi ise, gerçekten neredeyse bir çok tema ile uyumlu bir footer olması. Hem sadelik açısından, hem degörsellik bakımından çok güzel olduğunu düşünmekteyim. O yüzden, bütün blogger kullanıcılarının da beğeneceğini düşünerek bu footer’ı sizlerle paylaşıyorum. Kaldı ki bu footer hakkında şunu söyleyebilirim, hem tarayıcılarla uyumlu hem de footer bölümünde güzel bir kategori sistemiyer alıyor. Bu yatay olarak yer alan kategori sistemine, blogunuzdaki kategorileri yazarak ziyaretçilerinizin kategorilerinize ulaşması açısından bir kolaylık sağlayabilirsiniz. Herneyse, kodlar aşağıda yer alıyor. Aşağıdaki adımları uygulayarak ve ilgili yerleri kendi blogunuza göre değiştirerek, bu güzel footer’ı kullanabilirsiniz!

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

/* Footer Ayarları */
#container-footer{clear:both;background: url('http://img409.imageshack.us/img409/2371/footerarkaplan.jpg');border-top:2px solid #555}
#footer{font-size:13px;color:#FFF;line-height:22px;margin:0 auto;width:90%}
#footer a:link, #footer a:visited{color:#888;}
#footer a:hover{text-decoration:none; color:#CCC;}
#footer .central-p{padding:0 20px;}
#footer h1{margin:10px 0 7px 0;font-size:18px;color:#f5f5f5;border-bottom:solid 2px #555;padding-bottom:6px;}
#footer-botton{padding:10px 0;border-top:1px solid #707070;margin-top:10px;font-size:12px;text-align:center;}
/* Footer için Kategori Sistemi Ayarları */
#nav-bar {background: url('http://img535.imageshack.us/img535/6864/menuarkaplan.gif');border-top:1px solid #ccc;}
#nav-bar-c,#nav-bar-d{margin: 0 auto;height:32px;clear:both;width:77.3%}
#nav-bar-d{background:none;}
#nav-bar-c a:link, #nav-bar-c a:visited,#nav-bar-d a:link, #nav-bar-d a:visited,
.nav-web,.nav-tech{background:url(http://img409.imageshack.us/img409/970/menuliste.jpg) ;float:left;color:#333;font-size:11px;height:32px;line-height:32px;border-right:1px solid #ccc;padding:0 10px;font-weight: bold;text-decoration:none;}
#nav-bar-d a:link,
#nav-bar-d a:visited{font-weight:normal;}
#nav-bar-c a:hover{text-decoration:none; color:#FF3300;}
#nav-bar-d a:hover{text-decoration:none; color:#FF3300;}
.nav-web, .nav-tech{  text-align:center; padding:0;}
/* Genişlik Ayarları */
div#genislik1{min-width:1250px}
div#genislikl2{min-width:1250px}

Daha sonra, blogumuzun footer kısmında yer alan kodları silerek, yeni footer kodlarımızı ekleyelim;

<div id='nav-bar'>
<div id="genislik1">
<div id='nav-bar-c'>
<span class='nav-web'></span>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
<a href='http://www.blogunuzunadi.com/kategorinizin-ismi'>Başlık</a>
</div>
</div>
</div>
<div id="genislik2">
<div id='container-footer'>
<div id='footer'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td style='padding-right:30px;' valign='top' width='33%'><h1>Başlık 1</h1>
Bu bölüme kendiniz hakkında, ziyaretçilerinizin bilgilenmesi
açısından bilgiler yazabilirsiniz. Örnek: Adınız gibi.
<div class='spacer'></div>
<ul>
<li><a href='http://www.blogger.com/profile/profil-numaraniz' rel='nofollow'>Blogger Profiliniz »</a></li>
<li><a href='http://twitter.com/isminiz' rel='nofollow'>Twitter Profiliniz »</a></li>
<li><a href='http://friendfeed.com/isminiz' rel='nofollow'>FriendFeed Profiliniz »</a></li>
<li><a href='http://facebook.com/isminiz'>Facebook Profiliniz »</a></li>
</ul>
<td class='central-p' valign='top' width='33%'>
<h1>Başlık 2</h1>
<ul>
Bu bölüme blogunuzun yayın hayatını, blogunuz ile ilgili içerik başlıkları, dolayısı ile blogunuz hakkında aklınıza gelen herşeyi yazabilirsiniz.
</ul>
<td style='padding-left:30px;' valign='top' width='33%'>
<h1>Başlık 3</h1>
<ul>
<li><a href='http://www.sitelinki.com/' rel='nofollow'>Site Linki »</a></li>
<li><a href='http://www.sitelinki.com/' rel='nofollow'>Site Linki »</a></li>
<li><a href='http://www.sitelinki.com/' rel='nofollow'>Site Linki »</a></li>
<li><a href='http://www.sitelinki.com/' rel='nofollow'>Site Linki »</a></li>
<li><a href='http://www.sitelinki.com/' rel='nofollow'>Site Linki »</a></li>
</ul>
<div class='spacer'></div>
<div class='powered-blogger'>Altyapı: <a href='http://www.blogger.com' rel='nofollow'>Blogger</a></div>
</td>
</tr>
</table>
<div id='footer-botton'>  &copy; Bu blog blogger altyapısı ile kurulmuştur. <a href='http://www.blogunuzunadi.com/' title='blogunuzun adı'>Blogunuzun adı</a>. (Blogunuzun sloganı...)
</div>
</div>
</div>
</div>