113
Share via
16 shares, 113 points

Genellikle indirme ve tema paylaşımı yapan blog ya da sitelerin kullandığı indirme ve demo manzara düğmesini sizlerle paylaşmak istedim. Oldukça şık ve hareketli bir yapıya sahip olan bu eklentiyi nasıl sitenize ya da blogunuza eklemeniz gerekliliğini anlatacağım.

Blogger Şekilli Download ve Demo Butonları Oluşturmak
Butonlar – eniyilerde.com

Şablon >> Html Düzenle adımlarını takip ediyoruz ve ( CTRL+F ) sayesinde

</head>

etiketini buluyoruz , derhal üzerine alttaki kodu yapıştırıyoruz .

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Yine aynı sayfadan ctrl+f yardımıyla

</style>

kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.bstbuton{margin:20px auto;padding:20px 0;width:200px}
.bstbuton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.bstbuton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbuton span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbuton .up{background:#e25734;margin:-30px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbuton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.bstbuton:hover .up{opacity:1;transform:translate(0,0)}
.bstbuton:hover .down{opacity:1;transform:translate(0,-90px)}
.bstbutondemo{margin:20px auto;padding:20px 0;width:200px}
.bstbutondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.bstbutondemo a:before{content:'\f08e';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbutondemo a:hover{color:#fff}
.bstbutondemo span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbutondemo .up{background:#444;margin:-28px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbutondemo:hover .up{opacity:1;transform:translate(0,0)}

Şablon kısmına eklememiz gereken kodlar bu kadar.
Aşağıda verdiğim kodları yazılarınızda bu butonları nerede görüntülemek istiyorsanız oraya yapıştırmanız gerekiyor.

<div class="bstbutondemo">
<a href="https://eniyilerde.com">Demo</a>
<span class="up">Demo için tıklayın</span></div>
<div class="bstbuton">
<a href="https://eniyilerde.com">Download</a>
<span class="up">İndirmek için tıklayın</span>
<span class="down">eniyilerde.com</span></div>

İşinize yaradıysa ne mutlu bana arkadaşlar merak ettiğiniz bir kısım olursa ister yorum kısmına isterseniz Eİ Forum kullanarak sorabilirsiniz.


Sizin Tepkiniz Nedir?

Sinirlendim Sinirlendim
0
Sinirlendim
Şaşırdım Şaşırdım
0
Şaşırdım
Başarısız Başarısız
0
Başarısız
HMM HMM
0
HMM
Aşık oldum Aşık oldum
0
Aşık oldum
Güldüm Güldüm
0
Güldüm
OMG OMG
0
OMG
Başarılı Başarılı
0
Başarılı

Facebook Yorumları

yorum

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yazı Formatı Seçiniz
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Kişisel Test
Kişiliğe dair bir şey ortaya çıkarmayı amaçlayan sorular dizisi
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Anket
Karar vermek veya görüş belirlemek için oylama yapmak
Video
Youtube, Vimeo veya Vine Kodları
Send this to a friend