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İ

• İlk Önce Blogger'a giriş yapın.


• Daha sonra tema düzenle kısmından html düzenle kısmını açın


• Çıkan kodların üzerine bir kere tıklararak CTRL + F kombinasyonunu uygulayın.


• Daha sonra arama kısmına ]]> Kodunu aratın


• Çı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;
}







-Temayı Kaydet diyelim ve çıkalım

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



Demo Butonu Kodu:






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



Download Butonu Kodu





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.

Double Buton Kodu




# İş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

Kaynak: Nasa.... Değil tabiki kaynak şurası: Blogger Download butonu yapmak