Çok Amaçlı, Sade, Resimli ve Animasyonlu Blogger İndirme Butonları

0 0 4 Kasım 2017 Cumartesi Edit this post

M uhtemelen daha önce hiçbir yerde rastlamadığınız ve hem yukarıdaki görselde hem de aşağıdaki demolarda görmüş olduğunuz harikulade indirme...


Muhtemelen daha önce hiçbir yerde rastlamadığınız ve hem yukarıdaki görselde hem de aşağıdaki demolarda görmüş olduğunuz harikulade indirme butonlarını Blogger'a nasıl ekleyeceğinizi anlatacağım. Anlatımım butonlar ile ilgili tüm ayrıntıları içerecek ve 5 yaşındaki bir çocuğa anlatırmışçasına kolay olacak ki kullanmak isteyenler rahatlıkla kendisi halledebilsin. Butonları indirme butonu, başka sayfaya yönlendiren şekilli bir buton ve daha birçok amaç için kullanabilirsiniz. Tamamıyla hayal gücünüze kalmış. Aşağıya da butonların nasıl göründüğünü gösteren bir link bırakıyorum, göz atabilirsiniz.
Artık görüp beğendiğinize göre yazımı okumaya devam edebilirsiniz. Şimdi bu güzel butonlarla nasıl blogunuzu süsleyeceğinize geçeyim.

  • İlk olarak Blogger panelinden Tema ve ardından HTML'yi düzenle seçeneklerine tıklayın.
  • Karşınıza çıkan kodların bulunduğu alana bir kez tıklayıp Ctrl+F tuşlarına basın.
  • Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna basın. Ardından ]]></b:skin> kodunun bir üst satırına aşağıda vermiş olduğum kodları kopyalayıp yapıştırın.
/*IMG Buttons v1.0.1 */
.imgButton {
    display: inline-block;
    font-size: 12px;
    padding: 1.2em calc(50px + 1.2em) 1.2em 1.2em;
    border-radius: 4px;
    position: relative;
    background-color: #263238;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5);
    margin: 5px;
    overflow: hidden
}

@media (min-width: 560px) {
 .imgButton {
     font-size: 14px;
 }
}

@media (min-width: 768px) {
 .imgButton {
     font-size: 16px;
 }
}

/*fontastic (Custom)*/
@font-face {
    font-family: animated-buttons;
    src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
    font-weight: 400;
    font-style: normal
}

.imgButton[class*=" icon-"]:before,
.imgButton[class^=icon-]:before,
.imgButton[data-icon]:before {
    font-family: animated-buttons!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.imgButton.icon-clip:before {
    content: "\62"
}
.imgButton.icon-cloud:before {
    content: "\63"
}
.imgButton.icon-open:before {
    content: "\65"
}
.imgButton.icon-link:before {
    content: "\66"
}
.imgButton.icon-zip:before {
    content: "\67"
}
.imgButton.icon-download:before {
    content: "\61"
}

.imgButton::after,
.imgButton::before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.imgButton::before {
    font-size: 18px;
    z-index: 5;
}
@media (min-width: 560px) {
 .imgButton::before {
     font-size: 20px;
 }
}

@media (min-width: 768px) {
 .imgButton::before {
     font-size: 22px;
 }
}
.imgButton::after {
    background-color: #00BCD4;
    content: "";
}
.imgButton:active,
.imgButton:focus,
.imgButton:hover {
    text-decoration: none!important;
    color: #fff !important;
}

.imgButton--cyan,
.imgButton--red,
.imgButton--green,
.imgButton--amber,
.imgButton--purple,
.imgButton--indigo,
.imgButton--teal {
    border-width: 2px;
    border-style: solid;
}

.imgButton--cyan {
    background-color: #224851;
    border-color: #00BCD4
}
.imgButton--red {
    background-color: #532f30;
    border-color: #f44336
}
.imgButton--red::after {
    background-color: #F44336
}
.imgButton--green {
    background-color: #3e4935;
    border-color: #8bc34a
}
.imgButton--green::after {
    background-color: #8BC34A
}
.imgButton--amber {
    background-color: #554927;
    border-color: #ffc107
}
.imgButton--amber::after {
    background-color: #FFC107
}
.imgButton--purple {
    background-color: #362d4b;
    border-color: #673AB7
}
.imgButton--purple::after {
    background-color: #673AB7
}
.imgButton--indigo {
    border-color: #3f51b5;
    background-color: #2e324a
}
.imgButton--indigo::after {
    background-color: #3f51b5
}
.imgButton--teal {
    border-color: #009688;
    background-color: #224041
}
.imgButton--teal::after {
    background-color: #009688
}
[class*=imgButton--cover] {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 -100px 100px -80px rgba(0, 0, 0, .3) inset, 0 1px 2px 0 rgba(0, 0, 0, .5);
    font-weight: 700;
}

[class*=imgButton--cover].imgButton--cyan {
    box-shadow: 0 -100px 100px -80px #00BCD4 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--red {
    box-shadow: 0 -100px 100px -80px #f44336 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--green {
    box-shadow: 0 -100px 100px -80px #8bc34a inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--amber {
    box-shadow: 0 -100px 100px -80px #ffc107 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--purple {
    box-shadow: 0 -100px 100px -80px #673AB7 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--indigo {
    box-shadow: 0 -100px 100px -80px #3f51b5 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--teal {
    box-shadow: 0 -100px 100px -80px #009688 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
    }
    10%,
    70% {
        -webkit-transform: translate3d(-5px, 0, 0);
                transform: translate3d(-5px, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(5px, 0, 0);
                transform: translate3d(5px, 0, 0)
    }
}
@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
    }
    10%,
    70% {
        -webkit-transform: translate3d(-5px, 0, 0);
                transform: translate3d(-5px, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(5px, 0, 0);
                transform: translate3d(5px, 0, 0)
    }
}
.imgButton--shake:hover::before {
    -webkit-animation: shake 1s;
            animation: shake 1s
}
@-webkit-keyframes rubber {
    from, to {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
                transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.5, 1.25, 1);
                transform: scale3d(.5, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.2, .85, 1);
                transform: scale3d(1.2, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.9, 1.05, 1);
                transform: scale3d(.9, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
                transform: scale3d(1.05, .95, 1)
    }
}
@keyframes rubber {
    from, to {
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
                transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.5, 1.25, 1);
                transform: scale3d(.5, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.2, .85, 1);
                transform: scale3d(1.2, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.9, 1.05, 1);
                transform: scale3d(.9, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
                transform: scale3d(1.05, .95, 1)
    }
}
.imgButton--rubber:hover::before {
    -webkit-animation: rubber 1s;
            animation: rubber 1s
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform-origin: center;
                transform-origin: center
    }
    to {
        -webkit-transform-origin: center;
                transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
                transform: rotate3d(0, 0, 1, 360deg)
    }
}
@keyframes rotate {
    from {
        -webkit-transform-origin: center;
                transform-origin: center
    }
    to {
        -webkit-transform-origin: center;
                transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
                transform: rotate3d(0, 0, 1, 360deg)
    }
}
.imgButton--rotate:hover::before {
    -webkit-animation: rotate 1s;
            animation: rotate 1s
}
@-webkit-keyframes flip {
    from {
        -webkit-transform: rotate3d(0, 1, 0, -360deg);
                transform: rotate3d(0, 1, 0, -360deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 1, 0, -190deg);
                transform: rotate3d(0, 1, 0, -190deg)
    }
    50% {
        -webkit-transform: rotate3d(0, 1, 0, -170deg);
                transform: rotate3d(0, 1, 0, -170deg)
    }
    to {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
                transform: rotate3d(0, 1, 0, 0deg)
    }
}
@keyframes flip {
    from {
        -webkit-transform: rotate3d(0, 1, 0, -360deg);
                transform: rotate3d(0, 1, 0, -360deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 1, 0, -190deg);
                transform: rotate3d(0, 1, 0, -190deg)
    }
    50% {
        -webkit-transform: rotate3d(0, 1, 0, -170deg);
                transform: rotate3d(0, 1, 0, -170deg)
    }
    to {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
                transform: rotate3d(0, 1, 0, 0deg)
    }
}
.imgButton--flip:hover::before {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation: flip 1s;
            animation: flip 1s
}

.imgButton--cover1 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDo2CGayVsQjY0HVv7n7jvCSzb2Tz3n_d09seQz_Yb09UAJExjzPNNor-9Yrm7s6DvzKgqSVNjJfUjnO-bM_ZDplVF3VWpmtJsG2M705NVmHDQ2pUPoKxcsmW7ngMfQOzXhANss5lVOmg/s1600/cover6.png)
}
.imgButton--cover2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRyDj0aLqUFN9wMlFaDIROntQhEb-ni9vJIU7QomuKS7qLUuIuSM8arhNxJhtOE25tyaniNFtPA6ehRQDhYPL1Js26Go6waNZCD_oI3S89c6LRmE-8zwkpKgsCOx5IWlOgud0gYI-xuQ/s1600/cover2.png)
}
.imgButton--cover3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQVwH4_kpY5GoIKCN7eDhhNTx9yr8yRaIAEdTRurUyD7wp_ZFD1fm3ct4UXVO6bXf6f58XlQbxOSz40i4xNbgyxGdS3mHqpsruH5V0kyN6eRl3DhccqWcNmqJiXdm6LhqT0fsTyuuJP5g/s1600/cover3.png)
}
.imgButton--cover4 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrsYxitGbBEQQpMy4_rUqwZjna8UjrVU9QwcZVzWxtnU6ZdZ1cxQMC-2SfldlbsmR1UB09JCA_f_wZhmUWSVV-Tn2-nhcEvXU7FA85g0wfa8eEU3Hi_weFy-JpWVFu7RKxsBF5WKYfyQY/s1600/cover4.png)
}
.imgButton--cover5 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX4QfcEDnISHun5VD0suugQba6-w57-Y2SQ17V_Q13rqmyuUqukQnWodgrt7JNVvRGHDu6OElTtSBO0pFw_y7XLOcnN2T9X5hda9ogbO4a6XGfL_bClva1bTPR7dQ0nKsycDZu2_AqdIE/s1600/cover5.png)
}
Neredeyse işlemler bitti. Son olarak yapmanız gereken şey Blogger'da yazı editörünün HTML sekmesine tıklamak ve buton kodlarını istediğiniz alana yapıştırmak. İşte o buton kodlarını aşağıda teker teker vereceğim.

1. Temel Buton

Bildiğiniz klasik sade bir buton. Bi numarası yok yani. Kenarları ovalleştirilmiş, yanında ikonu bulunan çift renkli minimal bir buton isteyenlere göre. İkonunu değiştirmek için kod içerisinde bulunan download yerine zip, open, cloud, clip veya link yazabilirsiniz. Butonun ismini değiştirmek için ise kodun en sonunda bulunan "Temel Buton" yerine istediğinizi yazabilirsiniz.

<a class="imgButton icon-download" href="#">Temel Buton</a>

2. Renkli Buton

Bu da yukarıdakinin biraz renklenmiş hali. Geriye kalan her şey aynı. Aşağıya "green" renkte olan butonun kodunu veriyorum. Eğer rengini değiştirmek istiyorsanız "green" yerine red, cyan, amber, purple, indigo veya teal yazabilirsiniz. Aklınızda bulunsun; temel butonun koduna imgButton--green ekledik ve butonumuz renkli oldu
<a class="imgButton imgButton--green icon-download" href="#">Renkli Buton</a>

3. Animasyonlu Buton

Böylece 1 numaradaki temel butonumuza biraz görsellik katmış olduk. Aşağıya "rubber" efektli butonun kodunu veriyorum. Siz "rubber" yerine flip, rotate veya shake yazabilirsiniz ve yine aklınızda bulunsun. Temel butonun koduna imgButton--rubber ekledik ve butonumuz animasyonlu oldu.

Şimdi bir geriye dönelim ve temel butonumuzu hem animasyonlu hem de renkli yapalım. Aklınızda bulunsun diye ne demiştim? Temel butonun koduna imgButton--green ekleyince butonumuzun renkli olduğunu. O zaman aşağıda bulunan animasyonlu buton koduna imgButton--green ekleyince hem animasyonlu hem de renkli hal alacak butonumuz.
  rubber 
<a class="imgButton imgButton--rubber icon-download" href="#">rubber</a>

4. Resimli Buton

Bu da temel butonumuza resim eklenmiş hali. Görsellik açısından güzel duruyor. Aşağıya "cover1" yazan butonun kodunu veriyorum. Resmini değiştirmek istiyorsanız kod içerisinde bulunan "cover1" yerine cover2, cover3... yazabilirsiniz.

Kod içerisinde 5 farklı resim bulunuyor. Bu resimleri nasıl değiştirip 6,7,8... diye artıracağınıza da birazdan geçeceğim. Her şey sırayla. 
<a class="imgButton imgButton--cover1 icon-download" href="#">cover1</a>
Ayrıca yukarılarda butonumuza renk ve animasyon ekleyebileceğinizi söylemiştim. Şimdi kod içerisine imgButton--green ve imgButton--rubber kodlarını ekleyeceğim ve butonu ortaya karışık hale getireceğim. Hatta yeri gelmişken ilk başta bahsettiğim ikon değiştirme olayını da halledelim. Kod içerisinde "download" yerine "open" yazacağım ve ikonu da değiştireceğim.

<a class="imgButton imgButton--green imgButton--rubber imgButton--cover5 icon-open" href="#">cover5</a>

Buton Görselini Değiştirme ve Yeni Görseller Ekleme

Sayfanın en başında CSS kodları vermiştim. Kodun en altında sarı renk ile işaretlediğim yerler var. Bu işaretli yerdeki görselin adresini silip yerine butonda göstermek istediğiniz görselin adresini yapıştırın.

Yeni görseller eklemek istiyorsanız yukarıdaki CSS kodunun altına aşağıda vermiş olduğum kodları ekleyin. Diyelim 6. resmi eklediniz. 7. bir resim daha eklemek istiyorsanız, aşağıdaki kodu yapıştırıp "cover6" yazan kısmı "cover7" yapın. "image.jpg" yazan yere ise görünmesini istediğiniz görselin adresini yapıştırın.
/*Custom IMG*/
.imgButton--cover6 {
    background-image:url(image.jpg);
}

Son Sözler

Bu muhteşem butonlarla nasıl blogunuzu daha güzel hale getirebileceğinizi tüm ayrıntılarıyla anlatmaya çalıştım. Dilerim işinize yarar ve kullanmaya başlarsınız. Anlamadığınız ve takıldığınız bir yer olduğunda yorum ve iletişim bölümünden bana ulaşabilirsiniz. Elimden geldiğince yardımcı olurum. Eklemek ve söylemek istedikleriniz varsa yine yorum ve iletişim bölümlerimin kapıları her zaman açık. Yazının daha çok kişiye ulaşmasını sağlamak için aşağıdaki paylaşım butonlarına tıklayarak sosyal medyalarda paylaşabilirsiniz.

Etiketler:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Ad

1080P,1,11.22.63,1,12 Kızgın Adam,1,4. Sezon,1,AdMob,1,Ads,2,AdSense,23,Aksiyon Filmleri,2,Alcatraz'dan Kaçış,1,Alexa,1,AMP,14,Analiz,1,Android,12,Android Haberleri,1,Android İpuçları,2,Android Uygulamaları,7,Animasyonlu İndirme Butonu,1,Antremanlarla Matematik,1,Apk,1,Apk İndir,1,Arama Açıklaması,1,Arama Motorları,1,Arı,1,Base,1,Başlık Efekt,1,Bilgilendirme,4,Bitcoin,3,Blog,2,Blog Keşif Etkinliği,1,Blog Nasıl Açılır?,1,Blog Rehberi,1,Blogger,71,Blogger Eklentileri,18,Blogger Eklentisi,1,blogger haberleri,1,Blogger İpuçları,48,Blogger İstatistikler Widget'ı,1,Blogger Kodeks,2,Blogger Rehberi,16,Blogger Sayfa Kaydırma Efekti,1,Blogger Sorunları,1,Blogger Tavsiyeleri,1,Blogger Tema,1,Blogger Temaları,28,Blogger Widget'ları,7,Blogger Yedekleme,1,Blogging,4,Buton,2,camera,1,Checker Gmail,1,Clev Note,1,CSS,24,CSS3,17,Deadpool,1,Deadpool İndir,1,Diğer Kategoriler,9,Disqus,7,Dizi,1,Dizi Replikleri,1,Drop Caps,1,Editörün Seçtikleri,4,Eklenti,2,Elementary,1,Etkileşim,1,exi2.net,1,Facebook,1,Film,1,Film Puanlama,1,Film Replikleri,1,Filmler,2,First Character,1,First Letter,1,Flat İcon,1,Font,1,Forever,1,Forrest Gump,1,Fringe,1,Galeri,2,Geçmişin Gölgesinde,1,GetSiteControl,1,Google,3,Google Chrome,2,Google Fonts,1,Google Friend Connect,1,Google Plus,1,Görsel,2,HTML,20,HTML5,13,Instagram,1,Internet,1,İcon,1,İncelemeler,1,İndex,1,İndir,3,İndirme Butonu,1,İnternet,8,iOS,2,İstatistikler,1,İzlediklerim,3,Jailbreak,1,Javascript,29,jQuery,11,Kalıcı Bağlantı,1,Kaliteli Blogger Eklentileri,1,Kaptan Amerika Kahramanların Savaşı,1,Kişisel Blog,1,Kişisel Yazılar,1,Konuk Yazar,2,Logo Efekt,1,Macintosh,2,Material,1,Material Design,3,MeloCloud+ Music Player,1,Meta Açıklaması,1,Mobil,9,Mobil Uyumlu Blogger Temaları,1,Müzik,1,Nasıl Yapılır,5,Nasıl Yapılır?,3,Nedir,2,Off Topic,2,OGInstagram,1,Osmia Avosetta,1,Oyun,3,Özel Başlık Etiketleri,1,Paylaşım,1,PC,2,PC Uygulamaları,1,Pocket,1,Popüler Yayınlar,1,Replikler,1,Resim ve Video,1,Resimli İndirme Butonu,1,Responsive,2,Robots txt,1,Root,2,Schindler'in Listesi,1,Scroll Smooth,1,SEO,40,SEO Ayarları,1,Shareaholic,1,Shareit,2,Sherlock,2,Site Haritası,1,Social Meter,1,Sosyal Medya,2,Sözler,1,Tanıtım,3,Tavsiyelerim,1,Teknoloji,4,Template Clue,1,The Blacklist,1,The Pianist,1,True Detective,2,TVShow Time,2,Uygulama,1,Ücretsiz İkon,1,Üst Sıralara Çıkmak,1,Video,1,Videolar,1,Webmaster,10,Website,1,WhatFont,1,Widget,14,Windows,1,Woorank,1,Word Count,1,WordPress,4,Yabancı Diziler,3,Yardımlaşma,1,Yayın Ayarları,1,Yazar Olmak,1,Yazı,2,Yazı Kutusu,1,Yazı Yazmak,1,Yazılım,1,Yıldız Sıralamalı,1,YouTube,3,Ziyaretçi Trafiği,1,
ltr
item
Sitekodla: Çok Amaçlı, Sade, Resimli ve Animasyonlu Blogger İndirme Butonları
Çok Amaçlı, Sade, Resimli ve Animasyonlu Blogger İndirme Butonları
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PSJsrd5Iafoal8A5SRhXXdLVGniSQs1GGDKd9XjKvGGFBlgQSwUGtZ1gKjZNW71kz1LCwjbu8Bk-Kr7bEGbW731eF1v2RY1hHnARWos7x8SMt4EGJ74D1Ca3Lv4XUh5hIjIWvY6nmk8/s640/%25C3%2587ok+Ama%25C3%25A7l%25C4%25B1%252C+Sade%252C+Resimli+ve+Animasyonlu+Blogger+%25C4%25B0ndirme+Butonlar%25C4%25B1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2PSJsrd5Iafoal8A5SRhXXdLVGniSQs1GGDKd9XjKvGGFBlgQSwUGtZ1gKjZNW71kz1LCwjbu8Bk-Kr7bEGbW731eF1v2RY1hHnARWos7x8SMt4EGJ74D1Ca3Lv4XUh5hIjIWvY6nmk8/s72-c/%25C3%2587ok+Ama%25C3%25A7l%25C4%25B1%252C+Sade%252C+Resimli+ve+Animasyonlu+Blogger+%25C4%25B0ndirme+Butonlar%25C4%25B1.jpg
Sitekodla
https://sitekodla.blogspot.com/2017/11/cok-amacl-sade-resimli-ve-animasyonlu.html
https://sitekodla.blogspot.com/
https://sitekodla.blogspot.com/
https://sitekodla.blogspot.com/2017/11/cok-amacl-sade-resimli-ve-animasyonlu.html
true
9016745788980427262
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy