Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

2/23/2017 Yorumlar
Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu - Blog sayfalarında kullanılan ilgili yayınlar (makale) widget'ini biliyorsunuz. Bu widget ile blog yayınlarınızın içerisinde sadece link vererek küçük bağlantılar şeklinde blog yayınlarınızın arasında etikete uygun yayın başlıklarının bir dizi şeklinde görünmesi özelliğini paylaşıyoruz.

Bir önceki yazımızda buna benzer faklı bir yayın paylaşmıştık "Blog Yayınları İçerisine Adsense Reklemları Ekleme" fakat bu biraz daha farklı bir eklenti.

Bu yazımızda blog yayınları arasında ilgili yayın bağlantıların görünmesini sağlayarak hem blogunuzun iç bağlantılarının kalitesini artırarak blogunuzun bağlantılarını iyileştirme amaçlanmıştır. Böylece blogunuz güçlü iç bağlantılara sahip olarak blogunuzun ziyaretçi sayını da artırmış oluyorsunuz. Şim bu özellikleri blogunuzda uygulamak için aşağıdaki adımları takip edin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Nasıl Kurulur?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Şablon kodları sayfasında CTRL+F yardımı ile </head> kodunu bulun ve aşağıdaki javaScript kodunu </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var rtdstrm = new Array(); var rtdstrmNum = 0; var rtdUrls = new Array(); function rtd_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; rtdstrm[rtdstrmNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {rtdUrls[rtdstrmNum] = entry.link[k].href; rtdstrmNum++; break;}}}} function removertdDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < rtdUrls.length; i++) { if(!contains(tmp, rtdUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = rtdUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = rtdstrm[i];}} rtdstrm = tmp2; rtdUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printrtdLabels() { var r = Math.floor((rtdstrm.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < rtdstrm.length && i < 20) { document.write('<li><a href="' + rtdUrls[r] + '">' + rtdstrm[r] + '</a></li>'); if (r < rtdstrm.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

2- Aşağıdaki CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 1
/* İlgi Yayınlar Widget CSS */
.rtd-str{position:relative;padding:0;margin:15px auto;width:100%;}
.rtd-str h4{background:#9e9e9e;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #9e9e9e}
.rtd-str ul{margin:0;padding:0}
.rtd-str ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.rtd-str ul li:nth-child(odd){background:#fefefe}
.rtd-str ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.rtd-str ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#ff5722;overflow:hidden;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.rtd-str a{color:#00bcD4;font-size:13px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;text-decoration:underline}
.rtd-str ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 2


/* İlgi Yayınlar Widget CSS 2 */
.rtd-str{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.rtd-str h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.rtd-str ul{margin:0;padding:0}
.rtd-str ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.rtd-str ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:#ff5722;overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.rtd-str a{color:#00bcD4;font-size:14px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;}
.rtd-str ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.rtd-str{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.rtd-str h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.rtd-str a{font-size:14px;margin:0}.rtd-str a:hover{color:#03a1b5}
.rtd-str ul li{padding:5px 0}
.rtd-str ul li:before,.rtd-str ul li:hover:before{display:none}}
Blogunuzda Font Awesome icon yazı simgesinin kurulu olduğunu kontrol edin.
3- Aşağıdaki HTML kodu eklemek için blogunuzun şablon kodları sayfasında <data:post.body/> kodunu bulun ve aşağıdaki HTML kod ile bu kodu değiştirin. Blogunuzda birden fazla <data:post.body/> kodu olabilir, doğru kodu bulmak için tek tek deneyin.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='rtd-str'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=rtd_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Benzer Konular</h4>
<script type='text/javascript'>
removertdDuplicates();
printrtdLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

4- Son olarak blogunuzu kontrol ederek şablonu keydedin.


Bu yayınımızda ilgili yayın bağlantılarını blog yayınları arasında gösterilmesini anlattık. Bu uyguluma blog okuyucularını asla rahatsız etmez, diğer yayın bağlatılarının da ziyaretçilere görünmesi ile blog içi dolaşımını artırır. Böylece bir blog için faydalı olan bir eklentiyi daha sizlerle paylaştık ve bu bilgilerin blogunuz için çok faydalı olacağını düşünüyorum.
Blog Popüler Yayınlar Yeni Widget Tasarımı

Blog Popüler Yayınlar Yeni Widget Tasarımı

2/23/2017 Yorumlar
Blog Popüler Yayınlar Yeni Widget Tasarımı

Blog Popüler Yayınlar Yeni Widget Tasarımı - Blog popüler yayın widget'i yani tasarı ile sayfanızın canlılık kazanmasını ve yayınlarınıza olan ilginin artmasını sağlamaktadır. Blogunuzun popüler yayın widget'ini yeniden tasarlamak için aşağıdaki adımları takip edin. Bunun için sizlere CSS hakkında ipuçları vereceğim.

Blog Popüler Yayın Widget'ini Yeniden Tasarlama


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun editör sayfasını yani şablon kodları sayfasını açın. CTRL+F yardımı ile ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

Eğer kodları ekledikten sonra popüler yayın resminde bozulma oluyorsa, daha önce paylaşmış olduğumuz "Blog Popüler Yayınlar Resimlerini Yeniden Boyutlandırma" yayını gözden geçirin.

Stil 1 Turuncu

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#dd8231}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Blog Popüler Yayınlar Yeni Widget Tasarımı

Stil 2 Mavi

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#54a5db}
#PopularPosts1 ul{padding:0;background:#54a5db;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Stil 3 Siyah

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#222}
#PopularPosts1 ul{padding:0;background:#222;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}


CSS kodlarını ekledikten sonra blog şablonunu kaydedin. Şablonu kaydettikten sonra blogunuzu kontrol edin, muhtemelen popüler yayınlar resim düzeninden başka sorun olmayacaktır. Yukarıda bilgi amaçlı eklediğimiz sayfada yeterli bilgiler bulamadıysanız ve sorunu gideremiyorsanız bu yayına yorum yaparak sorunlarınızı belirtebilirsiniz.
Blogger Yeni AMP Teması

Blogger Yeni AMP Teması

2/22/2017 1 Yorum
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.
Material Design Blogger Teması

Material Design Blogger Teması

2/21/2017 Yorumlar
Material Design Blogger Teması

Material Design Blogger Teması - Material tasarım sitili ile basit ve temiz kodlanmış harika bir blog temasıdır. CSS3 + HTML kodlaması ile özellik Google uyumlu olmasının yanı sıra Awesome LightBox özelliği ile de tasarımına renk katmıştır. HTML açılır menü, özel sosyal paylaşım ve yayınlarda kullanabileceğiniz muhteşem butonlara sahiptir.

Material Design Button

Daha önce yayınladığımız Material Tasarımlı Blogger Teması'nda da Awesome LightBox özelliği mevcuttur.

Material Design Blogger Teması Özellikleri


En iyi kullanıcı deneyimine sahip olan material tasarım blogger temasının özelliklerinden sadece bir kaçını sizlerle paylaşıyoruz. Diğer özelliklerini ve eklentilerini de sizlerle paylaşacağız.
ÖZELLİKLERİKULLANILABİLİRKİK
Mobil Uyumluluk TestiVar Kontrol
Google Yapısal Veri Test AracıVarKontrol
SEO DostuVarKontrol
Dinamik BaşlıklarVar
Adsense UyumluVar
Schema.orgVar
Temiz ve Kısa KodlamaVar
Özel Renk ŞemasıVar
Material Design Blogger ŞablonuVar
2 SütunVar
Otomatik Blog Yazısı ÖzetlemeVar
Duyarlı Reklam AlanıVar
BreadcrumbsVar
Footer Kısayol LinkleriVar
Benzer YayınlarVar
Awesome Özel Arama KutusuVar
Özel Sosyal Paylaşım ButonlarıVar
Awesome LightBoxVar
CSS3 + HTML Özel NavigasyonVar
Özel Resim EfektiVar
Kısa KodlamaVar
Özel Abone BülteniVar
CSS3 + HTML Açılır MenüVar
Özel İletişim Formu WidgetVarEkle
Material Tasarımlı Blogger Teması

Material Tasarımlı Blogger Teması

2/19/2017 Yorumlar
Material Tasarımlı Blogger Teması

Material Tasarımlı Blogger Teması - Blogger şablonlarına bir yenisini daha ekliyoruz, material tasarım stili ile harika bir görünüme sahip ve hızlı yanıt veren basit ve temiz kodlanmış blogger temasıdır. Tüm cihazlara uyumlu yapısı ile kullanıcı deneyimine katkı sağlamaktadır. Kendine has renk özelliğinin yanı sıra özel menülere de sahiptir.

Material Tasarımlı Blogger Şablonu Özellikleri


Aşağıdaki özelliklerin yanı sıra daha bir çok özelliği de bünyesinde barındırmaktadır. Bu temanın daha bir çok özelliğini sizinle paylaşacağız.
ÖZELLİKLERİKULLANILABİLİRKİK
Mobil Uyumluluk TestiVar Kontrol
Google Yapısal Veri Test AracıVarKontrol
SEO DostuVarKontrol
Dinamik BaşlıklarVar
Adsense UyumluVar
Schema.orgVar
Temiz ve Kısa KodlamaVar
Özel Renk ŞemasıVar
Material Tasarım Blogger ŞablonuVar
2 SütunVar
Otomatik Blog Yazısı ÖzetlemeVar
Duyarlı Reklam AlanıVar
BreadcrumbsVar
Footer Kısayol LinkleriVar
Benzer YayınlarVar
Awesome Özel Arama KutusuVar
Özel Sosyal Paylaşım ButonlarıVar
Özel 404 Hata SayfasıVar
CSS3 + HTML Özel NavigasyonVar
Özel Resim EfektiVar
Kısa KodlamaVar
Özel Abone BülteniVar
CSS3 + HTML Açılır MenüVar
Özel İletişim Formu WidgetVarEkle
Material tasarımlı blog temasını tam sürümü 50 TL olup, hiç bir kod şifrelemesi bulunmamaktadır. Tam sürümünü satın almak için lütfen iletişim sayfasından bizi ulaşın.
Aşağıdaki butonlara tıklayarak temayı inceleyebilir ve indirebilirsiniz.