Blogger AMP Sosyal Paylaşım Butonları

4/25/2017 Yorumlar
Blogger AMP Sosyal Paylaşım Butonları

Blogger AMP Sosyal Paylaşım Butonları - AMP şablon tasarımına uygun yeni eklentiler ile blogculara destek olmaya çalışıyoruz. Blogger sitelerinde AMP şablonları kullanılmaya başladı fakat AMP eklentileri diğer eklentlerden farklı olduğundan dolayı pek uyum sağladığını söyleyemeyiz. Bu yazımızda AMP şablonları için tasarlanmış akordeon sosyal paylaşım butonları ile ilgili ipuçları vereceğiz.

Blogger sitenizde AMP tasarımlı şablon kullanıyorsanız ve farklı özellikli sosyal paylaşım butonları eklemek istiyorsanız aşağıdaki adımları takip edin.

Blogger AMP Sosyal Paylaşım Butonları


AMP sosyal paylaşım butonlarını eklemek için Blogger hesabınıza giriş yapın ve blogunzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki kodları sırasıyla ekleyin.

1- Aşağıdaki AMP javaScript kodlarını </head> kodunun hemen üzerinde bulunan javaScript kodlarının altına ekleyin. Biliyorsunuz ki AMP javaScript kodları AMP şablonlarında bulunan </head> kodunun hemen üzerin yer almaktadır.

<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

2- Aşağıdaki HTML kodu bir altta örnek olarak gösterilen kodun bir satır altına ekleyin. Yani mavi renk ile işaretlenmiş olan </b:includable> kodunun hemen altına ekleyin.

<b:includable id='share-tool' var='post'>
<amp-accordion class='shares'>
<section>
<h4 class='show-share'>
<div class='show-more rotateIn'><i class='material-icons'>&#59405;</i></div>
<div class='show-less rotateIn'><i class='material-icons'>&#58829;</i></div>
</h4>
<div class='share-icon'>
<ul class='slideInUp'>
   <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li>
   <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li>
   <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>
   <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li>
   <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li>
  </ul>
</div>
</section>
</amp-accordion>
<div class='clear'/>
</b:includable>

<b:includable id='postQuickEdit' var='post'>
...........
...........
...........
</b:includable>

3- Aşağıdaki kodu şablon kodlarınız arasında bulunan örnek koda benzer kodu bulun ve mavi ile işaretlenmiş olan </div> kodunun hemen bir satır altına ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<div class='clear'/>
</div>

4- Aşağıdaki CSS kodlarını şablon stil dosyalarınızdan amp-custom dosyası içerisine ekleyin. Stil dosyası: <style amp-custom='amp-custom'> CTRL+F yardımıyla bulabilirsiniz.

