Blogunuza Kapatılabilir Bilgilendirme Çubuğu Ekleyin

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 mühim ö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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEpIK5I0pMBgIDH7RanQ4FjPd3mcXSi-MlTQ36RwszqUsPrm83T-s9detScuUw_gSbhDFESzQPZkW4bNWIgTM7hG7sP6Pcu_mSvDtZG0HYZKCod9sU5hg3-4_yBAZvfC4ZK1KBB-GLCu6F/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'>Portakal Kabuğu</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.

- Portakal Kabuğu 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.

Paylaş

BLOG SEO , teknoloji

Melisa