Neobux / Katılın- Kazanın

Fikirlerini Paylaş, Sen de Kazanmaya Başla!

Translate

20120915

Blogger için “Açılır – Kapanır Reklam Navbarı”


Sadece link vermek icin bir reklem Navbarı yapmak ister misiniz?
Bu sayfanın en ustunde ornek amaclı bir tane kendim icin yaptım.
Gordugunuz gibi bu Navbarı kendi sitenizin reklamı icin de kullanabilirsiniz.
Herhangi bir yayınınıza yonlendirebilirsiniz.
Navbarın renk kodlarını da kendi sitenizin renk kodlarıyla degistirebilirsiniz.
Bunun icin lutfen asagıdaki yolu takip edin.



Tasarım > Sayfa Ögeleri > HTML’yi Düzenle kısmına giriş yapıyoruz.
(Ctrl+F ile kodları buluyoruz )

]]></b:skin>

Aşağıdaki kodu da, yukarıdaki koddan önce ekliyoruz;

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
top: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 {
text-decoration: none;
color: #fff;
padding:5px 0px 5px 30px;
}
#left_bar a:hover {
text-decoration: underline;
color: #fff;
}



Daha sonra ise, aşağıdaki kodu buluyoruz;


</head>


Ve aşağıdaki kodları, yukarıdaki koddan önce ekliyoruz;

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>
</script>



 Son olarak, aşağıdaki kodu buluyoruz;

</body>

Ve aşağıdaki kodları da, yukarıdaki koddan önce ekliyoruz;


<div id='mta_bar'>
<div id='left_bar'>
<span class='left'>
<a href='reklamlink' target='_blank'>Reklam Link İle İlgili Yazı</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blogunuzunadi.blogspot.com&apos;;return true;'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?imgmax=800' style='cursor:hand;cursor:pointer;'/>
</span>
</div>

Not: Yukarıda yer alan kırmızı yerleri kendinize göre değiştirmeyi unutmayınız.


Hiç yorum yok:

Yorum Gönder

Not: Yalnızca bu blogun üyesi yorum gönderebilir.