amp-accordion.shares{position:fixed;bottom:70px;right:30px;z-index:9999}
amp-social-share{border-radius:100%;box-shadow: 0 6px 12px rgba(0,0,0,.2);background-size:30px}
h4.show-share{background:none;border:none;margin:0;padding:20px}
.show-share .show-less,.show-share .show-more{color:#fff;font-size:24px;width:50px;height:50px;line-height:50px;padding:0;margin:0;text-align:center;border-radius:100%;background:#2196f3;border:none;box-shadow: 0 6px 12px rgba(0,0,0,.2);position:fixed;bottom:30px;right:30px;z-index:10000}
amp-accordion.shares section:not([expanded]) .show-less,amp-accordion.shares section[expanded] .show-more{display:none}
amp-accordion.shares ul,amp-accordion.shares li{list-style-type:none}
amp-accordion.shares li{margin-bottom:5px}
amp-accordion.shares li:last-child{margin-bottom:0}
amp-accordion.shares .share-icon{padding:0;position:absolute;top:100%}
.material-icons {vertical-align: -15%;font-size: inherit;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;}
.slideInUp1,.slideInUp2{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp1{animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both}
.slideInUp2{animation-name:slideInUp;-webkit-animation-duration:2.5s;animation-duration:2.5s;animation-fill-mode:both}
.slideInUp3,.slideInUp4{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp3{animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}
.slideInUp4{animation-name:slideInUp;-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}
.slideInUp,.slideInUp5{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}

5- AMP sosyal paylaşım butonları material icon tasarılı olduğu için şablon kodlarınız arasında material icon font stil dosyası yani aşağıdaki kod bulunmuyorsa aşağıdaki kodu </body> kodunun bir satır üzerine ekleyin. Eğer </body> kodunun üzerine eklediğinizde çalışmıyorsa lütfen bu kodu </head> kodunun bir satır üzerine ekleyin.

<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet' type='text/css'/>

Tüm kontrolleri yaptıktan sonra şablonu kaydedin ve blogunuzu kontrol edin. AMP sosyal paylaşım butonlarını görüntülemek için aşağıdaki butona tıklayın.
Bu yazımızda AMP sosyal paylaşım butonları ile ilgili ipuçlarını paylaşarak blog sitelerine nasıl ekleneceği hakkında bilgiler paylaştık. Blogger AMP eklenti, şablon ve güncellemelerden haberdar olmak için blogumuza abone olun.

Blogger Araçlar Menüsü Eklentisi

4/24/2017 1 Yorum
Blogger Araçlar Menüsü Eklentisi

Blogger Araçlar Menüsü Eklentisi - Blogger sitelerinde çok ziyaret edilen online editör sayfaları veya sabit sayfalara daha hızlı erişim sağlamak için Blogger akordeon araçlar menüsü ve kurulumu hakkında ipuçları paylaşacağım. Blogunuzda veya başka bir blog sayfasına doğrudan erişim sağlamaya yarayan, blogunuzda alan işgal etmeyen ve sadece bu amaç için değil istediğiniz gibi kullanabileceğiniz bir blog eklentisidir.

Blogger Akordeon Araçlar Menüsü


Blogger araçlar menüsünü blogunuza eklemek için Blogger hesabınıza giriş yapın blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki kodları sırasıyla ekleyin.

1- Blogunuzun şablon kodları sayfasında CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
.tool-menu {
    text-transform: inherit;
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
    color: #757575;
    cursor: default;
    padding: 0 0 15px;
    margin: 0;
    min-width: 220px;
    outline: 0;
    position: absolute;
    top: 40px;
    right: 0;
    text-align: left;
    white-space: nowrap;
    z-index: 100000
}
.tool-menu ul {
    margin: 0;
    padding: 0
}
.tool-menu li a,
.tool-menu li span {
    text-decoration: none;
    color: rgb(119, 119, 119);
    !important
}
.tool-menu li a:hover {
    color: #566fbf!important
}
.tool-menu li {
    padding: 10px 10px 5px
}
.tool-menu li:first-child {
    padding: 10px!important;
    margin-bottom: 5px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.12)
}
.makesticking2 .openmenu {
    display: inline-block!important
}
.openmenu {
    height: 48px;
    display: none!important
}
.openmenu .fa {
    font-size: 28px!important;
}
.openmenu a {
    vertical-align: -7px!important;
}
.makesticking2+.open-menu {
    position: fixed;
    top: 52px;
    width: 100%;
    z-index: 100000;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
}
.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
</style>

2- CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.

<script type='text/javascript'>
//<![CDATA[
function openToolmenu() {
        document.getElementById("tool-menu").style.display = "block";
    };
var boxArray = ["tool-menu"];
    window.addEventListener("mouseup", function(e) {
        for (var r = 0; r < boxArray.length; r++) {
            var o = document.getElementById(boxArray[r]);
            e.target != o && e.target.parentNode != o && (o.style.display = "none")
        }
    });
function openMenuheader() {
        document.getElementById("menu-open").classList.toggle("open-menu");
    };
//]]>
</script>

3- Aşağıdaki HTML kodu blogunuzun header bölümü içerisinde görünmesini istediğiniz yere ekleyin.

<div class="menu-tool">
    <div class="menu-toolicon" onclick="openToolmenu()"><i aria-hidden="true" class="fa fa-ellipsis-v"></i>
    </div>
    <div class="tool-menu slideInUp" id="tool-menu" style="display: none;">
        <ul>
            <li><span>Araç Menüsü</span>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-adjust fa-fw"></i> Renk kodu</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML editör</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-paint-brush fa-fw"></i> Photoshop</a>
            </li>
            <li><a href="#" title="..."><i aria-hidden="true" class="fa fa-eye fa-fw"></i> Vitrin</a>
            </li>
            <li><a href="#" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS sıkıştırma</a>
            </li>
            <li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> HTML format</a>
            </li>
            <li><a href="#" rel="nofollow" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> CSS format</a>
            </li>
            <li><a href="#" target="_blank" title="..."><i aria-hidden="true" class="fa fa-code fa-fw"></i> Google drive</a>
            </li>
        </ul>
    </div>
</div>


HTML kod içerisinde işaretlenmiş renkli yerlere bağlantılarınızı ekleyin. Eğer bağlantı blogunuzda dahili bir bağlantı değilse yani dışarıdan çağrılan bir bağlantı ise rel="nofollow" etiketini ekleyin. Blogunuzdaki iç bağlantıları eklemek istiyorsanız rel="nofollow" etiketini eklemeyin, hatta varsa kaldırın. Bağlantıların yeni sekmede açılmasını istiyorsanız bağlantılara target="_blank" etiketini ekleyin.

Bu yazımızda Blogger araçlar menüsü ile ilgili CSS, jQuery ve HTML kodlar hakkında ipuçları paylaşarak kurulumunu anlattık. Basit ve kullanışlı menü, buton ve  bir çok fonksiyonel eklentilerden haberdar olmak için blogumuza abone olun.

CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi

4/24/2017 2 Yorumlar
CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi

CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi - Blog yayın içeriklerini çeşitli sekmelere ayırarak daha basit ve anlaşılır olması için sekmeli yayın oluşturma eklentisini kullanabilirsiniz.

Sekmeli yayın içerikleri genellikle teknoloji ve yazılım ile ilgili sunum yapan bloglar ve web siteleri tarafından kullanılır, farklı türde yayın yapan bloglar veya web siteleri için de kullanılabilir. Blog yayınlarının da daha anlaşılır olması için sekmeli yayın oluşturma eklentisi ile detaylı blog yayınları oluşturabilirsiniz.

Blogger yayınlarında tablo görünümlü sekmeli içerik oluşturmak için aşağıdaki adımları takip edin.

Blogger Sekmeli Yayın Oluşturma Eklentisi


Blog sekmeli yayın oluşturma eklentisi eklemek için Blogger hesabınıza giriş yapın. Eklemek istediğiniz blogun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.

Tablo Görünümlü Tasarım

1- Blogunuzun şablon kodları arasına aşağıdaki CSS kodlarını ekleyin. CSS kodları eklemek için CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodunu </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.tabs-container {
    max-width: 800px;
    margin: 0 auto;
}
ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.tabs li {
    background: none;
    color: #333;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current {
    background: #ddd;
    color: #333;
}
.tab-content {
    display: none;
    background: #eee;
    padding: 15px;
}
.tab-content.current {
    display: inherit;
}
</style>
</b:if>

2- jQuery kodunu şablon kodları arasına eklemek için CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
$(document).ready(function() {
    $('ul.tabs li').click(function() {
        var tab_id $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    }
    )
}
) //]]>
</script>
</b:if>

3- Blog yayınlarında sekmeli içerik oluşturmak için aşağıdaki HTML kodunu yayın editör sayfasının HTML bölümüne ekleyin.

<div class="tabs-container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab-1</li>
        <li class="tab-link" data-tab="tab-2">Tab-2</li>
        <li class="tab-link" data-tab="tab-3">Tab-3</li>
        <li class="tab-link" data-tab="tab-4">Tab-4</li>
    </ul>
    <div id="tab-1" class="tab-content current">
        <p>Açıklama-1</p>
    </div>
    <div id="tab-2" class="tab-content">
        <p>Açıklama-2</p>
    </div>
    <div id="tab-3" class="tab-content">
        <p>Açıklama-3</p>
    </div>
    <div id="tab-4" class="tab-content">
        <p>Açıklama 4</p>
    </div>
</div>


HTML kod içerisinde bulunan Tab-1 ilgili açıklamanın başlığını oluşturmaktadır. Açıklama-1 ise ilgili başlığın açıklamasını oluşturmaktadır.

Akordeon Görünümlü Tasarım

Yukarıdaki gibi aşağıdaki kodları blogunuzun şablon kodları arasına ekleyerek akordeon görünümlü sekmeli yayın oluşturma eklentisini de blonunuzda kullanabilirsiniz.

1- Aşağıdaki CSS kodlarını yukarıdaki gibi </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.container-content {
    max-width:600px;
    margin: 0 auto 10px
}
ul.tabs {
    margin: 0 0 -1px;
    padding: 0;
    list-style: none
}
ul.tabs li {
    background: 0 0;
    display: inline-block;
    margin: 0;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
}
.tab-content,
ul.tabs li.current {
    background: #555;
    color: #fff
}
.tab-content {
    display: none;
    padding: 15px
}
.tab-content.current {
    display: inherit
}
.container-content .tab-content p,
.container-content .tab-content ul,
.container-content .tab-content ol {
    margin: 0
}
.container-content .tab-content ul li,
.container-content .tab-content ol li {
    margin: 0 0 0 20px;
    padding: 0
}
.tab-content a {
    color: #9fe3ff
}
.technical-box {
    display: block;
    line-height: 1.3
}
.technical-box:after {
    content: "";
    clear: both;
    display: block
}
.technical-box .field-name {
    display: inline-block;
    font-weight: 700;
    width: 180px;
    margin: 0;
    position: relative;
    top: 0;
    float: left
}
.technical-box .field-value {
    display: inline-block;
    margin: 0;
    width: calc(100% - 180px);
    float: left
}
.tab-content input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
.hideContent {
    position: relative;
    height: auto;
}
label {
    background: #FF9800;
    display: block;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
label:before {
    position: absolute;
    content: 'Devamı...';
    width: 120px;
    text-align: center;
    left: 50%;
    margin-left: -60px;
    font-weight: bold;
}
.tab-content input[type="checkbox"] ~ div {
    width: 100%;
    overflow: hidden;
    max-height: 144px;
    padding-bottom: 30px;
    position: relative;
}
.tab-content input[type="checkbox"] ~ div:after {
    content: "";
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 15px;
    background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%);
    background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%);
    z-index: 1;
}
.tab-content input[type="checkbox"]:checked ~ div {
    max-height: 3000px;
    transition: 2s;
}
.tab-content input[type="checkbox"]:checked ~ div:after {
    background: 0 0;
}
.tab-content input[type="checkbox"]:checked + label:before {
    content: 'Kapat';
}
@media screen and (max-width: 414px) {
    ul.tabs li {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        background: #7e8b96;
        margin: 0 0 5px;
        color: #fff;
        opacity: .7;
    }
    ul.tabs li.current {
        opacity: 1
    }
}
/*]]>*/
</style>
</b:if>

2- Yukarıdaki jQuery kodunu blogunuzun şablon kodları arasına eklediyseniz tekrardan eklemenize gerek yok.

3- Aşağıdaki HTML kodu yayın editör sayfasının HTML bölümüne ekleyerek kullanabilirsiniz.

<div class="container-content">
<ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Açıklama</li>
        <li class="tab-link" data-tab="tab-2">Teknik bilgi</li>
        <li class="tab-link" data-tab="tab-3">Özellikler</li>
</ul>
<div id="tab-1" class="tab-content current hideContent">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<div>
<p>
Açıklamayı buraya ekleyin.
</p>
</div>
</div>
<div id="tab-2" class="tab-content">
        <span class="technical-box">
<span class="field-name">Başlık:</span> <span class="field-value">Buraya</span>
        <span class="field-name">Dosya adı:</span> <span class="field-value">Buraya</span>
        <span class="field-name">Dosya boyutu:</span> <span class="field-value">Buraya</span>
        <span class="field-name">İşletim sistemi:</span> <span class="field-value">Buraya</span>
        <span class="field-name">Lisans:</span> <span class="field-value">Ücretsiz</span>
        <span class="field-name">Yazar:</span> <span class="field-value"><a href="#" rel="nofollow" target="_blank" class="external-link">Bağlantı adı</a></span>
        </span>
</div>
<div id="tab-3" class="tab-content">
<p>
Diğer açıklamalar buraya.
</p>
</div>
</div>


CSS kodlarında düzenlemeler yaparak sekmeli yayın oluşturma eklentisinin tasarımını istediğiniz gibi değiştirerek blogunuza uygun hale getirebilirsiniz.

Bu yazımızda Blogger ve Web sitelerinde sekmeli yayın oluşturma eklentisi ile ilgili ipuçları paylaştık. Bu eklenti ile ayrıntılı ve detaylı blog yayınlarının daha düzenli oluşturulmasını sağlamış olduk.

Blogger AMP Simple Teması

4/11/2017 Yorumlar
Blogger AMP Simple Teması

Blogger AMP Simple Teması - Mobil internet kullanıcılarının hızla çoğalması ile blog veya web site sahipleri ziyaretçilerini menun etmek için ışık hızında sayfalara sahip olmak istiyor. Blog içerikleri bir blogun en öneli parçası, ancak kullanıcı deneyimine katkı sağlamayan blog sitelerinde ziyaretçiler fazla zaman geçirmek istemiyor.

AMP HTML tabanlı bu blog teması ile blog ziyaretçilerinizin blogunuzda daha fazla zaman geçirmesi ve özellikle sayfa yüklenme sorunlarınızı çözebilecek kadar hızlı bir blog temasıdır. Çok basit bir kullanıma sahip olan AMP Simple teması ile harika yayınlar oluşturabilirsiniz.

Blogger AMP Simple Teması Özellikleri


AMP Simple da diğer AMP temaları gibi bazı özelliklere sahiptir. Bu özellikleri kullanmak için bazı HTML kodlarını da blogunuza eklemeniz gerekmektedir.
ÖZELLİKLERİKULLANILABİLİRKİK
Ekran GörüntüleriVarKontrol
Google Yapısal Veri Test AracıVarKontrol
Mobil Uyumluluk TestiVarKontrol
Sayfa Yüklenme Hız TestiVarKontrol
SEO DostuEvet
Dinamik BaşlıklarEvet
AMP AdsenseEvet
Schema.orgEvet
Yüksek CTREvet
Blogger Kişisel, Yazı ve Niche ŞablonuEvet
Ana Sayfa 2 SütunEvet
Sayfalar ve Sabit Sayfalar 1 SütunEvet
Akordeonicon MenüEvet var
Otomatik DevamıEvet
Duyarlı ve Düzenli Reklam AlanıEvet
BreadcrumbsEvet
Arama KutusuEvet
Kısa ve Temiz KodlamaEvet
AMP KodlamaEvet
Özel Sosyal Paylaşım ButonlarıEvet var
DISQUSEvet var
AMP Simple Teması İle İlgili Kısa Bilgiler

1- Disqus: Şablon kodları arasında bulunan aşağıdaki Disqus kodunda belirtilen yere kendi kullanıcı adınızı ekleyin.

https://rawgit.com/BloggerDizayn/AMPDisqus/master/map-disqus.html?shortname=bloggerekibi

2- Adsense: Şablon kodları arasında bulunan aşağıdaki kodda belirtilen yerlere Adsense kodlarınızı ekleyin.

<div class='postadstop'>
<span>Reklam</span>
<!-- REKLAM 300X250 KODU -->
</div>
<div class='postadsbottom'> <span>Reklam</span> <!-- REKLAM 600X280 KODU --> </div>

AMP Adsense örnek kodu;

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

3- Yayın resimlerinin temanın yapısına uygun olacak şekilde eklemek için, yayınlarınıza eklediğiniz ilk resim ve görsele aşağıda belirtildiği gibi HTML kodları arasına alın.

<noscript>
<div class="separator" style="clear: both; text-align: center;">
 <img alt="xxx" border="0" height="336" src="...png" title="xxx" width="640" />
</div>
</noscript>

Blogger AMP Emporio Teması

4/11/2017 Yorumlar
Blogger AMP Emporio Teması

Blogger AMP Emporio Teması - Emporio, modern bir tarzı olan Blogger AMP şablonudur. Bu şablon kişisel, yazı ve niche blogları için tasarlanmış mükemmel bir görünüme sahiptir. Material şablon tasarımlarını andıran görüntüsü ile diğer temalara kıyasla daha hızlı ve kullanışlıdır.

Blogger AMP Emporio Teması Özellikleri


Tema ile ilgili bazı bilgiler ve yayın oluşturmada kullanılan resim ve spoiler kodları aşağıda paylaşılmıştır.
ÖZELLİKLERİKULLANILABİLİRKİK
Ekran GörüntüleriVarKontrol
Google Yapısal Veri Test AracıVarKontrol
Mobil Uyumluluk TestiVarKontrol
Sayfa Yüklenme Hız TestiVarKontrol
SEO DostuEvet
Dinamik BaşlıklarEvet
AMP AdsenseEvet
Schema.orgEvet
Yüksek CTREvet
Blogger Kişisel, Yazı ve Niche ŞablonuEvet
3 SütunEvet
Akordeonicon MenüEvet var
Otomatik DevamıEvet
Duyarlı ve Düzenli Reklam AlanıEvet
BreadcrumbsEvet
Arama KutusuEvet
Kısa ve Temiz KodlamaEvet
AMP KodlamaEvet
Sosyal Paylaşım ButonlarıEvet var
DISQUSEvet var

Yayınlarda HTML Kod Kullanımı ve Bazı Kısa Bilgiler

1- Spoiler: Blog yayınlarınıza spoiler eklemek için aşağıdaki kodu kullanın.

<div class="spoiler-amp">
<span class="spoiler_title">Spoiler: </span>
<amp-accordion>
<section>
<h4>Başlık</h4>
<div><p>
Yazı ve resimlerinizi buraya ekleyin.
</p></div>
</section>
</amp-accordion>
</div>

2- Separator: Blog yayınları oluştururken eklediğiniz görselin tema düzenine uygun olarak eklemek için, yüklediğiniz görselin HTML kodlarını kodları arasına alın.

<noscript>
<div class="separator" style="clear: both; text-align: center;">
 <img alt="xxx" border="0" height="336" src="...png" title="xxx" width="640" />
</div>
</noscript>

3- Adsense: Adsense kodlarını eklemek için aşağıdaki kodu kullanın.

<amp-ad width="160" height="600"
      type="adsense"
      data-ad-client="ca-pub-0000000000000000"
      data-ad-slot="000000000">
</amp-ad>

4- Disqus: Disqus kullanıcı adınızı eklemek için aşağıdaki kodda belirtilen bloggerekibi yerine kendi kullanıcı adınızı ekleyin.

https://rawgit.com/BloggerDizayn/AMPDisqus/master/map-disqus.html?shortname=bloggerekibi