Blogger İnfobar Oluşturmak

Adı üstünde infobar. Sayfanın alt bölümünde sayfa ile birlikte hareket eden bir bilgi çubuğu.
Dilerseniz rss linkinizi, isterseniz başka bir sitenizin linkini veya twitter linkinizi, kısacası aklınıza ne gelirse yazabilirsiniz. ( Eklentinin kaynağı. )

Yerleşim > html'yi düzenle > widget şablonlarını genişlet diyoruz.

Şablonumuzda ;

]]></b:skin>

kodunu buluyoruz ve hemen üstüne

#mta_bar {
background:#5495b7;
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/AVvXsEgNZwJ3IvyZs6YNQq3JwiqRvgEi0_pVa3kTGzgORzzgNMaGMogsnUZuIpeGDK8JI2lbPsyYlJg88n6ffLmCRkGmFTvWe47LuOnDJA10ViJzi5TQDd4PiYvcH3BwX-DtOVbbndRPn2EfNYU/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

kodlarını ekliyoruz.
Daha sonra;

</head>

kodunu buluyoruz ve hemen üstüne

<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>

kodlarını ekliyoruz.

Sonra ;

</body>

kodunu buluyoruz ve hemen altına

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://www.bloggerturkiye.org/' target='_blank'>Blogger Türkiye Kişisel Destek Blogu</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;www.bloggerturkiye.org&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgnBh_1eDSmisBIK3PjXDG6itogb0cjRvehmua2116zLwLyZGQGltdniM-C8F1xA4Hm7YNpHvCA1TFYYCt398pTYFNdLsQyvk-z-9RJPofKXyQS7fWFSLzutgrJUQia95MHIWoqZGALY/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

kodlarını ekliyoruz.

Çubuğa yazacaklarınızı yukarıda yazan kodlarını ekliyoruz yazısının hemen üstündeki kodları değiştirerek değiştirebilirsiniz.

İşlem bukadar. Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.