Blogger Şekilli Download ve Demo Butonları Oluşturmak

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.

Yazıyı Beğendiniz mi ?
Sending
User Review
0 (0 votes)

Scriptci

Merhaba arkadaşlar, Bu siteyi kurma sebebim insanların istediği scriptleri tek bir site altında ücretsiz bir şekilde bulmasıydı. Ara ara başka sitelerden bulduğum scriptleri, temaları ve programları da bu sitede paylaşmaktayım.

Bir cevap yazın

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

shares