Blogger Animasyonlu 32 Farklı Modal ve İpucu Kutusu

Blogger Animasyonlu 32 Farklı Modal ve İpucu Kutusu - Blog kullanıcıları için bu yazımızda Blogger sitelerine modal ekleme ve kullanımı ile ilgili bilgiler paylaşacağım. Blogger ve web tasarımında modal ve modeless kutuları, blog veya web sayfası kullanıcıları için en etkili tasarım öğelerinden biridir. Şimdi, blogcular için modal kutuyu tanımlayacağız, daha sonra bu kutuların blog sitelerinde kullanmanın en iyi yollarına bakacağız ve blogunuz ile ilgili projelerinizde modal komut dosyalarını kullanmak için buradaki önerilerden faydalanabileceksiniz.

Modal Kutu Nedir?

Basitçe söylemek gerekirse, modal kutular web sayfalarında küçük bir öğenin veya sekmenin üzerine entegre etmemizi sağlayan bir komut dosyası efekti kullanımıdır. Modal kutuların yararı, konvansiyonel açılır menü pencerelerinin sayfaların yüklenmesine gerek duyulmadan kullanılmasıdır. Diyalog pencereleri, ziyaret edilen sayfalarda kullanıcılara bilgileri hızla göstermek ve böylece site ve  sayfaların kullanılabilirliğini artırmak ve gereksiz sayfa yüklemeleri azaltmak için bir araçtır.

Modal kutular Microsoft Windows, Mac OS ve UNIX gibi arayüz uygulamalarında kullanılıyordu. Günümüzde ise web sitelerden mobil uygulamalara kadar yayılmış durumda. Modal kutuların yaygın olarak kullanıldığı beş durum kategorisi vardır:

• Hata: Kullanıcıları bir hatayla uyarmak için.
• Uyarı: Kullanıcıları potansiyel olarak zararlı durumlarda uyarmak için.
• Veri: Kullanıcılardan veri toplamak.
• Onayla veya İste: Kullanıcılara geçmeden önce bir şeyler yapmalarını hatırlatma.
• Yardımcı: Kullanıcıları önemli bir durumda bilgilendirmek.

Şimdi, modal bir kutunun ne olduğunu bildiğimize göre modal ve  modeless (modsuz) arasındaki farkı inceleyelim.

Modal ve Modeless Arasındaki Fark

Modal kutular, kullanıcılar tarafından aktif edildikten sonra üst pencereyle çalışmasına izin vermez ve devam edebilmesi için modal kutusunu kapatmalıdır. Modeless (modsuz) kutular ise aktif edildikten sonra kullanıcıların üst pencereye erişmesine izin verir ve bu kutuları kapatmadan da web sayfalarında gezinmeye devam edebilirsiniz.

Grafiksel kullanıcı arabirimi tasarımında, modal (modsal) pencerelere alt pencere denir ve kullanıcılar için bazı durumlarda işleselliğinin artırılması amaçlanmıştır. Modal bir kutu, kullanımı bakımından rahatsız edici bir durum sergilemez.

Modeless (modsuz) tasarım öğeleri aşağıdakileri içerebilir:

• Araç Çubukları
• Akordeon Menüleri
• Sosyal medya rıhtımı
• Gelişmiş Arama Menüler

Modeless (modsuz) kutular, bazı durumlarda iyi bir analoji için fayda sağlayacağını da unutmayalım.

Blog Sitesine Modal ve İpucu Kutusu Nasıl Eklenir?

Blog sitesine modal eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Aşağıdaki kodları blogunuza ekledikten sonra devam eden açıklamaları okumaya devam edin.

1- Blogunuzun şablon kodları arasında bulunan kodunu CTRL+F yardımı ile </head> kodunu bulun ve aşağıdaki CSS kodunu </head> kodunun bir satır üzerine ekleyin.

<link rel='stylesheet prefetch' href='https://rawgit.com/jquerycods/css/master/modal.min.css'/>

2- Aşağıdaki javaScript kodlarını blogunuzun şablon kodları sayfasının alt tarafında bulunan </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script src='https://rawgit.com/jquerycods/jquery/master/jquery-1.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/jquery-2.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/velocity.min.js'></script>
<script src='https://rawgit.com/jquerycods/jquery/master/velocity.ui.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$('a[rel=popover]').popover().click(function(e){e.preventDefault();var open=$(this).attr('data-easein');if(open=='shake'){$(this).next().velocity('callout.'+open);}else if(open=='pulse'){$(this).next().velocity('callout.'+open);}else if(open=='tada'){$(this).next().velocity('callout.'+open);}else if(open=='flash'){$(this).next().velocity('callout.'+open);}else if(open=='bounce'){$(this).next().velocity('callout.'+open);}else if(open=='swing'){$(this).next().velocity('callout.'+open);}else{$(this).next().velocity('transition.'+open);}});$(".modal").each(function(index){$(this).on('show.bs.modal',function(e){var open=$(this).attr('data-easein');if(open=='shake'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='pulse'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='tada'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='flash'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='bounce'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='swing'){$('.modal-dialog').velocity('callout.'+open);}else{$('.modal-dialog').velocity('transition.'+open);}});});
//]]>
</script>

3- Aşağıdaki modal HTML kodlarını kodlarını blogunuzda sabit bir menüde ve blog yayınlarınızda istediğiniz gibi kullanabilirsiniz. Aşağıdaki HTML kodları örnek olarak paylaştık.

Aşağıdaki HTML kod modal kutusu açma-kapama kumanda butonudur. Kod içerisinde belirtilen "Modal-1" yere modal kutusu içerisinde paylaştığınız bilgi ile ilgili ipucu adı ekleyin.

<a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">Modal-1</a>

Yukarıdaki ve aşağıdaki HTML kodlar içerisinde belirtilen komut id'leri modal butonları ve modal kutularını karşılamaktadır.

Aşağıdaki modal kutusu HTML kodları ile paylaşmak istediğiniz bilgi ve açıklamaları eklemenize yardımcı olan kodlardır.

<div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Başlık 1</h4>
</div>
<div class="modal-body">
<p>İçeriklerinizi buraya ekleyin.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button>
<button class="btn btn-primary">Buton ekle</button>
</div>
</div>
</div>
</div>

Yukarıdaki HTML kod içerisinde belirtilen yere modal kutusu içerisinde paylaşmak istediğiniz bilgi veya kısa açıklamayı ekleyin.

4- Aşağıdaki ipucu kutusu HTML kodunu blog yayınlarınızda, menülerde ve blogunuzla ilgili bir ipucu paylaşmak için kullanabilirsiniz.

<a data-original-title="İpucu-1" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-1</a>

Yukarıdaki HTML kod içerisinde belitilen "İpucu-1" yere ipucu ile ilgili başlığınızı, "buton-1" yere buton adını ve ipucu ile ilgili kısa açıklamanızı ekleyin.

Aşağıdaki Ön İzleme butonuna tıklayarak 32 farklı modal ve ipucu kutularının nasıl çalıştığını inceleyebilirsiniz. İndirme butonuna tıklayarak 32 farklı modal ve ipucu kutusu HTML kodlarını indirebilirsiniz.

Ön İzleme

İndir

İndirdiğiniz "RAR" dosyası içerisinde 32 farklı modal ve ipucu HTML kodları yer almaktadır. Her bir HTML kod farklı bir stil dosyasına sahiptir. Kullanmak istediğiniz HTML kodu örnek sayfada kontrol ederek kullanabilirsiniz.

Bu yazımızda blogcular için modal ve ipucu kutusu hakkında bilgiler paylaştık, yayın ile görüş ve sorularınız için yorum bırakabilirsiniz.