BloggerKategoriler

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

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 😛
(adsbygoogle = window.adsbygoogle || []).push({});

var c = document.getElementById(“makale”); function boyutlandir(multiplier) { if (c.style.fontSize == “”) { c.style.fontSize = “1.0em”; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + “em”; }

Etiketler

İlgili Makaleler

Close