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şgeldin!</b>
<br/>
Yayınlarımıza Yorum Yapmayı Unutmayın.! İyi Bloglar.!
<br/>
Blogadınız.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>
Bütün işlemler bu kadar herkese kolay gelsin.background-color: #e84343 kodunu bulup kırmızı olan renk kodunu istediğiniz bir renk koduyla değiştirebilirsiniz.