29 Mayıs 2009 Cuma

Blogger’da 125x125 Reklam Alanı Oluşturma

Blogunuza ek olarak nasıl B: section ekleyeceğinizi ve 125x125 reklam alanı oluşturmayı öğrenin!!

Birçoğumuz temalarda reklam alanları doğru düzgün yerleştirilmediği için çok sık tema değiştirmek zorunda kalıyoruz. Hatta öyle zaman geliyor ki sadece reklam alanları için tema değiştirmek zorunda kaldığımız oluyor. Bu yazımızda sizin de işinize yarayacağını düşündüğüm b: section yani reklam alanlarının (125x125) yerleşimini göreceğiz.

Blog Sidebar’a b:section eklemek:
1 : Blogger ---> Yerleşim ---> Html’yi Düzenle
2 : Temanız sağ sidebarda 2 kolonlu ise 125x125 reklam alanının bunu üzerine oluşturmak isteyebilirsiniz ki bizde bunu yapcağız.

clip_image001


Aşağıdaki kodu buluyoruz:

<div id='sidebar-right'> <b:section class='sidebar-right' id='sidebar-right' preferred='yes'>

Aşağıdaki kodu yukarıdaki kodun üzerine yapıştırıyoruz..

<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section></div>

Şu anda blogumuza b:section ekledik, şimdide b: section için CSS kodlarına ihtiyacımız var.

#sidebar2 {
float : right;
margin-left:4px; width : 415px; background:#ffffff;
font : 11px Verdana;
}
#sidebar2 .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;
text-align:center;padding-left: 18px;
font: 12px/34px "Georgia", Verdana;
text-transform: uppercase;
color: #ffffff;
background: url("http://i263.photobucket.com/..........................gif") repeat;font-weight:bold;
}
#sidebar2 a {
color: #969696;
font-size : 12px;
text-decoration : none;
}
#sidebar2 a:hover {
color: #969696;
text-decoration : none;
}
#sidebar2 ul {
border : medium none;
margin : 7px;
padding : 0;
}
#sidebar2 ul li {
list-style-type : none;
border-bottom : 1px dotted #87581f;
margin : 0;
background-position : 0% 100%;
padding-left : 8px;
padding-right : 10px;
line-height : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
#sidebar2 ul li a {
text-decoration: none; background: url(http://i263.photobucket.com/...................................gif) no-repeat; padding:0 0 0 12px;color: #87581f;
}

Yukarıda kırmızı ile yazılı yerleri kendi blogunuza uygun bir şekilde değiştirebilirsiniz.
Böylece başarılı bir şekilde blogumuza b: section ve CSS dolarını ekledik.

Yerleşim’e tıklıyoruz ve karşımızda sidebarın üzerinde yeni bir Gadget alanı oluştu. Bu alana 125x125 reklam alanı oluşturmak için HTML/ JAVASCRIPT ve aşağıdaki kodları kopyalıyoruz.

<div class="sidebar-ads">
<div class="sidebar-banner"><a href="#">
<img border="0" src="http://i263.photobucket.com/..................................jpg "/></a></div>
<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="http://i263.photobucket.com............................jpg" /></a></div>
<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="http://i263.photobucket.com/................................jpg" /></a></div>
<div class="clear"></div><p><a href="mailto:your email id" title="Reklam Alanı">Reklam Alanı</a></p>
</div>

Yukarıdaki kodu ekledikten sonra kaydediyoruz ve Html Düzenle’de aşağıdaki değişiklikleri yapıyoruz.

/* Sidebar - Ads */
.sidebar-ads {
float: left;
width: 410px;margin-left:5px;
margin-bottom: 5px;
}
.sidebar-banner {
padding: 5px;
float: left;
}
#sidebar2 p { background:url(http://i263.photobucket.com/...........................gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}

Ön izleme yapıyoruz ve bir sorun yoksa kaydediyoruz.

clip_image002

Evet başarılı bir şekilde sağ taraftaki sidebarın üzerine 3 adet 125x125 reklam alanı oluşturduk. Umarım faydalı olmuştur. Konuyla ilgili olarak herhangi bir sorun yaşarsanız bana Yardım Hattı’ndan ulaşabilirsiniz

1 yorum:

  1. Enter to my "1st FUNNY CONTEST" held at http://tinyurl.com/mf3pul . Winners will get a free 120*120 Adspot on my Blog for a period of 1 Month.

    SEO Status of this blog:

    1) Google PR #2
    2) Alexa Ranking: 180,185
    3) Backlinks: 5000+
    4) Daily Unique Visits: 250 - 350
    5) Daily Pageviews: 1000+

    YanıtlaSil