Google AMP Blogger Şablon ve Temaları

Arlina Design: Google AMP Blogger Şablon ve Temaları 6.10.16
Blogger AMP Templates and Themes

AMP hızlandırılmış mobil sayfa yayıncıları için 24 Şubat 2016 tarihinde Google tarafından açıklanan mobil arama sonuçlarında AMP entegreye sahip sayfaların mobil cihazlar üzerinde daha hızlı yüklenmesini sağlamak için oluşturulmuş bir Goole projesidir.

AMP 3 (üç) ayrı bölümden oluşan yani AMP JS, HTML AMP ve AMP Google CACHE (Önbellek) ile oluşturulmuş, statik (sabit) içerikler için bir web sayfası oluşturmak için kullanılan bir yöntemdir.

Yine son zamanlarda Google video, animasyon ve grafiklerle web sayfalarının reklamları ile kullanılan çeşitli mobil cihazlarda (cep telefonları, tablet vb) anında yüklenmesi için yayıncıları AMP kullanmaya teşvik ediyor.

Bu bir web sitesi için bir rütbe değildir. Okuyucuların mobil cihazlar üzerinde daha hızlı erişim sağlanan siteleri seçmelerini kolaylaştıracak, bunu yapmak için de Google, AMP kullanan sitelerde AMP etiketi (beyaz yuvarlak pin) ile görünümünü sağlayacaktır. AMP ile siteler mobil cihazlar üzerinde hızlı bir erişim sağladığı gibi bir masaüstü cihaz ile erişim sağlanması durumunda sayfalar daha hızlı açılacaktır.

Şimdi sizler (blogcular) için tüm sayfalar için geçerli Blogger AMP Şablonu oluşturduk. Blogger AMP Şablonu için json entegresi mümkün olmadı. Bu nedenle bu şablon için arşiv, ilgili yayınlar ve son yayınlananlar menüsü yoktur. Zamanla bu çalışmaları da Blogger AMP Şablonlarına kazandırmak için çalışmalar yapmaktayım. Blogumuza abone olarak Blogger AMP Eklentileri için bilgi alabilirsiniz.

Blogger AMP Templates and Themes



Blogger AMP Şablon Özelleştirme

1. Logo Değştirme 
Aşağıdaki kod içerisinde bulunan resmin URL'sini değiştirin. Boyutu 30px x 30px olan bir logo oluşturun ve ekleyin.
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><amp-img alt='Logo' expr:title='data:title' height='30' src='https://cdn.rawgit.com/jquerycods/google-amp/master/googleamp.png' width='30'/> <data:title/></span></a>
</b:includable>
2. Disqus Yorum Adını Değiştirme
Disqus kullanıcı adınızı aşağıdaki kod içerisinde bulunan bloggerekibi ile değiştirin.
<b:includable id='disqus-comments' var='post'>
<div class='disqus-comments' id='disqus_comments'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/jquerycods/google-amp/master/disqus.html?shortname=bloggerekibi&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Yorumlar</div>
</amp-iframe>
</div>
</b:includable>
3. Reklamlar 
A. Header Reklam Alanı
<div class='headerad'>
<amp-img alt='Header Ads' height='90' src='https://cdn.rawgit.com/jquerycods/ads-rklm/master/adsreklam.png' title='Header Ads' width='728'/>
<div class='clear'/>
</div>
B. Yazı İçerisindeki Reklam Alanı (300 X 250)
<div class='postabovead'>
<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://cdn.rawgit.com/jquerycods/ads-rklm/master/adsreklam2.png' title='Sidebar Ads' width='300'/>
</div>
C. Yayınlar Altı Reklam Alanı
<div class='underpostad'>
<amp-img alt='Under Post Ads' height='90' src='https://cdn.rawgit.com/jquerycods/ads-rklm/master/adsreklam.png' title='Under Post Ads' width='728'/>
<div class='clear'/>
</div>
Reklam alanlarında sadece resim veya afiş kullanmak istiyorsanız sadece resim URL'sini değiştirmeniz yeterli olacaktır. Eğer Adsense kullanmak istiyorsanız Adsense reklam kodunuzu HTML Dönüştürücü programı ile dönüştürerek amp-img resim kodu ile değiştirin. Yada aşağıdaki amp-ad reklam kodunu kullanın.
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
 </amp-ad>

