Kategoriler: BloggerSiteniz İçin

Blogger için 4 sütunlu footer eklentisi

Blogger kullanıcılarının en çok aradığı eklenti budur herhalde 🙂 Banada bir arkadaş bu konuda yardımcı olur musun dedi 🙂 Bende sadece ona yardımcı olmaktan herkese yardımcı olamnın daha iyi olacağını düşündüm her zamanki gibi 🙂 Şimdi anlatmaya başlamadan önce bu yazının mantığı widget alanı açmaya dayanır onun içinde ayrı bir yazım vardı isterseniz bu bağlantıya tıklayarak gözatabilirsiniz.

Biz mevzuya gelelim, blogumuza 4 sütunlu footer alanı ekleyeceğiz, öncelikle temamızın yedeğini alıyoruz ki teknoloji bize artistik yaparsa geri yükleme şansımız olsun 🙂 Bu işi yapmak için Tasarım » HTML’yi Düzenle kısmından temayı düzenleyeceğimiz yere giriyoruz. Aşağıdaki kodu buluyoruz.

]]></b:skin>

Ve bulduğumuz kodun üstünde yani öncesine 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: 24%;
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 ;
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 bunu ekleyerek lowerbar, lower gibi terimlerin ne anlama geldiğini açıkladık, bir anlamda tanıttık. Daha sonra

</body>

kodunu bulup öncesine aşağıdaki kodları ekliyoruz. İllaki yukardaki kodun öncesine eklemeniz gerekmez temanızda uygun gördüğünüz bir div vardır onun arasına eklersiniz, seçim size kalmış 🙂 Ben sadece gerekli kodları ve nasıl ekleyeceğinizi anlatıyorum. Yukardaki kodu bulduk, onun öncesine aşağıdaki kodları ekliyoruz.

<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 bu yukardaki kodla şunu yaptık hani lower, lowerbar diye tanıttığımız kodlar var ya heh işte onları burada kullanarak Gadget Alanı ekleme kısmı yaptık, hani yazının en başında bu bağlantıya tıklayarak gözatabilirsiniz. demiştim. Tamam buradan sonra yapacağınız tek şey Tasarım » Sayfa Öğeleri kısmından istediğimiz Gadget’ı eklediğimiz alana eklemek 🙂 Hayırlısı olsun, kalın sağlıcakla.

Furkan Özden @frknzdn

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

Paylaş
Yazar
Furkan Özden @frknzdn
Etiketler: Blogger Eklentileri

Son Gönderiler

The Conjuring Evreni Filmleri Hangi Sırayla İzlenmeli?

Conjuring ve Annabelle filmleri iki farklı sırada izlenebilir. Annabelle Comes Home'un vizyona girmesiyle birlikte The Conjuring evreni toplamda yedi filme…

18 saat önce

Oyuncu Kulaklığı Sektörü

Oyun dünyasındaki gelişimi birçok sektöründe yakından takibinde ve bu alana yönelmesinde öncü olmuş durumda. Günümüzde birçok markanın bilgisayarlarını bu alanda…

2 hafta önce

Zombieland 2’den Önce Hatırlamanız Gereken En Önemli 10 Şey

Ölüler ayağa kalktığında eskileri hatırlamak önemlidir! Bu listede uzun zamandır beklenen devam filmi ile ilgili temel gerçekleri ve temel bilgileri…

2 hafta önce

Windows’u Etkinleştir Yazısı Kaldırma İşlemi Nasıl Yapılır?

"Windows'u Etkinleştir" yazısını kaldırmak için internette birçok yöntem mevcut. Çoğunluğunda da Windows'u Etkinleştir yazısı kaldırma işlemi için kayıt defteri düzenlenmesi…

3 hafta önce

GRID (2019) Oyun İncelemesi

Bu incelemeye başlamadan önce size şu üç türün amacını hatırlatmanın önemli olduğunu düşünüyorum: Arcade: Bu oyunların amacı kısa sürede oyuncuyu…

4 hafta önce

WordPress’e Yeni Başlayanların Yaptığı 6 Hata

  WordPress bir CMS (içerik yönetim sistemi) olarak ilk web sitelerine yeni başlayanlar için mükemmeldir. Kullanıcıların kod yazmasını gerektirmez. SEO…

1 ay önce