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.


Beğendin mi? Arkadaşlarınla Paylaş O Zaman!

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
Eğlenceli Eğlenceli
0
Eğlenceli
HMM HMM
0
HMM
Aşık oldum Aşık oldum
0
Aşık oldum
Sesli Güldüm Sesli Güldüm
0
Sesli Güldüm
OMG OMG
0
OMG
Başarılı Başarılı
0
Başarılı
Kenan

0 Comments

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

Bir format seç
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Oylanabilir Liste
Upvote or downvote to decide the best list item
Hikaye/Olay
Gömülü ve Görsellerle Biçimlendirilmiş Metin
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Countdown
The Classic Internet Countdowns
Liste
İlgi Çekici Bir Liste Oluştur
Meme
Upload your own images to make custom memes
Açık Liste
Submit your own item and vote up for the best submission
Video
Youtube, Vimeo veya Vine Kodları
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı