Blogger Açılır Duyuru Eklentisi

Blog okuyucularımızın bazı noktalarda dikkatini çekmemiz gerekir. Bunun içinde okuyucularımızın dikkatini çekecek yöntemler kullanmalıyız. Uyarı yada duyuru alanı bunun için ideal bir yöntemdir. Sayfamıza ekleyeceğimiz bir uyarı yada duyuru paneli içinde okuyucularımıza iletmek istediğimiz bilgi yada dikkatlerini çekmek istediğimiz konuyu onlara rahatlıkla iletebiliriz.

Blogger duyuru eklentimiz sayfamızda sabit duruyor ve fare ile üzerine gelindiğinde yana doğru dönerek açılıyor. Bu açılma efekti eklentimize çok şık bir hava katmış.

Blogger duyuru eklentimizi blogumuza eklemek için;

Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek karşımıza çıkan kod düzenleyici içersinde CTRL+F tuşları ile </body> kodunu aratıp bulduktan sonra hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<style>.divix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.duyurucaz{text-decoration:none !important;text-align:center;line-height:80px;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:#00467F;border:2px solid #ccc;}</style>
<div class='duyurucaz'>DUYURU</div></div></div><style>
.duyurucaz{text-decoration:none !important;
text-align:center;
line-height:80px;
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:#00467F;}
.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); -moz-transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-border-radius: 40px;border-radius: 40px;}
.divix:hover .duyuristan{background-color:#00467F;
border:1px solid #ccc;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+&quot;px&quot;) );}
</style>
<div class='yuvarlanan-duyuru eklentisi'><div class='divix'>
<div class='duyuristan' style='position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal; font-size:13px;color:#fff;background-color:#00467F;'>
<span style='display:block;margin-left:40px;'>
<b>Hoşgeldiniz.</b>
<br/>
Soru ve Görüşlerinizi <a href='http://xtreal.blogspot.com/p/iletisim.html'>İletişim</a> sayfasından mesaj atarak iletebilirsiniz.<br/>
Yazılar ile ilgili sorularınızı yorum kısmından da sorabilirsiniz. </span>
</div>

Blogger duyuru eklentisini Önizlemek için tıklayınız.

Kodlarımız arasında düzenlememiz gereken yerler ise;

Kırmızı ile yazılan yere okuyucunuzun dikkatini çekip onlar için önemli bir bilginin bulunduğunu yazacağınız alan.

Mavi ile yazılan yerler ise duyuru panelimiz açıldığında görülecek olan yazılardır.

Yeşil ile yazılan yer ise blogger duyuru eklentimizin arkaplan rengi bunu sitenize uygun bir renk ile değiştirebilirsiniz.