Eylül 02, 2013

Blogger Yuvarlanan Duyuru Eklentisi

Blogger Eklentileri

Blogger Yuvarlanan Duyuru Eklentisi

Blogger eklentileri arasında bu konuya benzer paylaşmış olduğum bir diğer konu Blogger Duyuru Çubuğu Eklentisi
'idi. Yeni konumuzda kullanımı çok kolay ve basit olan bir eklentiyi blogumuzda uygulayacağız. Resimde gördüğünüz gibi blogunuzun sol tarafında yeralan bu duyuru eklentisi fare imleci ile "Piştt!" yazan kısmın üzerine gidince yazdığınız not-bilgi-uyarı ne ise o görünecek. İmleci uzaklaştırdığınızda duyuru üzgün bir şekilde içine kapanacak. :)

CSS ile hazırlanmış görünümü de güzel olan minik bir duyuru eklentisi. Üzerinde değişiklik yapabilirsiniz. Yazı rengi veya arka planında zevkinize göre yuvarlanan bir duyuru eklentisi tasarlayabilirsiniz. Kodu blogunuzun ŞABLONuna veya YENİ GADGET oluşturupo bölüme ekleyebilirsiniz.

<div class="yuvarlanan-duyuru eklentisi"><div class="divix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:#fff;background-color:#e84343;" class="duyuristan">
<span style="display:block;margin-left:40px;">

<b>Merhaba DOST!</b>
<br/>

Bu eklenti sizler için Bloglama Zamanı tarafından yazıldı.

<br/>
Beğenmeniz umuduyla



</span>
</div>
<style>.divix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;border:2px solid #ff9c9c;}</style>
<div class="duyurucaz">Pişt !</div></div></div><style>.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;}.duyurucaz{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.duyuristan{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;border:none;border-color:#ff9c9c;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divix:hover .duyurucaz{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divix:hover .duyuristan{background-color:#e84343;border:1px solid #ff9c9c;width:298px;height:78px;}div.yuvarlanan-duyuru{position:fixed;z-index:999999;}div.eklentisi{top:140px;left:0px;}</style><style type="text/css">div.yuvarlanan-duyuru{_position:absolute;}div.eklentisi{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>

Duyuru eklentisinde arkaplanı değiştirmeniz için: background-color:#e84343
Yazı rengini değiştirmeniz için: color:#fff kısımlarına yeni renkler deneyebilirsiniz.
Bu arada eğer renk kodlarını bilmiyorsanız size HTML Renk Kodu Bulucu'yu tavsiye ederim. Biraz CSS bilgisi ile tasarımı çok harika bir şekle getirebilirsiniz.

Not: Kod Enes İlhan'dan alnmıştır. Şimdilik bu kadar, kolay gelsin. İyi bloglamalar...

4 yorum :

Kodu nereden aldığımı belirttim.

Bu Sagda cikiyor Sola almam için ne yapmam lazım

@Adsız, left kısımları right yapmalısınız.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.