9 Ocak 2017 Pazartesi

CSS Animasyon İle Duyuru Buton-Popup Eklentisi

14 yorum
Başlıkta duyuru eklentisi desem de çok farklı amaçlarla kullanabileceğiniz etkileyici bir eklenti paylaşacağım.

Blogunuzun bir köşesinde yerleştireceğimiz ikona animasyon efekti vererek ziyaretçinin dikkatini çekmesini sağlayacağız. Ziyaretçi ikonu fark edip tıkladığında ise yine CSS efekti ile tam sayfa bir popup açılacak ve açılan popup ile istediğimiz mesajı ziyaretçiye iletebileceğiz.

CSS animasyon ile duyuru buton popup


Popuplara sıcak bakmadığınızı biliyorum, benim de hiç hoşlandığım bir şey değildir. Ancak bu eklentinin demo videosunu izlediğinizde veya bizzat denediğinizde göreceksiniz ki ziyaretçi rahatsız eden klasik popuplardan değil. Buyurun demo videoyu izleyin:



Eğer bu eklentiyi blogunuza eklemek isterseniz öncelikle şablonda </head> kodunu bulup, bunun hemen üzerine aşağıdaki kodları kopyalayıp yapıştırın:

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

Ardından şablonda </body> kodunu bulun ve hemen üzerine şu kodları ekleyin:

<img class='profile-idul tada' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='http://www.clipartkid.com/images/17/send-announcements-and-community-calendar-events-cynthia-to-info-YJKonN-clipart.jpg' title='Duyuru!' width='50'/>
<div class='idul_layout animated flip' id='id_fitri'>
  <div class='idul_message'>
   <h2>Merhaba!</h2>
    <p>Blog Hocam&#39;ı e-mail ile takip edenler kazanıyor.
      <br/><br/> Siz de Blog Hocam&#39;ın e-mail listeine kayıt olun, <b>kazanın!</b>
      </p>
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='
http://www.clipartkid.com/images/17/send-announcements-and-community-calendar-events-cynthia-to-info-YJKonN-clipart.jpg' width='200'/>
    <div class='close_idul' onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

Kodlarda değiştirilecek yerleri renkli olarak gösterdim.

  • Mavi renkli yerlere kullandığımız ikonun urlsi gelecek. Ben bu eklentiyi duyuru eklentisi olarak kullandığımdan ona uygun bir ikon seçmiştim. İsterseniz değiştirebilirsiniz.
  • Yeşil renkli yere açılan pencerede gözükecek mesajı yazıyoruz. Her türlü HTML etiketini kullanabilir, dilerseniz link, resim, video vs. ekleyebilirsiniz.
  • Kırmızı renkli yere ikonun üzerine gelince gözükecek metni yazıyoruz. Eğer siz de duyuru amaçlı kullanacaksanız değiştirmenize gerek yok.
Eğer eklentiyi kullanmaya başlarsanız lütfen yorum bölümünden hangi amaçla kullandığınızı yazın ki insanlara fikir verin.

İyi bloglar!

14 yorum:

  1. Harika olmuş ellerinize sağlık hocam.

    YanıtlaSil
  2. Hocam mobilde çalışıyor mu?

    YanıtlaSil
  3. Merhaba ben yayınladığım yazıların arasına adsense reklamı koymak istiyorum mümkün mü acaba?

    YanıtlaSil
  4. Google'un popup barındıran siteleri site sıralamasında geriye ittiğini duymuştum, fakat bu popup css den oluştuğu için bir etkisi olmaz sanırım. Paylaşım için teşekkürler.

    YanıtlaSil
  5. Her zamanki gibi güzel bir paylaşım olmuş. Teşekkürler...

    YanıtlaSil
  6. Blogu yavaşlatmaz ise gerçekten güzel bir eklenti. Tavsiye ederim.

    YanıtlaSil
  7. İyi günler. Doğru düzgün bir blogger forumu buldum nihayet. Ben sitemi mobilde ana ekrana ekle dediğim de ikon değil blogger'ın b si çıkıyor.

    YanıtlaSil
  8. Videoda biraz donma mevcut henüz denemedim ancak bu donma videoda mı var websitesine ekleyincede mi devam ediyor?

    YanıtlaSil
    Yanıtlar
    1. Kayıt esnasında bilgisayar yavaşladığı için videoda donma var ama site üzerinde çok hızlı çalışıyor.

      Sil
  9. www.klarnethane.com sitemizin açıklamasını sitenize nasıl misafir blogger olarak ekleyebiriz.

    YanıtlaSil
  10. Mehaba Hocam Ben https://bilginin-sirri.blogspot.com.tr/'nin yöneticisiyim acaba sitemi ziyaret edip sitem haakkında yorum atabilir misniz ayrıca ücretsiz olarak sitemi internette nasıl yayınlarım acill olarak siteme yazabilir misiniz cevabı

    YanıtlaSil
  11. CSS animasyonlara bayılırım göze çok hoş geliyor. Duyuru yapmak isteyenlerin işine yarayacak eklenti

    YanıtlaSil
  12. ben bu pop up un otomatik açılmasını istiyorum napacam

    YanıtlaSil
  13. ben tarihi bilgiler veren bir sitede kullanıyorum ve bu pop up u 18 mart gibi önemli günlerde kullanıyorum

    YanıtlaSil