Blogger altına( footer) gadget alanı ekleme

Bir tema indirdim temayı yapan kendine özgü özelleştirmiş beğendiğim için yükledim baktımki en altta (footer) alanında gatget ekleme yeri yok. Kullandığım widgetler sağda toplandı onları biraz dağıtıp bloğumu daha güzel bir hale getirmek için çareler aramaya başladım. Çözümü blogger footer alanına yani alt kısma sütun eklemekte buldum.

Blogger' in kendi şablonlarında şablon+özellikler kısmından istediğiniz gatget alanını seçebiliyorsunuz. Fakat bu olanak indirdiğiniz hazır temalarda bazı şablonlarda footer alanında sütün yer almamaktadır. Blogunuzun alt kısmında sütün yoksa burada yazılanları uygulayarak ekleyebileceğiz.

BLOGGER FOOTER ALT KISMA GADGET 4 SÜTUNLU EKLEME

Adım 1: Blogger'a kullanıcı adınız ve şifrenizle giriş yapın ve temanızın bir yedeğini alın.
Adım 2: Yerleşim > HTML'yi Düzenle'ye tıklayın,  Widget Şablonlarını Genişlet  TIKLA üstte solda kutucuk. Ve "Ctrl+F" yardımı ile alttaki kodu aratın.


]]></b:skin>


Bulduğumuz kodun hemen üst kısmına aşağıdaki kodları ekliyoruz.


#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 950px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
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;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}



Şimdi yandaki kırmızıyla yazdığımız kodu buluyorsunuz </body> hemen bu kodun üst kısmına aşağıdaki kodları ekliyorsunuz.



<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 id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>



şimdi kaydedip tasarım bölümünden olmuşmu diye bakabilirsiniz ben denedim oldu.

Önemli bilgi: width: 32%; yazan yerde yüzde kısmındaki rakamları değiştire bilirsiniz.
Eklediğiniz gadget ekleme bölümleri temanıza sığmadıysa width: 32%; yazan yerdeki  32%;  rakam kısmını değiştirip bloğunuza uygun hale getirebilirsiniz

kodları aldığım kaynak: www.furkanozden.net

BLOGGER FOOTER ALT KISMA GADGET 3 SÜTUNLU EKLEME

Şimdi Footer alanımızı 3 parçaya bölelim ayıralım istediğimiz gadget bölümünü oluşturup istediğimiz widgeti ekliye bilelim.
İşleme başlamadan önce mutlaka temanızın yedeğini alın.

Yanlış birşeyler olursa eski temanıza dönmek isterseniz değişiklik yapmamış gibi eski temanıza dönebilirsiniz.

1.Adım :
Yerleşim > HTML'yi Düzenle'ye tıklayıp, Widget Şablonlarını Genişlet kutucuğunu işaretleyin Ctrl+F yardımı ile alttaki kodu bulalım


<b:section class='footer' id='footer'/>

Bulduğumuz kodu silip yerine aşağıdaki kodu yapıştıralım

NOT :Temanızda Footer alanı yoksa bu kodu bulamazsınız; öncelikle footer oluşturmak gerekecektir.
 Üstteki Kodu bulamayanlar </div> <!-- end content-wrapper --> kodunu aratıp ,bulduğu kodu silmeden altına aşağıdaki kodu yapıştırıp işleme devam edebilirler .
Bu kodda bende yok diyorsanız </body> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırabilirsiniz.]

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

</div>

Kodu ekledikten sonra önizleme yapıp temanızda sorun sorun yoksa devam edin ;

2.Adım :
Ctrl+F yardımı ile ]]></b:skin> kodunu bulalım ve hemen üstüne aşağıdaki ve son kodu yapıştıralım


#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Önizleme yapalım ve sorun yoksa şablonu kaydet ile işlemi bitirin.
Kırmızı renklerle yazılan % lik ifadeleri görmüşsünüzdür. Şablonunuzda alt kısımı 3 e böldüğümüzde ortadaki sütun %40 sağ ve sol daki sütün ise %30 luk yeri işgal edecektir.Bunu isteğinize göre ayarlayabilirsiniz.

Kodları aldığım kaynak: http://bloghaci.blogspot.com/

İlgili Aramalar: