 |
| Blogger Eklentileri - Yazı İçin Pop Up Pencere Butonu |
Blogger Dersleri - kuşağında size daha önce sayfa içerisinde açılan Spoiler butonundan bahsetmiştim. ( Blogger Spoiler Butonu Oluşturmak ) Bu seferki kod dizinimiz ise spoiler mantığı ile çalışan, daha gelişmiş düzeyde düşünülmüş bir Blogger eklenti kod dizini. Buton sayfa içerisinde yazı gösterilmesindense ufak bir ekran sayfası açıyor.
Demo örneğindeki butona tıklayarak çalışma mantığını izleyebilirsiniz.
Blogger Eklentileri - Pop Up Pencere Butonu Oluşturmak:
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu buluyoruz.
3 ) ]]></b:skin> kodunun öncesine aşağıdaki Blogger Eklentisi -Pop-Up Pencere Butonu kod dizinini ekliyoruz.
div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: solid 1px #bbb; padding: 20px; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); opacity: 0.0; -webkit-transition: opacity 0.0s ease-out; z-index: 0; }
div#Popup.show {
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
pre { background: rgba(0,0,0,.75); margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; font: 12px/18px "Monaco","Courier New","Courier",monospace;color:#fff;}
code{ color:#fff;background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); font: 12px/18px "Monaco","Courier New","Courier",monospace;}
.button{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5);
color: #FFFFFF !important;
background:#33AD33;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
padding:1px 4px 1px 4px;
}
.button:hover{ background:#327F32;text-decoration:none;}
4 ) Ardından Ctrl + F yardımı ile </head> kodunu bularak Blogger Eklentileri - Pop-Up Pencere Butonu kodunun ikinci kısmını öncesine ekliyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
// Place all Javascript code here
$(document).ready(function(){
$("#showPopup").click(function() {
$("div#Popup").addClass("show");
return false;
});
$("#closePopup").click(function() {
$("div#Popup").removeClass("show");
return false;
});
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
5 ) Son kod dizinimizi ise eklemek butonu kullanmak istediğiniz yere yapıştırıyorsunuz. Gadget ekle diyerek tüm sayfada yada yayın içinde HTML bölümüne ekleyerek belirli sayfalarda kullanabilirsiniz.
<a class="button" href="http://www.blogger.com/blogger.g?blogID=2140373632248" id="showPopup">Açılır Pencereyi Göster - Resimli ve Textli </a>
<br />
<div id="Popup">
<h3>
Blogger Dersleri Konu Başlığı</h3>
Blogger Dersleri İsteye Bağlı Açılan Pop - Up Ekranı .Blogger Dersleri İsteye Bağlı Açılan Pop - Up Ekranı.Blogger Dersleri İsteye Bağlı Açılan Pop - Up Ekranı. Blogger Dersleri İsteye Bağlı Açılan Pop - Up Ekranı <br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxo66b39PiCrmOXAa1kh6B-MGLLXKl1p1H3e7X1aaWBp8ZnVyJOuj2cYRUL2f-FIHTp9ahjZUN_AFkyU-cIHTlxV4LQEpGImIJhuL8myoOJW0qrBl8GaY5paWjpFNqC80lw8V9khBPSUN/s320/blogger-mobil-adsense-eklemek.png" />
<br />
<a class="button" href="http://www.blogger.com/blogger.g?blogID=21403732248" id="closePopup">Kapat</a>
</div>
Blogger Eklentileri - Pop-Up Pencere Butonu Kullanımı
- Kırmızı olarak verilmiş olan sayısal değerler, Blogger kullanıcılarının sahip olduğu Blogidler. Blogid mi nereden öğrenebilirim diyor iseniz buradan buyurun : Blogid Nedir? >>
- Yeşil olarak işaretlenmiş alan, Pop-up pencere butonunuzun görünecek metin örneği.
- Pembe alan,Blogger Pop-up pencere başlığınız.
- Sarı alan, butona tıklanması halinde açılacak olan ek pencerenin üzerinde yazacak içerik.
- Mavi olarka verilmiş resim linki, Blogger Pop up penceresimnde gösterilecek olan resim içeriği.
Umarım faydalı olmuştur. Bu eklenti ile ilk başta görülmesi istenmeyen, kullanıcının isteğine bağlı bırakılmış içeriği paylaşma imkanınız var.
Yorum Gönder