Blogger Temasının Alt Kısmına Gadget Alanı Eklemek

Genellikler temalarımızın en  alt kısmına alexa rank gibi eklentiler eklemek isteriz ancak bazı temaların alt kısmında kendinden gadget alanı bulunmaz. Bulduğumuz güzel temaları gadget alanı yok diye değiştirmemize gerek yok. Bunun çaresi mevcut. 


Şimdi nasıl yapılır onu anlatıyoruz.

İlk olarak; Yerleşim > Html'yi düzenle > Widget şablonlarını genişlet seçeneklerine tıklıyoruz.
Sonra Ctrl+F tuşlarını kullanıp arama kısmını açıyoruz ve orada aşağıdaki kodu arıyoruz.
]]></b:skin>
 Bulduğumuz kodun hemen üst kısmına gelecek şekilde aşağıdaki kodları yapıştırıyoruz.

#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;
}
Sıradaki işlem için tekrar arama kısmını açıyoruz ve alttaki kodu aratıyoruz.
</body>

 Bulduğumuz kodun tam üstüne gelecek şekilde aşağıdaki kodu yapıştırıyoruz.

<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>
 Sonrasında kaydediyoruz. Artık temamızın alt kısmında  gadget alanları mevcut.

NOT:   width: 32%; kısmındaki rakamları değiştirerek gadget alanlarının büyüklük-küçüklük oranlarını düzenleyebilirsiniz. Kodu Ctrl+F ile aratıp bulabilirsiniz.

Hiç yorum yok:

Yorum Gönder