Şık Tasarımlı Demo ve Download Butonu Oluşturmak

Merhaba ;

Özellikle indirme ve tema paylaşımı yapan blog veya sitelerin kullandığı indirme ve demo görünüm butonunu sizlerle paylaşmak istedim.
Oldukça şık ve dinamik bir yapıya sahip olan bu eklentiyi nasıl sitenize veya bloğunuza eklemeniz gerektiğini anlatıcam.

1. K.Paneli > Şablon > Html Düzenle adımlarını takip ediyoruz ve ( ctrl+f ) yardımıyla </head> etiketini buluyoruz , hemen üstüne aşağıdaki kodu yapıştırıyoruz ...

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

2. 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)}

3. Ş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="http://bloggereklentideposu.blogspot.com">Demo</a>
<span class="up">Demo için tıklayın</span></div>
<div class="bstbuton">
<a href="http://bloggereklentideposu.blogspot.com">Download</a>
<span class="up">İndirmek için tıklayın</span>
<span class="down">Bloggereklentideposu.blogspot.com</span></div>

Bütün işlem bu kadar.Hayırlı olsun :)

Dipnot

Bu yazı 27 Nisan 2016 Çarşamba günü Unknown tarafından yazılmıştır. Güncel yazılarımızı RSS 2.0 sistemini kullanarak takip edebilir, dilerseniz bu konu hakkındaki düşüncelerinizi yorum bölümünü kullanarak bana ve değerli ziyaretçilerime iletebilirsiniz.