Blogger Yeni AMP Teması

2/22/2017
Blogger Yeni AMP Teması

Blogger Yeni AMP Teması - Blog temaları son yıllarda bir çok özellik ile blogculara büyük fayda sağladı. Son bir yıl içerisinde de yeni blog temaları yazılım olarak diğer blog temaların farklı olan AMP (Android tabanlı) yazılım ile yeni boyut kazandı. Web üzerinde dolaşırken rasgeldiğim AMP blog temasını sizinle paylaşmak istedim.

Temanın bir kaç yerini editledim, zaten kullanımı çok kolay olan AMP temalarının kodları ile pek oynama gerek yok. Fakat bir kaç kullanım özelliği hakkında bilgi amaçlı aşağıya açıklamalar ile kodlar ekledim, temayı blogunuza eklemeden önce bu bilgileri de gözden geçirmenizi tavsiye ederim.

Yeni AMP Blog Teması Özellikleri


Öncelikle bu özelliklerin blogunuzun ihtiyatlarını karşılayıp karşılamadığını gözden geçirin.
ÖZELLİKLERİKULLANILABİLİRKİK
Mobil Uyumluluk TestiVar Kontrol
Google Yapısal Veri Test AracıVarKontrol
SEO UyumluVarKontrol
Dinamik BaşlıklarVar
AMP Adsense UyumluVar
Schema.orgVar
Temiz ve Kısa KodlamaVar
Özel Renk ŞemasıVar
Blogger AMP ŞablonuVar
2 SütunVar
Otomatik Blog Yazısı ÖzetlemeVar
Duyarlı AMP Reklam AlanıVar
BreadcrumbsVar
Footer WidgetVar
AMP İlgili YayınlarVar
AMP Arama KutusuVar
Özel Sosyal Paylaşım ButonlarıVar
AMP ResponsiveVar
Sitemap NavigasyonVar
AMP KodlamaVar
Yeni Popüler Yayınlar Widget'iVar

AMP Blog Teması Kullanımı Hakkında Bilgiler


AMP blog temasını kullanma başladığınızda yayınlarınızın daha düzenli ve kullanışlı olması ve blogun yapısına göre yayınların eklenmesi için aşağıdaki kodları açıklamalara uygun olarak kullanın.

1- AMP blog teması Youtube videoları eklemek videoların sadece ID kodunu aşağıdaki kodda belirtilen yere ekleyerek kullanın.

<amp-youtube
     data-videoid="i77veOu9hkQ"
     height="270"
     layout="responsive"
     width="480"></amp-youtube>

2- AMP blog teması resim ekleme, yayınlarınıza resim eklerken veya bir kaç resim eklerken ilk resim kodunu aşağıdaki gibi düzenlemelisiniz, aksi halde resminiz hem yayın içerisinde hemde üst kısımda responsive kısmında görünecektir. Bu sadece ilk resim için geçerlidir.

Resim eklediğinizde resim separator kodu şağıdaki gibi görünecektir. Siz aşağıda belirttiğim yerleri bir alttaki koda uygun olarak düzenleyin.

<div class="separator" style="clear: both; text-align: center;">
<img alt="Blogger Yeni AMP Teması" border="0" height="336" src="https://2.bp.blogspot.com/-U2TsJRSuPO0/WK3d1JfdTpI/AAAAAAAAEzU/3PH_kjZCGC00EjzZ5liFb5GQplNTCGeHwCLcB/s640/theme.png" title="Blogger Yeni AMP Teması" width="640" /></div>

AMP uyumlu resim kodu.

<noscript><img alt="Blogger Yeni AMP Teması" width="640" height="336" src="https://2.bp.blogspot.com/-U2TsJRSuPO0/WK3d1JfdTpI/AAAAAAAAEzU/3PH_kjZCGC00EjzZ5liFb5GQplNTCGeHwCLcB/s640/theme.png" title="Blogger Yeni AMP Teması" /></noscript>

Eğer blog yayınınızın içerisinde görünmesini istiyorsanız aşağıdaki resim kodunu kullanmalısınız. Yeni ikinci bir resim eklediğinizde bu kodu kullanmalısınız.

<amp-img alt="Blogger Yeni AMP Teması" height="336" layout="responsive" src="https://2.bp.blogspot.com/-U2TsJRSuPO0/WK3d1JfdTpI/AAAAAAAAEzU/3PH_kjZCGC00EjzZ5liFb5GQplNTCGeHwCLcB/s640/theme.png" width="640" title="Blogger Yeni AMP Teması"></amp-img>

3- AMP blog temasına Adsense reklam kodu eklemek için aşağıdaki kodları kullanın. Adsense hesabınızdan aldığınız aşağıdaki koda benzer kod içerisindeki reklam kimlik numarası ve reklam seri numarasını AMP Adsense kodu içerisine ekleyerek blogunuzda kullanın. AMP Adsense kodlarının blog için en büyük avantajı javaScript kodlarının kullanılmaması, bu da blognuzun daha hızlı yüklenmesini sağlamaktadır.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 300x250 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Sidebar widget içerisinde ve yayın içerisinde bulunan reklam yerlerine Adsense kodu eklemek için aşağıdaki kodu kullanın.

<amp-ad height="250px" width="300px"
        type="adsense"
        data-ad-client="ca-pub-0000000000000000"
        data-ad-slot="0000000000">
    </amp-ad>

Yayın içerisinde alt bölümde bulunan reklam alanında Adsense reklamı yayınlamak için aşağıdaki kodu kullanın.

<amp-ad height="90px"
        type="adsense"
        data-ad-client="ca-pub-0000000000000000"
        data-ad-slot="0000000000">
    </amp-ad>

