Blogger Footer Alanına Sütün Ekleme

Blogger mevcut temanızda yapılacak düzenlemelerin en başında footer alanı gelmektedir. Kimi zaman çok beğendiğiniz bir tema maalesef sade bir görünüm seçmesi dolayısıyla bu alana yer veremeyebiliyor. Ve siz de her şeyiyle beğendiğiniz temanızdan vazgeçmemek için blogger footer ekleme işleminiz yapmak istiyorsunuz. Peki bunu nasıl yapabilirsiniz?

Temaların son alanı genellikle 3 e bölünerek bir tasarım yapılmak istenir. Ben de böyle bir ihtiyacınız olacağınız tahmin ettiğim için 3 sütuna bölerek nasıl eklenir konusunda kodlar paylaşacağım.

Kodları eklemeyi 2 adımda gerçekleştireceğiz :

1- CSS kodları

/* ----- LOWER SECTION ----- */ 

#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333434; }

#lower-wrapper { margin:auto; padding: 20px 0px 20px 0px; width: 960px; } 

#lowerbar-wrapper { border:1px solid #DEDEDE; background:#fff; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 32%; text-align: justify; font-size:100%; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } 

.lowerbar {margin: 0; padding: 0;} 

.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 

.lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; color:#0084ce; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }

.lowerbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none; } 

.lowerbar li { margin: 0px 0px 2px 0px; padding: 0px 0px 1px 0px; border-bottom: 1px dotted #ccc; }

 

Yukarıdaki kodları blogger şablonunuz içerisinde aşağıdaki kodun üzerine eklemeniz gerekiyor

]]></b:skin>

2-Html Kodları

<div id='lower'>     <div id='lower-wrapper'>     <div id='lowerbar-wrapper'>     <b:section class='lowerbar' id='lowerbar1' preferred='yes'>     </b:section>     </div>     <div id='lowerbar-wrapper'>     <b:section class='lowerbar' id='lowerbar2' preferred='yes'>     </b:section>     </div>     <div id='lowerbar-wrapper'>     <b:section class='lowerbar' id='lowerbar3' preferred='yes'>     </b:section>     </div>     <div style='clear: both;'/>     </div> </div></>

Yukarıdaki kodları blogger şablonunuz içerisinde aşağıdaki kodun üzerine eklemeniz gerekiyor

</body>

Bu kodları ilgili yere eklediyseniz şimdi blogunuzun yerleşim bölümüne gelerek 3 ayrı kısmın oluştuğunu göreceksiniz. Şimdi ilgili yerlere eklentilerinizi ekleyebilirsiniz.