Blogger Demo ve Download Butonları

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. 

CSS #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 ,

HTML <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.