Popüler bloglarda çok sık karşılaştığım bir şey bilgilendirme çubukları.Ziyaretçilere bir şey duyurmak istediğinizde dikkat çekici olduklarından dolayı bu çubuklar çok işe yarıyor.
Bu yazıda Blogger’a bu tarz bir bilgi çubuğunu nasıl ekleyeceğinizi anlattım.Resimde gördüğünüz çubuk blogunuzda sabit kalır ve sayfayı aşağı – yukarı kaydırsanız bile aynı yerde sabit kalır.Çubuğun diğer önemli özellikleri şeffaf ve istenildiğini an kapatılabilmesi.
Bu bilgilemndirme çubuğunu blogunuza eklemek için şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83IU57WgVkV1PEDzpeI3axiamhpn3xKjjYUJ8l5HrEmkJ_wwEeUmhSRQyczdsFX4K0HFKvqpa72PaLrAI9GRIwpyRsB8_AYb_uik5VPJl3JUiMG5pRiC7UiMvEWkUSpumj1BOELYFihtB/s1600/ut-bg.png') repeat;
color:#fff;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Kapatılabilir Bilgilendirme Çubuğu <a href='http://bloghocam.blogspot.com' target='_blank'>Blog Hocam</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
Düzenlemeniz gereken yerler:
- Kapatılabilir Bilgilendirme Çubuğu yazan yere kendi bilgi mesajınızı yazın.
- Blog Hocam yazan yere anchor texti yazın.Bu yazı ile istediğiniz sayfaya link vereceksiniz.
- http://bloghocam.blogspot.com yerine anchor texte tıklayınca açılmasını istediğiniz sayfanın adresini yazın.
){kind=link}
Yorumlar
Yorum Gönder