Blogger AMP HTML Hareketli Arama Kutusu - Daha önce jQuery destekli arama kutusunu yayınlamıştık. Bu yazımızda aynı Blogger AMP teması kullanıcıları için, AMP destekli hareketli arama kutusunu paylaşacağım.
Bknz: Blogger jQuery Destekli Hareketli Arama Kutusu
AMP blog ekranlarında hareketli bir arama kutusu oluşturmak için, jQuery yerine amp-lightbox ve amp-form kodlarını kullanacağız.
AMP HTML Hareketli Arama Kutusu Blog'a Nasıl Eklenir?
Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinin soltarafında bulunan menüden Tema > HTML'yi Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın.
Açılan sayfada aranan kodlara daha hızlı erişmek için, klavyenizin CTRL+F tuşlarından faydalanabilirsiniz.
1- AMP blog'unuzun </head> kodunun üzerinde bulunan AMP jQuery kodları arasında aşağıdaki amp-lightbox ve amp-form kodları bulunmuyorsa, AMP jQuery kodlarınızın arasına aşağıdaki kodları da ekleyin. Eğer bu kodlar blogunuzda mevcut ise tekrar eklemenize gerek yok (buna özelikle dikkat edin).
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>2- Aşağıdaki CSS kodlarını amp-custom stil dosyanızın içerisine ekleyin.
button.src_icon{color:red;font-size:30px;padding:0;cursor:pointer;background:0 0;border:none;}
button.src_icon svg{vertical-align:middle;width:32px;height:32px;}
button.src_icon svg path{fill:#666}
.btn_close{right:10px;padding:0;top:50%;margin-top:-17px;background:0 0;border:none;position:absolute;cursor:pointer;transition:all .4s ease-in-out;z-index:999;line-height:1;}
.btn_close svg{vertical-align:middle;width:34px;height:34px;}
.btn_close svg path{fill:#999}
.btn_close:focus{outline:0}
#amp_box .search-form:not(:valid)~.btn_close{display:none}
#amp_box{top:20%;-webkit-animation-name:slideInUp;animation-name:slideInUp;width:70%;position:absolute;-webkit-animation-duration:1s;animation-duration:1s;animation-fill-mode:both;left:50%;margin-left:-35%;-webkit-animation-fill-mode:both;}
.sos-profil .search button{font-size:30px;padding:0;cursor:pointer;background:0 0;border:none;color:red;}
#amp_box form{position:relative}
amp-lightbox{z-index:1000000}
#amp_box form input[type=text]{border:none;border-bottom:2px dotted #999;width:100%;top:0;left:0;z-index:99;padding:10px 50px 10px 10px;outline:0;font-size:3em;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#999;background:#000;background:rgba(0,0,0,.3);text-align:center}
.lightbox{align-items:center;justify-content:center;width:100%;height:100%;position:absolute;background:rgba(0,0,0,.6);display:flex;}
.lightbox .close_search{color:red;font-size:50px;background:0 0;border:none;right:20px;cursor:pointer;position:absolute;top:10px;line-height:1}
#amp_box .note_search{padding:10px 50px 10px 10px;color:#888;text-align:center;}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}3- Aşağıdaki HTML kodları blogunuzun </body> kodunun bir satır üzerine ekleyin.
<amp-lightbox id='amp_search_box' layout='nodisplay'>
<div class='lightbox'>
<button class='close_search' on='tap:amp_search_box.close' role='button' tabindex='0' title='Kapat'>&times;</button>
<div id='amp_box'>
<form action='https://www.google.com/search' method='get' target='_blank'>
<input autocomplete='off' autofocus="autofocus" class='search-form' name='q' placeholder='Arama terimi...' required='required' type='text'/>
<input name='as_sitesearch' type='hidden' value='bloggereklentileri.blogspot.com'/>
<button class='btn_close' type='reset'><svg viewBox='0 0 24 24'>
<path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000'/>
</svg></button>
</form>
<div class='note_search'>Enter'a Tıklayın</div>
</div>
</div>
</amp-lightbox>Yukarıdaki HTML kod içerisinde belirtilen yere blogunuzun URL'sini ekleyin.
4- Aşağıdaki arama kutusu görüntüleme butonunu (arama simgesini), blogunuzda header veya bir menü içerisine veya istediğiniz herhangi bir yere ekleyebilirsiniz. Blogunuzun üst taraflarında bulunması ziyaretçiler için daha kullanışlı olacaktır.
<button class='src_icon' on='tap:amp_search_box'><svg viewBox='0 0 24 24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#000'/></svg></button>Yukarıdaki kodları ekledikten sonra şablonu kaydedin.
AMP HTML hareketli arama kutusunu incelemek için, aşağıdaki örnek sayfa butonuna tıklayarak inceleyebilirsiniz.
Bu yazımızda AMP blog'ları için, AMP HTML hareketli arama kutusunu paylaştık. Bu yayın ile ilgili daha fazla bilgi almak için yorum bırakabilirsiniz.
0 komentar: