Blogger için Instagram Widget/Eklentisi

Blogger gün geçtikçe gelişiyor, geliştikçe çok güzel görüntüler ortaya çıkıyor. İşte bu eklenti sayensinde instagramdaki resimlerinizi blogunuzun header, sidebar, footer... istediğiniz yerinde yayınlayabileceksiniz. En son eklediğiniz güncel resimlerinizi otomatik olarak blogunuzda/sitenizde ziyaretçilerinize gösterebilirsiniz.

Blogger'a Instagram Widget/Eklentisini Nasıl Yüklerim?

Olmazsa olmazımız: Instagram Access Token
http://instagram.pixelunion.net adresine gidip Generate Access Token'a tıklıyoruz. Önümüze çıkan ekranda Instagram hesabımızla giriş yapmamız gerektiği söyleniyor. Eğer giriş yapmazsak ID'mizi alamayız. Giriş yaptıktan sonra bize bir kod veriyor. O kod şimdilik kenarda dursun. Lazım olduğunda kullanacağız.

1. Adım
Blogger > Tema > HTML'yi Düzenle yolunu izleyip ]]> kodunu bulalım ve aşağıdaki kodu bu kodun hemen üzerine yapıştıralım.

CSS
/* Instagram widget/eklenti Css Başlangıç */
.insta-wrap {
    padding: 0;
    text-align: center;
}
.insta-wrap h2 {
   display:none;
}
.instag ul.thumbnails > li {
width:32% !important;
}
.instag ul.thumbnails > li img:hover {
opacity:.8;
}
.instag ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}
#instafeed {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0
}
#instafeed img {
    height: auto;
    width: 100%
}
#instafeed a {
    padding: 0;
    margin: 0;
    display: inline-block;
    position: relative
}
#instafeed li {
    width: 12.5%;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
    background: #fff;
    border: 0
}
#instafeed .insta-likes {
    width: 100%;
    height: 100%;
    margin-top: -100%;
    opacity: 0;
    text-align: center;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    text-shadow: 2px 2px 8px #fff;
    font: normal 400 11px Roboto, sans-serif;
    color: #222;
    line-height: normal;
    transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -webkit-transition: all .35s ease-out
}
#instafeed a:hover .insta-likes{opacity:1}
.featureinsta {
margin: auto;
position: relative;
transition: all 1s ease;
height: auto;
overflow: hidden;
}
/* Instagram widget/eklenti Css Bitiş */