Blogger Yeni AMP Teması

Arlina Design: Blogger Yeni AMP Teması 22.2.17
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmW9eG0W4ZfJF4e1aCqWSz06aXKrEbrfJdtFe9EYybSG_70OZAWw0y9X_KVXSLNvfa6_TB6oSBwz07wdco_WjAmmgb9qAcnDuzdpqnbwApOP2ylDTxlupvCEtSQWXDxTYDYxNxoHStko/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmW9eG0W4ZfJF4e1aCqWSz06aXKrEbrfJdtFe9EYybSG_70OZAWw0y9X_KVXSLNvfa6_TB6oSBwz07wdco_WjAmmgb9qAcnDuzdpqnbwApOP2ylDTxlupvCEtSQWXDxTYDYxNxoHStko/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmW9eG0W4ZfJF4e1aCqWSz06aXKrEbrfJdtFe9EYybSG_70OZAWw0y9X_KVXSLNvfa6_TB6oSBwz07wdco_WjAmmgb9qAcnDuzdpqnbwApOP2ylDTxlupvCEtSQWXDxTYDYxNxoHStko/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.

Yorum Gönder