Anasayfa » blogger » blogger button » blogger download button » Blogger Eklenti » blogger indir butonu » eklenti » Blogger Download Button

Blogger Download Button

Blogger Download Button

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.
Blogger Download Button

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.

Blogger Download Button


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;












}














t AllBloggerTricks */ 

































.abt-button a {








































 /* Get this 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;







uppercase;







w











    height: 50px;



    text-align: center;



    text-decoration: none;

text-transform


osition: rela

:idth: 200px;
    
ptive;
    z-index: 2;



e;

/*TYPE*/
  color: whi


t







align: center;







text-transform: uppercase;
















/*


































  font: 17px/50px Helvetica, Verdana, sans-serif;

text-decoration: none;
  text
-GRADIENT*/ 




background: #00b7ea; /* Old browsers */





9ec3 100%); /* FF3.6+ */







background: -webkit-gradient(linear, left top, left 











  background: -moz-linear-gradient(top, #00b7ea 0%, #0



0bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */







Safari5.1+ */







background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ *











  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+

,/
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */




background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */





abt-button a, .abt-button p {







-webkit-border-radius: 10px;







-moz-border-radius: 10px;



































-webkit-box-shadow















border-radius: 10px;











  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}


.: 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);
}


t: 40px;

.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    heig


h





-ms-transition: margi









    margin: -40px 0 0 10px;

position: absolute;


    transition: margin 

text-align: center;
0.5s ease 0s;


TRANSITION*/ 
  -

width: 180px;
    z-index: 1;
  /
*webkit-transition: margin 0.5s ease;


;
       -o-transition: margin 0.5s eas

-moz-transition: margin 0.5s eas
ee;


5s ease;

n 0
.



adient(top,  #00b7ea 36%, #009ec3 100%)









          transition: margin 0.5s ease;

}
.abt-button:hover .up {


important;
}
.abt-button:hover .down 

margin: -5px 0 0 10px 
!{
    line-height: 35px !important;


;
}
.abt-button a:active {

background

margin: -85px 0 0 10px !importan
t: #00b7ea; /* Old browsers */
background: -moz-linear-g
r; /* FF3.6+ */


%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* 

background: -webkit-gradient(linear, left top, left bottom, color-stop(3
6Chrome10+,Safari5.1+ */


dient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */

background: -o-linear-gr
a





in: -20px 0 0 10px !important;







}







.abt-button:active .down {











margin: -70p











background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */

background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */


#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    mar
gx 0 0 10px !important;
}
</style>

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39


;

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...


" Blogger Download Button " icin 0 yorum :

* Yorum yazarken imla kurallarına dikkat etmeniz sizin ve bizim yararımıza olucaktır.
* Argo, dini, siyasi, vs. tartışma çıkaracak yorumlardan kaçınınız.