Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger'da 125x125 reklam alanları oluşturmak


FacebookTwitterPinterestTumblrYazdır


Uzun bir süredir Blogger derslerimize ara vermiş idim. Bu ara verişimin en temel sebebi, diğer kategorilerimizin de güncellenmeye ihtiyacı olması idi. Fakat artık eskisi gibi en güncel ve en güzel blogger dersleri ile karşınızda olacağım. Herneyse, blogger derslerimizin bu bölümünde 125'e 125 reklam alanları oluşturacağız. Esasında bu reklam alanlarını oluşturmak oldukça basit. Fakat maalesef ki reklam kodlarının çoğunda temaya uyumsuzluk, taşma vs. gibi durumlar olduğu için bu dersimizde anlatacağım eklenti ile bu problemleri aşmış olacağız. Ki eklentiyi denediğim süre zarfında herhangi bir şekilde taşma veya tema ile uyumsuzluk ile karşılaşmadım. Umarım siz de eklentiyi kurarken bir problem ile karşılaşmazsınız diyerek dersimize geçiş yapıyoruz.

Blogunuzun HTML'yi Düzenle bölümüne giriş yaparak, CSS kısmına aşağıdaki kodları ekleyiniz;

.banners {
background:#F5F4F0 url(http://i54.tinypic.com/282g70j.jpg);
border:#DDD 1px solid;
margin:10px 0 10px;
padding:15px 0 9px 10px;
}
.banners img {
padding:2px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:2px solid #ccc;
border-bottom:1px solid #ccc;
}

Daha sonra ise Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle adlı bölüme aşağıdaki kodları ekliyoruz;

<div class='sidebox banners'>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<br clear='all'/>
</div>

Yukarıdaki kırmızı yerleri kendinize göre değiştirmeyi unutmayın arkadaşlar. Reklam linki yazan yere ilgili reklamın linkini, kırmızı reklam resmi yerine de reklam resmini ekleyebilirsiniz.

Not: Kodları ekleyeceğiniz bölümün 125'e 125 reklam alanları ile uyumlu olması gerekmektedir. Aksi taktirde taşma gibi problemler olasıdır. Ayrıca CSS kodları kendime göre düzenledim. Eğer isterseniz arkaplan, kenarlıklar vs. gibi CSS kodlarını da düzenleyebilirsiniz.


    • By İzocin
    • 21 Ağustos 2011, 12:52

    Güzel anlatım hocam, elinize sağlık :)

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yukarı Çık