29 Mart 2017: Çarşamba
Gölge

Güzel Bir Duyuru Eklentisi

Wordpress 28 Nisan 2013 13 4.296  
Bu Kişisel Blog'da 551 kategori'de yazıya yazılmış adet değerli yorumlarınız bulunmaktadır..

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.

Enes ILHAN

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 Yapılmış

Bir Cevap Yazın

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