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 Testi | Var Kontrol |
| Google Yapısal Veri Test Aracı | VarKontrol |
| SEO Uyumlu | VarKontrol |
| Dinamik Başlıklar | Var |
| AMP Adsense Uyumlu | Var |
| Schema.org | Var |
| Temiz ve Kısa Kodlama | Var |
| Özel Renk Şeması | Var |
| Blogger AMP Şablonu | Var |
| 2 Sütun | Var |
| Otomatik Blog Yazısı Özetleme | Var |
| Duyarlı AMP Reklam Alanı | Var |
| Breadcrumbs | Var |
| Footer Widget | Var |
| AMP İlgili Yayınlar | Var |
| AMP Arama Kutusu | Var |
| Özel Sosyal Paylaşım Butonları | Var |
| AMP Responsive | Var |
| Sitemap Navigasyon | Var |
| AMP Kodlama | Var |
| Yeni Popüler Yayınlar Widget'i | Var |
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/AVvXsEgx5C1ReU6v-z3xF28L2Mij8cUVFUWcEw5GlqTy8kYQp14Q4ht8vKCPzdfDvRMODe4by9FgZfKRW4H3yS9xTmkoHwsf-IG3tpscjkj-hy59Vv5smQ4cOnpCAJO5K63pjLRT2beKN40dRKE/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/AVvXsEgx5C1ReU6v-z3xF28L2Mij8cUVFUWcEw5GlqTy8kYQp14Q4ht8vKCPzdfDvRMODe4by9FgZfKRW4H3yS9xTmkoHwsf-IG3tpscjkj-hy59Vv5smQ4cOnpCAJO5K63pjLRT2beKN40dRKE/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/AVvXsEgx5C1ReU6v-z3xF28L2Mij8cUVFUWcEw5GlqTy8kYQp14Q4ht8vKCPzdfDvRMODe4by9FgZfKRW4H3yS9xTmkoHwsf-IG3tpscjkj-hy59Vv5smQ4cOnpCAJO5K63pjLRT2beKN40dRKE/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=bloggerekibi5- 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.