Blogger AMP Facebook Yorum Eklentisi

4/27/2017 Yorumlar
Blogger AMP Facebook Yorum Eklentisi

Blogger AMP Facebook Yorum Eklentisi - Google AMP HTML tarafından desteklenen Facebook yorum eklentisi artık AMP temalarında kullanılabilir durumda. Harika bir görünümü olan AMP Facebook yorum sistemi kurulumu da oldukça basit.

AMP Facebook yorum sistemine yapılan yorumlar Facebook sayfaları ile senkrinize edilebilir, gelen yorumları blogda ve Facebook uygulamalarını kullanarak fan sayfanızda da görünmesini sağlayabilirsiniz.

Blogger AMP Facebook Yorum Eklentisi Ekleme


Blog sitenize AMP Facebook yorum eklentisini kurmak için, Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın ve aşağıdaki adımları takip edin.

1- Aşağıdaki AMP Facebook HTML kodunu bir aşağıda örnek kodda gösterilen renkli kodun bir satır altına ekleyin.

<b:includable id='fb-comment' var='post'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
</b:includable>

Örnek kod ekleme
<b:includable id='comments' var='post'>
.............
.............
</b:includable>
<b:includable id='fb-comment' var='post'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
</b:includable>

2- Aşağıdaki HTML kodu bir alttaki kodun bir satır altına ekleyin.

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

<b:include data='post' name='post'/>

3- Aşağıdaki meta etiketlerini blogunuzun <head> - </head> kodları arasında bulunan meta etiketlerinin hemen altına ekleyin.

<meta content='Sayfa-ID' property='fb:admins'/>
<meta content='Profil-ID' property='fb:profile_id'/>

Yukarıdaki meta etiketleri içerisinde belirtilen işaretli yerleri değiştirin; Facebook sayfanızın ID kimlik numarasını ve Facebook profil ID numarasını ekleyin.

4- AMP temalarının </head> kodunun üzerinde bulunan javaScript kodlarının hemen altına aşağıdaki AMP Facebook javaScript kodunu ekleyin. Eğer javaScript kodlarınız arasında bu kod bulunuyorsa eklemenize gerek yok.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
</b:if>

Yukarıdaki kodları ekledikten sonra şablonu kaydedin ve blogunuzu kontrol edin.

AMP Facebook Sayfa Yorumları İçin Uygulama Oluşturma

Blogunuza gelen yorumları Facebook sayfanızda görünmesini sağlamak için, daha önce oluşturduğunuz bir uygulama yada yeni oluşturacağınız uygulama ID kimliğinizi aşağıdaki meta etiketinde belirtilen yer ile değiştirin ve meta etiketini blogunuzun meta etiketleri arasına  ekleyin.

<meta content='Uygulama-ID' property='fb:app_id'/>

Yeni bir Facebook uygulaması için buraya tıklayın. Uygulama adınızı FB_Comments gibi oluşturabilirsiniz.

Bu yazımızda AMP tema kullanıcıları için Facebook yorum eklentisi ve kurulumu hakkında bilgiler paylaştık. Blogger kullanıcılarına faydalı bilgiler sunmaya devam ediyoruz, siz de blogumuza abone olarak güncellemelerden haberdar olabilirsiniz.

Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi

4/26/2017 2 Yorumlar
Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi

Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi - Ziyaretçilerimizden Blogger yayın izleme sayacı ile ilgili yoğun talep aldık. Tabii ki Blogger Eklentileri yöneticisi olarak bu talebi karşılamak görevimiz ve blogumuz için de bir onurdur.

Bu yazımızda blog sitesine yayın izleme sayacı ekleme ve uygulama oluşturma ile ilgili ipuçları paylaşacağım. Bu uygulamanın amacı, blog okuyucularının blogda bulunan yazı veya yayınların ziyaretçiler tarafından ne kadar okunduğu, tıklandığı yada görüntülendiği hakkında bilgi vermesidir. Ayrıca blog yöneticilerinin, bu uygulama ile ziyaretçilerin hangi yayınlara ilgi gösterdiğini ve ilgi alanları hakkında da bilgi sahibi olmasını sağlayacaktır.

Blogger İçin Yayın İzleme Sayacı Nasıl Çalışır?

Blogger blogspot sitelerinde bulunan sabit sayfalar ve yayınlar için tek tek görüntülemelerini veya tıklanmalarını izleme sayacı ile takip edebileceksiniz. Blog yayın izleme sayacı aslında bir eklenti değil Google Firebase ile oluşturduğumuz bir uygulamadır. Kurulumu ve kullanımı çok basit olan bu uygulama sizin de oluşturabileceğiniz Firebase projesidir.

Blogger Sayfa ve Yayın İzleme Sayacı Uygulaması Nasıl Eklenir?


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Şimdi izleme sayacını eklemek için aşağıdaki adımları takip edin.

1- CTRL+F yardımıyla kodunu bulun ve aşağıdaki HTML kodu kopyalayıp <data:post.body/> kodunun bir satır üzerine ekleyin.

<span><a expr:name='data:post.id'/><span class='postviews'><span class='eye'/> <span id='postviews'/> Görüntüleme</span></span>

Blogunuzda <data:post.body/> kodu birden fazla olabilir, bu nedenle bu kodların üzerine tek tek ekleyerek deneyebilirsiniz.

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

.postviews {
    float: right;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 12px;
    color: gray;
    border-radius: 2px
}
.postviews .eye {
    top: 1px;
    display: inline-grid;
    opacity: .54;
    background: gray;
    margin: 0 3px 0 0;
    width: 13px;
    height: 13px;
    border: solid 1px #666;
    border-radius: 75% 15%;
    position: relative;
    transform: rotate(45deg)
}
.postviews .eye:before {
    background: #555;
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border: solid 1px #fff;
    border-radius: 50%;
    left: 3px;
    top: 3px
}

