Slayt Demo ve Download Butonları Yapımı

Ekim 10, 2015
Slayt Demo ve Download Butonlari Yapimi

Blogger Slayt Demo ve Download Butonları Yapımı. Blogger bloğumuzda okuyucularımızla bazen bir şablon, word dosyası veya powerpoint sunusu gibi içerikler paylaşma isteği duyuyoruz. Okuyucularınızın indirmesi gereken bir dosyayı gösterirken burayı tıklayın indirin gibi basitçe indir linki yolunu göstermektense şimdiki paylaşacağım butonlar aracılığıyla gösterirseniz bloğunuzun daha profesyonel ve anlaşılır görünmesini sağlayabilirsiniz. Uzatmadan anlatmaya başlayayım



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

1. Blogger giriş.
2. Şablon
3. HTML'yi Düzenle
4. Açılan kodlar üzerinde herhangi bir yere tıklayın CTRL ve F tuşlarına aynı anda basarak arama kutusunu açın.
5. ]]></b:skin> kodunu bulun. Bu kodun üst satırına aşağıdaki kodları 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. Şablonu kaydedin.
7. Gelelim bu butonları yazı aralarımızda nasıl kullanacağımıza. 

Diyelimki sadece demo butonunu kullanmak istiyoruz. O zaman aşağıdaki kodları yeni yayın sayfamızda yani bu yazıları yazdığımız yerde sol üstte Oluştur ve HTML butonları var HTML yazana tıklıyoruz ve eklemek istediğimiz yere aşağıdaki kodları yapıştırıyoruz. Bu yazının sonuna ekleyeceksem eğer HTML kodları içerisinde bu parağrafı buluyorum ve oraya yapıştırıyorum.


<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 Sadece İndir butonunu kullanmak istiyorsak bu kez aşağıdaki kodları yapıştırıyoruz.


<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 her iki butonu birden kullanmak istiyorsak aşağıdaki kodları yapıştırıyoruz.


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

# işaretli yerleri indirme veya demo linkinizle değiştirin.

8. İşlemler bu kadar. 

Blogger için slayt şeklinde indir butonu ve demo butonu nasıl yapılır konusu anlattım. Takıldığınız yerleri yorumla sormaktan çekinmeyin lütfen. Destek olmak için buradan bloğumu izlemen yeterli parayla değil hani

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

8 Yorum
avatar

Özellikle tema siteleri iin harika bir eklenti bende arşivime alacağım teşekkür ederim güzel paylaşımınız için

Yanıtla
avatar

Birçok buton gördüm ama bunun slayt şeklinde oluşu ve indir yazısının altında başka bir yazı çıkması çok güzel. Nteşekkürler

Yanıtla
avatar

Ziyaretiniz için ben teşekkür ederim Gökhan Bey.

Yanıtla
avatar

Evet slayt özellikli buton olmaları diğerlerine göre daha profesyonelce. Ben teşekkür ederim ziyaretiniz için.

Yanıtla
avatar

İçerisine noFollow özelliği eklendiğinde slayt ve sol taraftaki buton ikonu bozuluyor.

Yanıtla
avatar

merhabalar bunu nasıl yapacağız , anlatırmsınız çok hoş http://www.arlinadzgn.com/2014/11/simple-button-demo-dan-download.html

Yanıtla
avatar

Merhabalar, diğer yazımda anlatırım o konuyu. Takipte kalın.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