Enes İLHAN\ Güzel Bir Duyuru Eklentisi

Wordpress 13 yorum 4.659 28 Nisan 2013

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.

Yorumlar ;

28 Nisan 2013 - 22:30:39

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

29 Nisan 2013 - 16:19:43

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

29 Nisan 2013 - 16:29:58

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.

30 Nisan 2013 - 23:48:06

@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.

briket makinası
1 Mayıs 2013 - 15:01:26

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

6 Mayıs 2013 - 10:29:33

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

27 Mayıs 2013 - 09:42:51

Güzel bir çalışma olmuş. 🙂

28 Mayıs 2013 - 01:32:26

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 🙂

Süha Mete
25 Temmuz 2013 - 13:54:08

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

8 Ağustos 2013 - 14:53:46

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

hdizle
16 Aralık 2013 - 15:33:13

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

21 Ağustos 2014 - 02:38:16

Merhaba resimde görülen kısımları kendi siteme nasıl uyarlayabilirim. Yardımcı olursanız çok memnun olurum.

http://www.geekpics.net/images/2014/08/21/YZl9H0.jpg

14 Mayıs 2015 - 00:22:25

Başarılı. Sağol…