Öncelikle infobar'ın ne olduğu ile ilgili fikri olmayan arkadaşlarımızın olmadığını varsayarak ; infobar , sayfanın alt kısmında sabit olarak duran ve sayfa ile birlikte kayan bilgi çubuğudur.
Bu bilgi çubuğunu kendi yaratıcılığımızı ve becerilerimizi kullanarak geliştirebiliriz.
Öncelikle eklentiden bir görüntü ;
Kurulum ;
Şablon > Html düzenle diyoruz ve ctrl+f yardımıyla aşağıdaki kodu buluyoruz.
]]></b:skin> ve hemen üstüne aşağıdaki kodları ekliyoruz.
#mta_bar {
background:#FF6600;
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://lh6.googleusercontent.com/bkVInn0RgUftxig0CBmJRkE81gb_QTlVRmzOvJz2ZGy9KJCTnAXkb6pZ42FT9SEA19r96ANy-bLSafQ=w1256-h777?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }
Daha sonra aşağıdaki kodu buluyoruz.
</head>
hemen üstüne aşağıdaki kodu ekliyoruz.
<script src="http://googledrive.com/host/0B2NrnLfIOfS7Sk41YWR4TkxBUG8/" type="text/javascript"/>
ve son olarak aşağıdaki kodu buluyoruz.
</body>
altına aşağıdaki kodu ekliyoruz.
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a rel="dofollow" href='http://bloggereklentideposu.blogspot.com.tr/' target='_blank'>Blogger Eklenti Paylaşım Bloğu</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='www.bloggereklentideposu.blogspot.com';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>
Kodlarımızı ekledikten hemen sonra gerekli yerleri değiştirelim.
Kodun üstünde bulunan kırmızı yerler kesin değişmesi gereken yerlerdir.
Aşağıdakiler ise isteğe bağlı değişebilen yerlerdir.
background:#FF6600; > arka plan rengi
border-top: 3px solid #6699ff; > üst ince çizgi kalınlığı ve rengi
width: 100%; > genişliği
#left_bar a {background: url > yazının yanındaki 24x25 icon linki
<img align= src > yandaki kapatma iconu linki
Mavi renkle işaretlediğim yerleri kendi bloğunuza göre değiştirip eklentiyi kullanmaya başlayabilirsiniz.Hayırlı olsun :)
Anahtar kelimeler : blogger infobar, blogger infobar kodu, blogger infobar eklemek, blogger sayfa altında sabit duran bar, blogger sayfa ile hareket eden sabir bar eklentisi
Eywvkardesim
YanıtlaSil