4. Yayın Oluşturma 
A. Yayınlarınıza resim eklemek için aşağıdaki kodu kullanın, resimlerinizi yükleyin ve yüklediğiniz resim URL'sini aşağıdaki kod içerisinde bulunan resim URL kısmına ekleyin ve kodu yüklemiş olduğunuz resim kodu ile değiştirin. Böylece yayınlarınız ve resimleriniz sayfa yüklenmesini engellememiş olacaksınız. Bu resim kodu anasayfada yayınlarınızın görünmesini sağlayan resim kodudur.
<div class="thumb-post">
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh97D_6a2uWkfvByowwS3yIROW3so4Unlo35oTz2yvQyiBUuRG0mBMbZ8NQ_W-xrvWyngy9Ra6PXHfsVhwTVu-Lms6qhy970eLsp9kU_UuPCtxEyEVuCSaUISOYfoif6tGAp1eekqVwZFGi/s640/child.jpg" width="640" height="420" alt="Çocuk Psikolojisi"/></noscript>
</div>
B. Diğer yayın resimlerini eklemek için aşağıdaki kodu kullanın, yine yukarı yapmış olduğunuz işlemleri tekrar ederek yayınlarınıza resimlerinizi ekleyebilirsiniz. Ve bu kod ile otomatik olarak lightbox amp sayesinde resimlerinize tıklandığında tam ekran görünümünü alacaktır.
<amp-img
alt="Curabitur placerat est sem"
height="375"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://cdn.rawgit.com/jquerycods/ads-rklm/master/2c0343f7.png"
tabindex="0"
width="600"></amp-img>
C. Youtube Videoları Ekleme
<amp-youtube
data-videoid="https://youtu.be/2zBXa0-InoU"
height="480"
layout="responsive"
width="640"></amp-youtube>
D. Birden Fazla Görüntü Ekleme
<amp-carousel width="600"
height="400"
layout="responsive"
type="slides">
<amp-img src="https://cdn.rawgit.com/jquerycods/ads-rklm/master/pretty-woman-635258_1920.jpg"
width="600"
height="400"
layout="responsive"></amp-img>
<amp-img src="https://cdn.rawgit.com/jquerycods/ads-rklm/master/underwear-689862_1920.jpg"
width="600"
height="400"
layout="responsive"></amp-img>
<amp-img src="https://cdn.rawgit.com/jquerycods/ads-rklm/master/women-428896_1920.jpg"
width="600"
height="336"
layout="responsive"></amp-img>
</amp-carousel>

NOT: Yayınlarınızda satır içi HTML kullanmaktan kaçının, <div dir="ltr" style="text-align: left;" trbidi="on">...</div> bu kodu <div>...</div> bu şekilde kullanın.

5. Google Analytic
Google Analitik kodu için, blogunuzun Google Analytics hesap koduyla UA-83720154-1 değiştirin.
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-83720154-1&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>

6. QuickEdit Kaldırma
Blogunuza temayı entegre ettikten sonra CTRL+F yardımıyla <b:include name='quickedit'/> kodunu bulun ve silin. Birden fazla olabilir.

7. CSS Düzenleme
Eğer şablon görünümünü düzenlemek istiyorsanız, her sayfanın iki ayrı CSS kod grubu vardır. Masaüstü için ve mobil görüntüleme için ayrı ayrı CSS kod grubu bulunmaktadır. Yayın ve statik (sabit) sayfalar için de böyledir. Yani her iki CSS kod grubunu da düzenleyin.

8. Şablon içerisinde aşağıdaki kodu bulun ve kendi blog sayfanızın URL'sini ekleyin.
.post-body .separator a:after,.post-body a[href^="http://googleampbloggersablon.blogspot.com/"]:after,
.post-body a[href^="https://twitter.com/intent/tweet"]:after{content:'';background:none;width:0;height:0;margin-left:0}

Bu yazımızda blogger sitesine AMP özellikli blogger şablonu paylaşarak blogger AMP şablon kurulumunu anlattık. Yeni blogger AMP şanlonları ve eklentileri için sitemize abone olun.

Etiketler: Blogger AMP Şablonları, Blogger AMP Şablon, Blogger AMP Temaları, Blogger AMP Tema, Blogger AMP Templates, Blogger AMP Themes, Blogger AMP Tasarim, Blogger AMP Desing, Blogger AMP Theme, Blogger AMP Eklentileri

Yorum Gönder