Blogger Eklentileri Yuvarlanan Duyuru Eklentisi

 Blogger eklentileri olarak grafik açısından sık görünümlü blogunuza yakışacak bir duyuru eklentisi paylaşmak istiyorum.Blogger eklentileri paylaştıkça çoğalır diyorum ve sizlere her gün güncel eklentiler paylaşmaya çalışıyorum.İnşallah bu duyuru eklentisini beğenirsiniz.

duyuru eklentisi blogger eklentileri


Blogger Eklentileri Duyuru Eklentisi


*Grafik açısından kaba ve hoş görünümlü
*Sayfanızın sol tarafında sabit durur 
*Fare ile üstüne gelindiğinde kare duyuru eklentisi yuvarlanıp açılır
*Tek ren seçeneği var ama renk kodlarıyla oynayarak değiştirebilirsiniz.

Blogger Eklentileri Duyuru Eklentisini Nasıl Eklerim


Blogger >> Yerleşim >> Gadget Ekle >> Html/Javasicript yolunu takip ederek kodları yapıştırıyoruz ve kaydet deyip işlemi tamamlıyoruz.


Kodlar:



<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>Hoşgeldin!</b>
<br/>
Yayınlarımıza Yorum Yapmayı Unutmayın.! İyi Bloglar.!
<br/>
BlogKaynagi.blogspot.com


</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">DUYURU</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>



Arka plan rengini değiştirmek için background-color:#e84343 kırmızı ile belirtiğim yerdeki renk kodunu istediğiniz renk koduyla değiştiriyorsunuz.

Yorumlar