Blogger Yuvarlanan Duyuru Eklentisi

Merhabalar, bugün çok şık bir eklentiyle daha karşınızdayım. Blogger yuvarlanan duyuru eklentisi css ile yazılmış olup blogger sayfanızın sol tarafında sabit durmaktadır. Fare ile üstüne gelindiğinde, kare olan duyuru eklentisi yuvarlanıp yazmış olduğunuz duyuruyu gösteriyor. Fareyi üstünden çektiğinizde ise tekrar eski haline geri dönüyor. Canlı görünüm olarak; şuan yan tarafta bulunan duyuru eklentisine bakabilirsiniz.

Blogger Yuvarlanan duyuru eklentisi ekleme

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz ve aşağıda ki kodu açılan sayfaya yapışırıyoruz.

Eklentideki arka plan rengini değiştirmek için kodun içerisinde bulunan  background-color:#e84343 kodunu bulup kırmızı olan renk kodunu istediğiniz bir renk koduyla değiştirebilirsiniz.

<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şgeldiniz!</b>
<br/>
Yayınlarımıza Yorum Yapmayı Unutmayın.! İyi Günler.!
<br/>
blogger.ahmetkilincarslan.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>