Koddostu

AMP yani Hızlandırılmış Mobil Sayfalar, makale ve blog yazılarınızı arama motorlarında öne çıkarmak ve ziyaretçilerinize hızlı bir deneyim sunmak için eşsiz bir fayda sağlıyor. Fakat AMP sayfalar ile ilgilenmiş hemen herkesin de bildiği gibi: AMP destekli sayfalarda çok fazla kısıtlama var. Kendi Javascript'inizi kullanamamanız da bu kısıtlamalardan biri. Bu yüzden web sitelerindeki amp sayfalar, lightbox, flexbox gibi modal box'ları, yani özetle açılan pencere kodlarını terk etmiş durumda. Biz de sizler için css3 tabanlı ve tamamen amp destekli bir açılır kutu kodu hazırladık.

Bu açılır pencere kodunu amp olsun veya olmasın, tüm sayfalarınızda kullanabilirsiniz.

1. Adım
Hızlandırılmış Mobil Sayfalar sadece bir tek style elementine izin verir. Bu elementin açılış etiketinin de <style amp-custom> şeklinde olması gerekir. Eğer amp sayfalarınız varsa, çok büyük ihtimalle zaten bu stil elementine sahipsiniz demek. Sadece aşağıdaki css3 kodu kopyalayın ve stil elementinin içine yerleştirin.

.dugme {
    cursor: pointer;
    display: inline-block;
    padding: 8px 12px;
    background: #F4511E;
 font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px
}
[name="kapat"] {
    position: absolute;
    bottom: 20px;
    right: 20px
}
.koddostu-ampshadow {
display:none;
opacity:0
}
.Pencereac {
    width: 1px;
    height: 1px;
    visibility: hidden
}
.Pencereac:checked + .koddostu-ampshadow {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    transition: opacity 0.6s ease;
    top: 0;
    left: 0;
    z-index: 9;
    opacity: 1
}
.koddostu-ampwindow{
position:relative;
 background:#fff;
 width:500px;
 min-height:120px;
 max-width:86%;
 max-height:86%;
 margin:15px auto;
    box-shadow: 0 0 6px 2px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,.4);
    -webkit-border-radius: 3px;
    border-radius: 3px
}
.koddostu-p16{padding:16px}

.koddostu-ampwindow .dugme{
position:absolute;
bottom:16px;
right:16px;
}

2. Adım
Artık tek yapmanız gereken, aşağıdaki kodu sitenizde dilediğiniz bölüme yerleştirmek.

Dilerseniz 11. satırı kendi metniniz veya içeriğinizle değiştirebilirsiniz. Elbette eklediğiniz içerik de amp uyumlu olmalı.

<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Koddostu Koddostu AMP Açılır Pencere Kodu-->
<!--https://www.koddostu.com/2017/03/amp-sayfalar-icin-acilan-pencere-acilir-kutu-kodu.html-->
<div id="pencerekodu">
<label for="koddostu-ampshadow" class="dugme">Pencereyi Aç</label>
<input type="checkbox" class="Pencereac" id="koddostu-ampshadow" name="koddostu-ampshadow"></input>
<label class="koddostu-ampshadow">
<div class="koddostu-ampwindow">
<div class="koddostu-p16">
Kendi yazı veya içeriğinizi buraya ekleyebilirsiniz.
<label for="koddostu-ampshadow" class="dugme">Kapat</label>
</div>
</div>
</label>
</div>