Notification texts go here Contact Us Buy Now!

Blogger Demo ve Download Butonları

Blogger Demo ve Download Butonları
Blog Yazarı
Blogger demo ve download butonları yapma, demo ve download butonları nasıl yapılır?, blogger önizleme butonu yapma, blogger slayt butonları yapma gibi soruların yanıtlarını bu yazımızda bulabilirsiniz.

Bu yazımızda artık sizde sitenize eklemiş olduğunuz bağlantıların demo yada download bağlantılarını şık ve animasyonlu bir şekilde sitenize ekleyip , sitenizin görünüşüne katkıda bulunabilir ve daha şık yapabilirsiniz. Bunun için yapmanız gereken basit bir kaç adım var.

Blogger için Demo ve İndir Butonları Nasıl Yapılır?

  • Blogger giriş.
  • Şablon
  • HTML'yi Düzenle
  • Açılan kodlar üzerinde herhangi bir yere tıklayın CTRL ve F tuşlarına aynı anda basarak arama kutusunu açın.
  • ]]></b:skin> kodunu bulun. Bu kodun üst satırına aşağıdaki  CSS kodlarındaki bütün kodu  ekleyin.
  • Şablonu kaydedin.
  • Gelelim bu butonları yazı aralarımızda nasıl kullanacağımıza.
Diyelimki sadece demo butonunu kullanmak istiyoruz. O zaman HTML kısmındaki üstte bulunan kodları kopyalayıp kodu nerede kullanmak istiyorsak (yayın içinde) oraya ekleyin.

HTML kısmındaki kodları ''gidermisiz'' yazarak ikiye ayırdım. Sadece demo butonu için üsttekini download butonu içinse alttakini ekliyoruz. Her ikisini de kullanmak istiyorsak direkt olarak ''gidermisiniz'' yazısını silin ve HTML kısmında bulunan kodların tamamını alın.

Son olarak HTML kısmındaki kodlarda ''#'' kodları yerine kendi yönlendirmek istediğiniz sayfanın linkini yapıştırmanız yeterli olacaktır. 

 #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;
}

Şimdi gelelim Yayın Sayfamızda kullanacağımız HTML kodlarına ,

 <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>
gidermisiniz
<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>

Bütün işlemler bu kadar herkese kolay gelsin.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.