Blogger AMP Modal Bildirim Kutusu

10.8.17
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.


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.
Faydalı mı?
  1. Merhaba blogger eklentileri
    Benim blogger tasarımı hakkında pek bilgim yok.Bloggerda kategori yani etiketler bölümu görünümünü nasıl değiştirecez etiketler liste şeklinde yani az alana çok etiket site www.wid10.com tesekkuker

    YanıtlaSil