Blogger kitlesi her geçen gün çoğalıyor. Tabii çoğaldıkça yeni eklentiler temalar... çıkıyor. Buton olarak ise çoğu blogda kullanılan css animasyonlu (baloncuklu) butonlar popüler olmuştu. Kast ettiğim butonu hemen aşağıdaki gif resimini inceleyerek hatırlayabilirsiniz.
Yine internette sörf yaparken karşıma çıkan şahane bir download (indirme) butonu karşıma çıktı ve bu butonu hemen full.cyberadam.net'te kullanmaya başladım.
Daha çok indirme-download sitelerine uygun tasarlanan butonun önizlemesini aşağıdaki gif resimde görebilirsiniz.
| Nasıl eklenir-kullanılır? |
Aşağıdaki kodları </body> kodunun hemen üstüne yapıştırın.
<style>
.abt-button {
margin: 50px auto;
width: 200px;
}
/* Get this button at AllBloggerTricks */
.abt-button a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
display: block;
font: 17px/50px Helvetica,Verdana,sans-serif;
height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.abt-button:hover .up {
margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
margin: -70px 0 0 10px !important;
}
</style>
Kullanacağınız yayının veya sayfanın HTML kısmına yapıştırn.
<div class="abt-button">
<a href="#">Download</a>
<p class="up">Hotfile</p>
<p class="down">1.2MB .zip</p>
</div>
| Düzenlemeniz gerekler: |
# : İndirme linki
Download : İndir ile veya herhangi bir yazı değiştirebilirsiniz.
Hotfile : İndirme sitesinin adı veya istediğiniz bir yazı.
1.2MB .zip : Dosya boyutu veya istediğiniz bir yazı.
Kendimizi övmek gibi olmasın fakat yine her zamanki gibi güzel bir yayınımızlar sizlere yardımcı olduğumuzu düşünüyoruz.
Tekrar güzel bir yayında görüşmek üzere...
İlgili Aramalar: Blogger, Blogger Eklenti, eklenti, blogger indir butonu, blogger download button, blogger button, button, css button, blogger css button, blogger css buton kodları, kodlar, buton kodları,
4 yorum
Bi Ara Denerim.
Denemeye gerek yok çalışıyor :d bende bi ara sitedeki bütün butonları bu buton ile değiştirmeyi planlıyorum (o)
Gayet Kullanışlı Bir Şeye Benziyor, Buna Benzer Başka Butonlar Bulursan Paylaşırmı' sın.?
Bakıyorum Arıyorum Google' de Butonları Bile Para İle Satıyolar.
Tabikide buldukça paylaşırım (o)
* Belirli sitelerde üyeliğiniz yok ise Anonim ya da Adı/Url seçeneğini kullanarak yorum yapabilirsiniz.
* Yorumuna gelen cevaptan haberdar olmak için yorum kutusunun sağ alt köşedeki "beni bilgilendir" adlı kutuyu işaretlediğinizde bilgilendirme mail adresinize gelicek.