4- Tema kodları içerisinde bulunan Disqus yorum kodu içerisinde bulunan Disqus ID adını değiştirin. Tema kodları arasında aşağıdaki kodu bulun ve belirtilen yere kendi Disqus adınızı ekleyin.

https://cdn.rawgit.com/jquerycods/ren/6765ebcf/disqus.html?shortname=bloggerekibi

5- AMP blog temasında blog arşivi kullanmak için aşağıdaki arşiv kodlarını blogunuzun arşiv sayfasına yada yeni bir sayfa ekleyerek sayfanın HTML bölümüne aşağıdaki kodları ekleyin. Kod içerisine herhangi bir blog URL eklemenize gerek yoktur.

<style amp-custom='amp-custom'>
.post-body img{background:none;}
#table-arslin{padding:6px 9px;margin:0 auto}
#table-arslin table{width:auto;margin:0 auto}
#table-arslin form{font:inherit}
#table-arslin label{color: #666;font-weight:600;display:block;text-align:center;margin:0 10px 0 0;padding:4px 0 0}
#table-arslin select[disabled]{text-transform:capitalize!important;opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-arslin input,#table-arslin select{width:100%;border:1px solid #ddd;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:400!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-arslin select option{text-transform:capitalize!important;min-height:1.4em!important;}
#table-arslin input#feed-q{padding:5px 10px!important;}
#feed-vessel{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-vessel li{list-style:none;margin:0;padding:0;border-top:1px solid #ddd;color:#555;width:auto;float:left;display:inline}
#feed-vessel li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-vessel li a{text-decoration:none;color:#222;font-weight:600}
#feed-vessel li a:hover{text-decoration:none;color:rgb(219, 68, 55)}
#feed-vessel li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-vessel li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{background: #1a1a1a;border:1px solid #ddd;border-radius:5px;padding:0;color:#ccc;text-decoration:none;display:block;line-height:30px}
#feed-nav a,#feed-nav span:hover{color:#ccc}
#feed-nav a:active,#feed-nav a:hover{color:#ddd}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-arslin table{margin:0 auto;width:100%}
#feed-vessel,#table-arslin{margin:0 auto}
#feed-vessel li .inner{margin:5px auto;height:auto}
#feedvessel li{float:none;display:block;width:auto;height:auto}
#feed-vessel li .news-text, #feedvessel:after,#feed-vessel li img{display:none!important}}
</style>
<div id="table-arslin">
<table><tbody>
<tr><td><label for="feed-order">Yayınları sıralayın:</label></td> <td><select id="feed-order"> <option selected="" value="published">En son yayınlananlar</option> <option value="updated">Son güncellenen yayınlar</option> </select></td></tr>
<tr><td><label for="label-sorter">Kategoriye göre sırala:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Yükleniyor...</option> </select></td></tr>
<tr><td><label for="feed-q">Anahtar kelimelerde arayın:</label></td> <td><form id="post-searcher">
<input id="feed-q" type="text" placeholder="Arama yapın ..."/>
</form>
</td></tr>
</tbody></table>
</div>
<header id="result-desc"></header>
<ul id="feed-vessel"></ul>
<div id="feed-nav">
</div>
<script src='https://cdn.rawgit.com/jquerycods/020/master/sitemap.js'></script>

AMP blog teması ile ilgili önemli birkaç bilgiyi sizinle paylaşmış olduk. Umarım faydalı olmuştur. AMP blog temasını incelemek ve indirmek için aşağıdaki butonlara tıklayabilirsiniz.


AMP blog teması ile ilgili yaşadığınız sorunlar veya görüşler için yorum bölümünden bize ulaşabilirsiniz.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

10 yorum

Güzel teşekkür ederim :)

Cevap

Hocam mobilde resimlerin gözükmesi için ne yapabiliriz?

Cevap

Temayı Yüklerken bu hatayı alıyorum.

Temanızı kaydedemedik.

Temanız doğru şekilde oluşturulmadığından ayrıştırılamadı. Lütfen tüm XML öğelerinin düzgün biçimde kapatıldığından emin olun. XML hata mesajı:
Content is not allowed in prolog.

Cevap

CSS kodları arasında aşağıdaki kodu bulun ve (none) yerine (block) yazın kaydedin. Bu CSS kodu şablon kodları arasında birden fazla olabilir ilk bulduğunuz kodda deneyin olmazsa ikinci kodu da aynı şekilde düzenlersiniz.
<code>@media screen and (max-width: 480px)
(index):78
.thumbnail-area, .thumbnailjpg {
display: none;
}</code>

Cevap

Tema XML dosyasını not defterinde açın ve manuel olarak eklemeye çalışın. AMP temalarında bu sıkıntı çok fazla oluyor maalesef. Manuel olarak eklediğiniz de herhangi bir problem olmayacaktır.

Cevap

Hocam sağolun. Sitenizdeki eklentileri uyguladığımızda AMP özelliği kayboluyor mu?

Cevap

AMP olarak paylaştıklarımızı kullanabilirsiniz. AMP olarak belirtmediğimiz eklentiler zaten AMP ile uyumlu değil. Fakat ekstra CSS kodu ekleyebilirsiniz

Cevap

Sadece CSS kodu ile oluşturulmuş eklentileri ekleyebilirsiniz. AMP özelliği olmayan JS kullanımı hata verecektir.

Cevap

Önemli bir nokta da şu bir AMP teması kullanıyorsanız blogunuzun Ayarlar > Temal ayarlarında bulunan HTTPS özelliğini mutlaka kullanmalısınız. Kullanmamanız durumunda AMP özeliği devre dışı olacaktır.

Cevap