Örnek görüntü;
Bu kısımda vereceğiniz reklam yada öneri linkleri tüm ziyaretçilerinizin muhakkak dikkatini çekecektir. Sayfada aşağı doğru hareketlerde dahi sabit kalarak her zaman göz önünde kalmaktadır. Şımarık bir çocuğun devamlı göz önünde olmak istemesi gibi.
Wordpress blogları için düzenlenmiş olan bu Şerit Reklam javascript desteği ile çalıştığı ve blogger'ında javascript'i desteklemesi ile blogger bloglar için kullanılabilirdir.
İlk olarak yapmanız gereken; Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile aşağıdaki kodu aratın;
]]>
Bulduğunuz bu kodun hemen yukarısına aşağıdaki kodu yapıştırın.
# mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }Ardından yine "Ctrl+F" yardımı ile allatki kodu bulun
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
bulduğunuz bu kodun hemen yukarısına alttaki kodu kopyalayıp yapıştırın;
Ardından temanızda kodunu bulunuz ve alttaki kodu kopyalayarak kodunun hemen yukarısına yapıştırınız.
Yukarıdaki kodda yapılması gereken değişiklikler;
Kırmızı ile renklendirilmiş olan kısımları kendi istediğiniz şekilde düzenleyiniz. İnternet adresi yazılı olna yere şerit reklama tıklandığında yönlendirilecek olan adresi, "Bu Şerit Reklamı Bloguma Nasıl Eklerim? Tıkla, Ögren!" kısmına ise istediğiniz bir yazıyı yazabilirsiniz.
Eğer şerit reklamın sayfanızın altında görüntülenmesini istiyorsanız alttaki kodu ilk adımda kullanılan kodun yerine kullanır ve 2. ve 3. adımlar yukarıda anlatıldığı gibi uygulanır;
#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1YMD2xl7fSolsz7XPa7twa6ZEOqCOgfJa9nChl7zyOXMMIzdY0EZsPdM-gJKGSp0Dn9Vw2OXYHwFQ09OsT-kTjAvWxrCBdee8KKDh1-yLa2RQTjFv5jgDAWidkwTCmcKBUsjVJVXApA/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
![[Resim: banualkan.jpg[]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sPhA9tr_mbzGGNh43AKMKSUvZ5xlrpL0in8VyVdFNVmE6FIllmRJ5q6g3XnXJ7tKpGb0Uhf_I7x7oy18EG8XWP67nAQYQlGEBXS-d-h3k96Q1wKDd2YqqOFRYs=s0-d)
