Jump to content
Search In
  • Diğer seçenekler ...
Sonuçlarda bul...
Sonuçlar içinde bul...
kurtadam

AMP Sayfalar İçin Açılan Pencere (Açılır Kutu) Kodu

Önerilen İletiler

Oluşturulma : (güncelleme yapıldı)

 

994852633_Blog-121.thumb.png.828f4b7c23c9698b0744688872280aa7.png

AMP yani "Hızlandırılmış Mobil Sayfalar", sağladığı büyük avantajları, getirdiği büyük kısıtlamalara borçlu. Bunu zaten biliyorsunuz. Peki amp'li sitelerde bu kısıtlamalara rağmen kullanabileceğiniz bir açılır pencere olduğunu biliyor muydunuz?

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>

 

tarihinde kurtadam tarafından düzenlendi

Güzel günler...

İletiyi paylaş


İletiye bağlantı
Sitelerde Paylaş

Şimdi Konuya Katılın

Şimdi gönderebilir ve daha sonra kayıt olabilirsiniz. Bir hesabınız varsa, şimdi oturum açın .

Misafir
Bu konuyu yanıtla

×   Yapıştırdığınız içerik biçimlendirme içeriyor.   Biçimlendirmeyi Temizle

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Önceki içeriğiniz geri yüklendi.   Editör içeriğini temizle

×   You cannot paste images directly. Upload or insert images from URL.


  • Konuyu Görüntüleyenler   0 kullanıcı

    Sayfayı görüntüleyen kayıtlı kullanıcı bulunmuyor.

Öne Çıkan Üyeler

TurkCraf TurkCraf Administrators
Gökhan Bozkurt Gökhan Bozkurt Administrators
waxxi waxxi Members
Mehmet Mehmet Members
kurtadam kurtadam Members
muhammed muhammed Members

spacer.png

İçerik sağlayıcı paylaşım sitelerinden biri olan Forumbilgisi.Com  Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan kendileri sorumludur. Forumbilgisi.Com hakkında yapılacak tüm hukuksal Şikayetler Buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde Forumbilgisi.Com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatlarımız size geri dönüş yapacaktır.

İletişim Kanalları

TÜM GENEL SORUNLAR İÇİN

info@forumbilgisi.com

Reklam Verin

REKLAM VERMEK İÇİN

reklam@forumbilgisi.com

Yasaklı Üyeler

BAN SORUNLARI İÇİN

ban@forumbilgisi.com

Yasal İşlemler

İHLAL BAŞVURUSU

ihlal@forumbilgisi.com

×
×
  • Yeni Oluştur...