Güzel Bir Duyuru Eklentisi

Nerede gördüğümü hatırlamamakla birlikte güzel bir duyuru eklentisi görmüştüm 1-2 ay önce. Dedim bunu kullanmak isteyen olabilir. Diğerlerinden çok farklı bir kere. Yuvarlanan çok hoş bir eklenti esasında. Fare imleci ile üstüne geldiğinizde duyurulmak istenen ne ise o yazıyor, fare imlecini çektiğiniz anda ise kafasını içine sokan kaplumbağa misali olduğu yere geri dönüyor. Demosunu aşağıya ekleyeceğim. Dikkat ettiyseniz herhangi bir blog altyapısı söylemedim. Kodlar basit css kodlarından oluştuğu için bu eklentiyi Blogger’da da WordPress’de de veya başka sistemlerde de kullanabilirsiniz. Dilerseniz hemen kodlara geçelim:

Direk kodu veriyorum arkadaşlar. Bu kodu nereye eklemek isterseniz orada görünecektir. Kodlar bu haliyle sol tarafta gözükür. Siz bunu sağ tarafa almak isterseniz < -style-> bölümünde .divix‘deki left kodunu right yapabilirsiniz.

<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 Dünyalı !</b>
<br/>

Bu eklenti sizler için uzaydan gönderildi.

<br/>
Beğenmeniz umuduyla (uzaylı bir dost)



</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">Heyyy !</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>

Çalışmanın Demosu

Görüleceği gibi sadece kodlardan oluşan bu eklentiyi herhangi bir değişikliği yapacağınız zaman çeşitli blog alt yapılarınızda kullanabilirsiniz. Eğer kodları biraz incelerseniz tarayıcı uyumluluklarını da görebilirsiniz. Bir çok tarayıcı da test ettim sorunsuz çalışıyor. İnşallah hoşunuza gider ve faydalı olur. Şahsen benim hoşuma gitti ve sizlerle paylaşmak istedim. Bir sonraki yazımda görüşmek üzere, hoşçakalın.

Bu yazıdan önce yazmış olduğum "WordPress 'de Mini Blog Yapımı" başlıklı yazımı da okumanızı tavsiye ederim.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

13 yorum

  1. Enes Gündoğdu   •  

    Shortcodes eklentisini kurdum ama cidden işe yaramaz kodları yazınca arkaplan felan kayıyor bu işime baya bi yarar Abi sağol

  2. kralizasyon   •  

    Gerçekten güzelmiş abi. O karenin yuvarlanıp daireye dönüşmesi mükemmel, bayıldım!

  3. aerakman   •  

    Dün gece bir blog da görmüştüm aynısını. Hoşuma da gitmişti ama uğraşmak istemedim. Teşekkürler abi.

  4. Enes ILHAN   •     Yazar

    @Enes Gündoğdu,
    Önemli değil kardeşim güle güle kullan şimdiden.
    @kralizasyon,
    Evet ahmet bende çok bayıldım. En güzel chrome’da çalışıyor bu kodlar. Yarı yolda durması bana göre çok daha zevkli. O kutu tam açılmadan fareyi geri kaydır dediğimi anlarsın 🙂
    @aerakman,
    Rica ederim arda’cım. Css gerçekten güzel bir olay. Daha bilmediğim o kadar çok özellik var ki bunlarda devede kulak gibi bir şey.

  5. briket makinası   •  

    bilgi paylaşımı için teşekkürler

  6. Veysel   •  

    Çoğu sitede görmüştüm sürekli oyuncak gibi oynuyordum 😀 İşime çok yaradı teşekkürler abi 🙂

  7. Yenibilgi   •  

    Bende dün siteme yaptım yuvarladıkça alıp başını gidiyor güzel birşey .Can sıkıntısına iyi geliyor 🙂

  8. Süha Mete   •  

    Çok güzelmiş.Css in nimetleri çok fazla 😀 Paylaşım için teşekkürler 🙂

  9. Sky Han   •  

    Teşekkür ederimçok işime yaradı hocam

  10. hdizle   •  

    Merhaba,
    çok hoş kullanıyorum tşkkrlr işime yaradı.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir