Blogger Demo ve İndir Butonları Yapmak(Hareketli - En İyisi)

Blog sitenizde slaytlı indir ve demo butonları kullanmak için gerekli kodları gösterdim.

Teknoloji indirme siteleri için birebir olan bu hareketli indir ve demo butonları tam sizin için. Eğer sizin de bir blogger indirme siteniz varsa ve tıkla indir yapıp üzerine link eklemek yerine daha güzel butonlar eklemek istiyorsanız yazının devamını okuyarak bu iki butona ücretsiz sahip olabilirsiniz.



Bu iki butonu kullanmak aslında sandığınız kadar kolay da değil zor da değil. Yapacağınız işlemler sırasıyla blogger'da css kısmında görünümünü ve kodlar kısmına da fonksiyonunu eklemeniz halinde çok kolay bir şekilde kurabileceğiniz bu iki butonu kurmak için aşağıdaki adımları izleyin. Eğer bir yanlış yapıyorsanız lütfen yorumlar kısmında bize bildirin.

DEMO ADRESİ
  1. İlk Önce Blogger'a giriş yapın.
  2. Daha sonra tema düzenle kısmından html düzenle kısmını açın
  3. Çıkan kodların üzerine bir kere tıklararak CTRL + F kombinasyonunu uygulayın.
  4. Daha sonra arama kısmına ]]></b:skin>  Kodunu aratın 
  5. Çıkan kodun üst satırına aşağıda verdiğim kodu ekleyin.


#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

6. Temayı Kaydet diyelim ve çıkalım

Eğer sadece sitenizde DEMO adresi olarak kullanmayı istiyorsanız şu aşağıdaki kodu kullanabilirsiniz.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Buraya Tıkla</span>
</a>
</div>


Eğer Download Butonunu kullanmak isstiyorsanız şu hemen aşağıda verdiğim kodu kullanabilir ve indir butonu olarak kullanabilirsiniz.


<div id="wrap">
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Buraya Tıkla</span>
</a>
</div>


Eğer tek buton yerine iki butonu aynı anda kullanmak istiyorsanız bu sefer şu aşağıda verdiğim kodu kullanarak ikisini de sitenizde kullanabilirsiniz.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Buraya Tıkla</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Buraya Tıkla</span>
</a>
</div>


# İşareti olan kısımlara indirme veya demo adres linklerini yapıştırın.
DEMO ADRESİ
Bu şekilde sitenizde bu iki butonu beraber veya ikisini tek tek şeklinde kullanabilirsiniz. Bu hem blogger hem de wordpress gibi bloglar da entegre edilirse çok kolay bir şekilde kullanılabilir.

Bu yazımı da sonuna kadar okuduğun için teşekkür ederim :) destek olmak için yorum atman yeterli :P


COMMENTS

Ad

Bilgiler,19,Blogger Tema,2,Genel,22,Güncel,17,İnternet,13,Mobil,25,Otomobil,3,Oyun,7,Sinema,3,Sosyal_Medya,4,Sport,3,Teknoloji,10,Windows,4,Wordpress,5,Youtube,1,
ltr
item
Teknokula Teknoloji ve İnternet: Blogger Demo ve İndir Butonları Yapmak(Hareketli - En İyisi)
Blogger Demo ve İndir Butonları Yapmak(Hareketli - En İyisi)
Blog sitenizde slaytlı indir ve demo butonları kullanmak için gerekli kodları gösterdim.
https://4.bp.blogspot.com/-IrMCxTtuqKM/WluEZI0eYxI/AAAAAAAAAAo/KxKvDlvWs5Q82u-V57V3PkC4teXp1o5GQCLcBGAs/s640/blogger-demo-download-butonlari.png
https://4.bp.blogspot.com/-IrMCxTtuqKM/WluEZI0eYxI/AAAAAAAAAAo/KxKvDlvWs5Q82u-V57V3PkC4teXp1o5GQCLcBGAs/s72-c/blogger-demo-download-butonlari.png
Teknokula Teknoloji ve İnternet
http://www.teknokula.org/2018/01/teknoloji-indirme-siteleri-icin-birebir.html
http://www.teknokula.org/
http://www.teknokula.org/
http://www.teknokula.org/2018/01/teknoloji-indirme-siteleri-icin-birebir.html
true
8320687046281048539
UTF-8
Tüm İçerikler Yüklendi Herhangi Bir Yazı Bulunamadı HEPSİNİ GÖR Devamını Oku.. Cevapla Cevabı İptal Et Sil Tarafından Anasayfa Sayfalar İçerikler Hepsini Göster Benzer İçerikler Etiket Arşiv ARAMA YAP.. Tüm İçerikler İSTEĞİNİZ İLE ALAKALI BİR ŞEY BULUNAMADI Geri Dön Pazar Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi PZR PZT SLI ÇAR PER Cum CMT Ocak Şubat Mart Nisan Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık OCK ŞUB Mar NİS MAY HAZ TEM AĞU EYL EKM KAS ARA Şu Anda 1 minute ago $$1$$ Dakika Önce 1 Saat Önce $$1$$ Saat Önce Yesterday $$1$$ Gün Önce $$1$$ hafta Önce 5 Hafta Önce TAKİPÇİ TAKİP ET THIS CONTENT IS PREMIUM PAYLAŞ AÇILSIN TÜM KODLARI KOPYALA TÜM KODLARI SEÇ TÜM KODLAR PANOYA KOPYALANDI KODLARI KOPYALAYAMIYORSAN CTRL + C - CTRL + V KOMBİNASYONU İLE KOPYALA