Blogger Gösterisli Demo ve Download Butonu Olusturmak

Merhabalar,

Blogger da eklenti yayınlarına başlamış bulunmaktayız ☺ İlk yayınımız da sizlere blogger da genelde tema paylaşım sitelerinin kullanabileceği bir eklentiyi sizlerle paylaşıyorum.

Bu şık ve gösterişli eklentiyi oluşturmak o kadar da zor değil. Sadece yapmanız gereken şey aşağıda vereceğim adımları sırasıyla uygulamak olacaktır.

•  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'/>

• Yine aynı sayfadan sırasıyla 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.

• Şimdi ise 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://tastanblog.blogspot.com/">Demo</a> <span class="up">Demo için tıklayın</span></div> <div class="bstbuton"> <a href="https://tastanblog.blogspot.com/">Download</a> <span class="up">İndirmek için tıklayın</span> <span class="down">https://tastanblog.blogspot.com/</span></div>

GÖRÜNÜMÜ BU ŞEKİLDE OLACAKTIR 

Evet herşey bu kadar basit arkadaşlar. Herhangi bir sıkıntı yaşayanlar yorum kısmında belirtirse yardımcı olmaya çalışırım. Herkese iyi bloglar ☺