20 Ocak 2012 Cuma

Blogunuza Kapatılabilir Bilgilendirme Çubuğu Ekleyin

16 yorum

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.


Blogger İçin Kapatılabilir Bilgilendirme Çubuğu

 

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(&#39;http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png&#39;) 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,&quot;Helvetica&quot;;
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:&quot;Arial&quot;; 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(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</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.

16 yorum:

  1. Teşekkürler, gerçekten blog sahipleri için yararlı bir bilgi.

    YanıtlaSil
  2. Aynı düşüncedeyim çok yararlı bir bilgi.

    YanıtlaSil
  3. Acil duyurular için çok güzel. Ayrıca çok dikkat çekici. Farklı amaçlar içinde kullanılabilir tabiki.

    YanıtlaSil
  4. Çok isime yarakacaktir. Hemen sitenizi favorilerimin arasina koydum. Çok tesekkürler bilgi için..

    YanıtlaSil
  5. hemen uyguladım çok da güzel oldu. paylaşımın için çok teşekkür ederim.

    YanıtlaSil
  6. Iyi bir yöntem yalniz ziyaretçiyi rahatsiz edebilir. Çogu sitede görüyorum insanin gözüne çárpacak nerdeyse! :-)

    YanıtlaSil
  7. yalnız arka plan rengini nasıl değiştirebiliriz.

    YanıtlaSil
  8. Arkaplanda renk kullanılmıyor.Şunu değiştirmelisiniz:
    http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png

    YanıtlaSil
  9. Paylaşımlarınız için teşk

    YanıtlaSil
  10. eklenti çok güzel, paylaşım için tşkler.. merak ediyorum bilgilendirme yazısını çoğaltıp, sırayla slayt şeklinde gösterebilirmiyiz ?

    YanıtlaSil
  11. Çok isime yaradi, benim kendim blogumda yapacagim. Güzel bilgi paylasimi olmus.. Ellerinize saglik

    YanıtlaSil
  12. Çok iyi oldu, çok teşekkürler. "Bilgilendirme çubuğu" diye sabit bir ismi de yok ki her yerde arayana kadar canım çıkmıştı:) Peki bu çubuğu alta değil de üste koyabilirmiyiz?

    YanıtlaSil
  13. Evet bende aynı soruyu merak ediyorum altta değil de üste koyabiliyormuyuz ?

    YanıtlaSil
  14. bu bilgilendirme çubuğunu nasıl kaldırabiliriz acaba? ben bloguma koymuştum ancak şimdi kaldıramıyorum.yardımcı olursanız çok sevinirim.Teşekkürler.

    YanıtlaSil
  15. @SeV OnU
    Eklediğiniz kodu silmeniz yeterli.

    YanıtlaSil
  16. Merhabalar
    Bu kodu da ekledim,arkaplan renginide değiştim.Sadece boyunu küçültemedim.Boyunu derken ,yükseklik değerini buldum da ,enini yapamadım.
    Emeginiz için teşekkür ederim.
    Blogum gittikçe güzelleşiyor.

    YanıtlaSil

Picardes

LİNKLER