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.

Ön İzleme

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.