Blog sitelerinde bulunan kenar çubuğu sadece blog içeriğini destekleyen Widget'lar için kullanılmıyor, aynı zamanda 300x250 veya 125x125 reklam afiş gösteren self reklam alanı için de kullanılır. Adsense veya diğer alternatif reklam afişlerini de kenar çubuğunda kullanabilirsiniz.
Reklam kutusuna 300x250 ve 125x125 reklam afişlerini eklerken, reklam afişlerinin düzgün bir şekilde görünmesi gerekir. Mesela, reklam kutularınızın tamamı reklam pankartları ile doldurulmamış olsa da reklam kutularınız düzgün görünmelidir.
Bu yazımızda, CSS ve HTML kodlarını kullanarak basit ancak düzgün görünen bir reklam kutusu oluşturmayı paylaşacağız.
Tanıtım Reklamları İçin Reklam Kutusu Nasıl Oluşturulur?
Blog sitenizde bulunan kenar çubuğuna 300x250 ve 125x125 (4 adet) boyutlarında düzgün görünümlü basit bir reklam kutusu eklemek için aşağıdaki adımları takip edin.
Birinci adım: Aşağıdaki CSS kodlarını blogunuzun şablon editör sayfasında bulunan stil dosyası içerisine ekleyin.
CSS
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
.banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}
.banner_box:nth-child(1),.banner_box:nth-child(3){margin-right:16.6666666667px}
.banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px}
.banner_box a{position:relative;display:block;z-index:2}
.banner_box img{object-fit:cover}
.banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.banner_300{width:300px;height:250px;}
.banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;}
.banner_box_ads.box_widget{padding:0;}
.banner_300:before{content:"300x250";}
.clear{clear:both;}İkinci adım: Blogunuzun Yerleşim sayfasında bulunan kenar çubuğunda (Sidebar) bir HTML/JavaScript Widget oluşturun ve aşağıdaki HTML kodu Widget içerisine ekleyin.
HTML
<div class="banner_box_ads box_widget">
<div class="banner_box banner_300">
<!-- 300x250 banner alanı -->
<a href="#" target="_blank" rel="nofollow noopener" title="bağlantı metni">
<img src="#" alt="bağlantı başlığı" title="bağlantı başlığı" height="250" width="300"/></a>
</div>
<div class="clear"/>
</div>
<div class="banner_box_ads">
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="#" target="_blank" rel="nofollow noopener" title="Blog Metinlerini CSS ile Renklendirme">
<img src="#" alt="bağlantı başlığı" title="bağlantı başlığı" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="#" target="_blank" rel="nofollow noopener" title="bağlantı metni">
<img src="#" alt="bağlantı başlığı" title="bağlantı başlığı" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="#" target="_blank" rel="nofollow noopener" title="bağlantı metni">
<img src="#" alt="bağlantı başlığı" title="bağlantı başlığı" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="#" target="_blank" rel="nofollow noopener" title="bağlantı metni">
<img src="#" alt="bağlantı başlığı" title="bağlantı başlığı" height="125" width="125"/></a>
</div>
<div class="clear"/>
</div>Önemli Bilgiler;
Yukarıdaki HTML kod içerisin belirtilen yerleri kendi reklam kodunuza uygun olacak şekilde değiştirin. Değişiklik yapmanız gereken yerler;
- href="#": Reklam bağlantı kodunuzu ekleyin.
- src="#": Resim bağlantı kodunu ekleyin.
- alt="#": Resim metni.
- title="#": Bağlantı ve resim başlığı.
Bknz: Blogger Etiketler Widget'ı ile Etiket Sayfalarını Otomatik Numaralandırma
Bu yazımızda CSS ve HTML kodlarını kullanarak tanıtım reklamları için reklam kutusu oluşturmayı paylaştık. Yazımız ile ilgili görüş ve sorularınızı yorum formunu kullanarak bize iletebilirsiniz.
0 komentar: