Blogger AMP Modal Bildirim Kutusu

Blogger AMP Modal Bildirim Kutusu - Blog AMP sitelerinde amp-lightbox ile modal bildirim/uyarı kutusu nasıl oluşturulacağı ile ilgili bilgiler paylaşacağım. Daha önceki yazılarımızda buna benzer bir kaç AMP eklentisi paylaştık.

Bknz: Blogger AMP HTML Hareketli Arama Kutusu

AMP özellikli blog'ların görünümü ve özellikleri zamanla daha ileri seviyeye gidiyor. Bu nedenle, pop-up bildirim kutusu blog ziyaretçilerine blog yöneticisi tarafından duyuruları bildirmek amacıyla kullanılabilir. Böylece, AMP blog'larının kullanılabilir özellikleri zamanla çeşitlilik kazanıyor ve daha kullanışlı hale geliyor.

Blog'a AMP Modal/Pop-up Kutusu Nasıl Eklenir?

AMP bildirim kutusunu blog'a eklemek için, aşağıdaki adımları takip edin.

1- Blog'unuzun şablon editör sayfasında </head> kodunun üzerinde bulunan AMP JS kodları arasında amp-lightbox.js kodunun olup olmadığını kontrol edin. Eğer bu kod AMP JS kodlarınız arasında bulunuyorsa tekrar eklemeye gerek yok. Eğer yoksa aşağıdaki AMP JS kodunu </head> kodunun üzerine ekleyin.

<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>

2- Aşağıdaki CSS kodlarını amp-custom stil dosyanızın içerisine ekleyin.

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#modalbox{z-index:1000}
.modalbox{background:rgba(0,0,0,0.6);height:100%;width:100%;display:flex;align-items:center;position:fixed;justify-content:center;z-index:1}
.moda_box{background:#fff;font-family:Roboto,sans-serif;position:absolute;color:#444;border-radius:4px;padding:25px;top:15%;width:50%;left:50%;transition:all .3s ease-in-out;margin-left:-25%;z-index:99;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);z-index:2}
.moda_box p{margin:0;padding:0;font-weight:400;line-height:1.3;font-size:14px}
.moda_box h4{color:#444;font-size:18px;margin:0 0 10px;font-weight:400;line-height:1}
hr{height:0;border:0;border-top:1px solid #eee}
.modalbox .close_modalbox{background:0 0;border:none;padding:0;font-size:30px;position:absolute;top:23px;right:23px;color:#444;cursor:pointer;width:20px;height:20px;text-align:center;line-height:20px}
.modalbox .close_modalbox:focus,.modalbox .done_modalbox:focus{outline:none}
.modalbox .done_modalbox{background:#FF4082;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;color:#fff;border:none;font-family:Roboto,sans-serif;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;font-size:14px;font-weight:500;text-transform:uppercase;cursor:pointer}
.modalbox .close_modalbox:hover{color:#C51163}
.modalbox .done_modalbox:hover{background:#C51163}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}

3- Aşağıdaki HTML kodu </body> kodunun bir satır üzerine ekleyin.

<amp-lightbox id="modalbox" layout="nodisplay">
<div class="modalbox">
<div class="moda_box slideInDown">
<button class='close_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Kapat'>&amp;times;</button>
<h4>Bildirim/Duyuru</h4>
<hr/>
<p>
Bildirim/Duyuru
</p>
<button class='done_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Tamam'>Tamam</button>
</div>
</div>
</amp-lightbox>

4- AMP bildirim kutusu butonunu blog'unuzda görüntülemek istediğiniz yere ekleyin ve şablonu kaydedin.

<button on="tap:modalbox" role="button" tabindex="0">AMP Modal</button>

AMP Modal/Pop-up bildirim kutusunu incelemek için aşağıdaki Ön İzleme butonuna tıklayın.

Ön İzleme

Bu yazımızda AMP blog'ları için, AMP Modal/Pop-up bildirim kutusu oluşturma ve blog'a nasıl eklendiği hakkında bilgiler paylaştık. AMP eklentileri hakkında daha fazla bilgi almak için yorum bırakabilirsiniz.