3- Aşağıdaki javaScript kodlarını blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;); 
var blogStats = new Firebase(&quot;https://bloggereklentileri-b87be.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr(&#39;name&#39;); 
isnew = true; 
} 
elem.text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Uygulamayı kontrol etmek için blogunuzda herhangi bir sayfayı ziyaret edin.

Blogger İçin Firebase Hesabınızı Oluşturun

Firebase sayfasına giderek hesap oluşturun veya varolan hesabınız ile giriş yapın. Hesabınızı oluşturduktan sonra ana sayfada bulunan Proje ekleye tıklayın. Açılan pencerede Proje adı ile Ülke/bölge ekleyin ve butona tıklayın. Sol menüde yer alan Database ardından üst araç çubuğunda bulunan Kurallar'a tıklayın. Kod aynasında aşağıdaki gibi bir kod görünecektir.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Yukarıdaki kodu aşağıdaki kod ile değiştirin ve Yayınla butonuna tıklayın.

// These rules give anyone, even people who are not users of your app,
// read and write access to your database
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Sol menüde üst tarafta bulunan Ayarlar (icon) > Proje ayarlarına tıklayın. Ve oluşturmuş olduğunuz Proje kimliğinizi göreceksiniz.

Oluşturduğunuz Proje kimliğini yukarıdaki javaScript kodu içerisinde mavi renk ile işaretlenmiş olan yere ekleyin. Böylece blogunuzun izleme sayacı için kendi Proje kimliğinizi oluşturmuş oldunuz.

Blog Yayın İzleme Sayacı İle İlgili Kısa Bilgiler

Blog yayın izleme sayacını blogunuza eklediğinizde sayaç sıfırdan başlayacaktır, bunun blogunuza herhangi zararı yoktur.

Kurulumu yaptıktan sonra Proje kimliği değişikliği veya yapacağınız diğer değişiklikler sayacı sıfırlacaktır.

Blog yayın izleme sayacı ile ilgili bilgileri sizlerle paylaştık, yeni bir blog eklentisi veya projesi için blogumuza abone olun.

Blogger AMP Facebook Beğeni ve Google Plus Üyeleri Kutusu

4/25/2017 3 Yorumlar
Blogger AMP Facebook Beğeni ve Google Plus Üyeleri Kutusu

Blogger AMP Facebook Beğeni ve Google Plus Üyeleri Kutusu - Sosyal medya widget faydalarından biri de ziyaretçi çekmektir. Blog yayınlarının takipçiler tarafından okunması sosyal medya paylaşımlarından daha fazladır. En çok blog takipçileri Facebook Beğeni ve Google Plus Takipçileri widget'larından gelmektedir.

Bu yazımızda blog sitelerinin kenar çubuğuna (Sidebar) AMP Facebook Beğeni ve Google+ Üyeleri kutusunun nasıl ekleneceği ile ilgili bilgiler paylaşacağız.

Blogger AMP Sosyal Medya Widget Eklentileri


1- Facebook beğeni kutusunu AMP blog şablonlarının kenar çubuğuna ekleyerek görünmesini sağlamak için, blogunuzun kumanda panelinden Yerleşim > Sidebar > Gadget ekle yolunu takip ederek aşağıdaki HTML kodu kopyalayın Gadget içerisindeki HTML/javaScript içerisine ekleyin ve kaydedin.

<amp-iframe width="300"
      height="214"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      scrolling="no"
      src="https://rawgit.com/BloggerDizayn/amp-widget/master/like-boxfb.html?page=bloggereklentileri">
</amp-iframe>

2- Google Plus üyeleri kutusunu eklemek için, aşağıdaki HTML kodu yukarıdaki gibi Gadget içerisinde bulunan HTML/javaScript içerisine ekleyin.

<amp-iframe width="280"
      height="240"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      scrolling="no"
      src="https://rawgit.com/BloggerDizayn/amp-widget/master/gplus-follow.html?user=+BloggerEklentileri&theme=dark">
</amp-iframe>

Yukarıdaki HTML kodlar içerisinde bulunan işaretli yerleri değiştirin. Facebook Beğeni ve Google+ Üyeleri HTML kodu içerisine blogunuzun Facebook sayfa ve Google Plus adını ekleyin.

Google + Üyeleri HTML kodu içerisinde bulunan arka plan görünümünü dark bulanık zemin ve light açık zemin olarak değiştirebilirsiniz.
Eklediğiniz Widget'ların HTML kodları içerisine otomatik olarak eklenen ve Widget'ların yüklenme hızının düşüren Hızlı düzenleme <b:include name='quickedit'/> kodlarını kaldırın. Hatta blogunuzun şablon kodları sayfasında CTRL+F yardımıyla bu Hızlı düzenleme kodunu arayın ve bu koda benzer şablon kodlarınız arasında ne kadar varsa tümünü silin. Çünkü bu kodlar blogunuzun hem sorgu sayısını artırmakta hem de Widget'ların yavaş yüklenmesine neden olmaktadır.

Bu yazımızda Blogger AMP şablon kullanıcıları için Facebook Beğeni ve Google+ Üyeleri widget kutularının nasıl oluşturulduğunu ve bloga nasıl eklendiği hakkında bilgiler paylaştık. Blogumuza abone olarak AMP eklentileri ve AMP güncellemeleri ile ilgili bilgilerden haberdar olabilirsiniz.

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.