Blogunuzun En Altına Çoklu Gatget Ekleme

Bloggerda tema kullanan arkadaşlar özellikle tema sitelerinden indirdiği temaları bazen istediğiniz yerlerde gatget bulunmaması üzüyor diye düşünüyorum daha önceki yazımda sizlere Blogger Ek Gatget Ekleme şimdi bu yazımdada blogunuzun en alt satırlarına ekleyebileceğiniz 4 adet yeni gatget eklemeyi anlatacağım üstteki resimdede görmüş olduğunuz gibi yanyana 4 adet gatget bulunuyor.Benim diğer blog adresimdede bir demo örneğini gösteriyorum sizlere ,eklemesi basit olan bu eklentiyi sizde kendi blogunuza eklemek için aşağıdaki kodları blog temanızın html bölümüne uygulamanız yeterli olacaktır.

DEMO

Blogger Kumanda Paneli girin

İlk Başta Şablonumu Yedeklemeyi Unutmayalım.

Daha  sonra Şablon seçin

 HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile ]]></b:skin> kodunu bulun.

Şimdide aşağıdaki kodları bulduğunuz ]]></b:skin> kodunun üstüne yapıştırın.

/*----- Blogunuzun En Altına Çoklu Gatget Ekleme -----*/

#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
background:#333333; 
} 
#lower-wrapper { 
background:#333333; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 960px; 
border:0; 
} 
#lowerbar-wrapper { 
background:#333333; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 23%; 
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; 
}

HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile </body> kodunu bulun.

Şimdide aşağıdaki kodları bulduğunuz </body> kodunun üstüne yapıştırın.

<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>

1-Eklediğiniz gatgetin arka plan rengini değiştirmek için (background:#333333;) kodundaki html kodunu değiştirebilirsiniz.

2-İlk kod içersindeki ( width: 960px; ) ile gatget genişliği ayarlayabilirsiniz.

3-İlk kod içersinde yine ( width: 23%; ) gatget uzunluğu ayarlayabilirsiniz.

4- Burda diyelim ki size 4 adet gatget yetmiyor isterseniz bunu 5-6-7 kadar çıkarabilirsiniz daha fazla yazmadım çünkü abartılır diye düşündüm tabi yinede siz ne kadar eklemek isterseniz denersiniz.Evet ikinci kod içersindeki renkli olan kod yani

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

bu kod içersinde lowerbar4  bu koddaki 4 yerine 5 yapın lowerbar5 olsun,burda dikkat etmeniz gereken bu ekleyeceğiniz 5 gatget <div style='clear: both;'/> kodunun üstünde olsun.

http://www.bloggerturkey.com/2013/03/blogunuzun-en-altna-coklu-gatget-ekleme.html