MaxRom | Scripturi uCoz Romania

Bannerul tau aici
[ Mesaje noi · Membrii · Regulamentul forumului · RSS ]
  • Pagina 1 din 1
  • 1
Forum » uCoz system » File Catalog » Butonul Descarca
Butonul Descarca
Muşatinu Date: Duminică, 2011-05-01, 14:07 | Message # 1
Mesaje: 1801
Awards: 202
« 53 »

De cateva zile incerc sa fac Soft Util pentru WebMasteri. Cautand descrierea la un soft, am dat de un Buton de descarcare foarte fain....

Unde dorim sa apara butonul punem:

Code
<a href="$FILE_URL$" class="sfdl2">    
    <span>    
    Descarcă<br/>    
    <small>$FILE_SIZE$</small>    
    </span>    
    </a>

Si in CSS punem stilurile:

Code
.sfdl2 { width:165px;height:38px;padding:0;position:relative;font:bold 12px !important; border:1px solid #aaa;display:inline;float:left;text-decoration:none;-moz-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-webkit-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-o-box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;box-shadow:rgba(255, 255, 255, 0.6) 0 1px 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background:#e5e5e5;background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #ccc));background-image:-moz-linear-gradient(top, #fff 0%, #ccc 100%);background-image:linear-gradient(top, #fff 0%, #ccc 100%);text-shadow:#fff 0 1px;margin:0 10px 7px 0;overflow:hidden;color:#555 !important;}
.sfdl2:hover { cursor:pointer !important;text-decoration:none;background:#eee !important;background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #eee));background-image:-moz-linear-gradient(top, #fff 0%, #eee 100%);background-image:linear-gradient(top, #fff 0%, #eee 100%);}
.sfdl2 span { border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;height:29px;line-height:13px;margin:3px;padding:4px 0 0 4px;text-align:left;text-shadow:none;width:123px;float:right;margin-left:20px;color:#FFF;background:#363;background-image:-moz-linear-gradient(center top, #393 0%, #373 100%);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #393),color-stop(1, #373));}
.sfdl2 small { background:no-repeat url(http://maxrom.ucoz.com/Instrumente/softutil/fiveicon.gif);color:#ADC2AD; font-weight:normal;height:34px;left:9px;padding:9px 0 0 30px;position:absolute;top:12px;width:120px;white-space:nowrap;overflow:hidden;font-size:90%;}    

Daca ati intalnit un asa buton interesant anuntate-ne aici.




 
Muşatinu Date: Luni, 2011-05-02, 08:48 | Message # 2
Mesaje: 1801
Awards: 202
« 53 »

Alt Buton:

Unde avem nevoie daugam codul:

Code
<a href="$FILE_URL$" class="download-link" title="Descarcă $ENTRY_TITLE$">
     <span>
       <strong>Descarcă $VERSION$</strong>   
         <em>for $OS$
$INTERFACE_LNG$
size $FILE_SIZE$</em>
      </span></a>

iar in CSS adaugam stilurile:

Code

a.download-link{display:block;padding:5px 0 0 0;margin-bottom:0.1em;text-decoration:none;color:#eeeeee;width:249px;background:url(http://portableapps.com/sites/all/themes/portableappsnew/images/download-portableapps.png) 0 0 no-repeat;text-align:left;line-height:145%;}
a.download-link span{display:block;min-height:37px;padding:10px;}* html a.download-link span{height:37px;}
a.download-link span{background:url(http://portableapps.com/sites/all/themes/portableappsnew/images/download-portableapps.png) 0 100% no-repeat;}
a.download-link strong{font-size:1.6em;text-decoration:none;font-weight:bold;color:#eeeeee;}
a.download-link em{font-style:normal;font-weight:normal;color:#eeeeee;letter-spacing:0;display:block;padding-top:3px;font-size:1em;}
a.download-link:hover,a.download-link:hover span,a.download-link:hover strong{color:white;cursor:pointer;background-position:100% 0;}
a.download-link:hover span{background-position:100% 100%;}



 
Devil Date: Vineri, 2011-05-06, 14:34 | Message # 3
Mesaje: 425
Awards: 15
« 29 »

Alt buton :

Unde vreti sa apara puneti codu:

Code
<?if($FILE_URL$)?>   
<style>a.download:link,   
a.download:visited, a.download:active, .download:link, .download:visited,   
.download:active {text-decoration:none; font-family:arial; color:#fff;   
background:url('http://ucozua.ru/Scripts/9/111111.png') no-repeat top right;   
height:75px; width:325px; display:block;}   
   a.download:hover,   
.download:hover, {text-decoration:none; font-family:arial; color:#fff;   
background:url('http://ucozua.ru/Scripts/9/111111.png') no-repeat top right;   
height:75px; width:325px; display:block;}</style>   

<a   
class="download" href="$FILE_URL$"><br><br><div style="font-size: 11px;   
font-family: tahoma; padding-top:5px; padding-left:250px;">$FILE_SIZE$ mb</div></a>   
<?endif?>


 
Muşatinu Date: Duminică, 2011-05-22, 09:44 | Message # 4
Mesaje: 1801
Awards: 202
« 53 »



Între si
adaugati:
Cod
<?if($USER_AGENT$='opera')?>     
<link type="text/css" rel="StyleSheet" href="http://maxrom.ucoz.com/css/1/btndesc/fixed_opera.css" />     
<?else?>     
<link type="text/css" rel="StyleSheet" href="http://maxrom.ucoz.com/css/1/btndesc/btn.css" />     
<?endif?>


unde doriti sa apara bbutonul adaugati:

Cod
        
  <div class="download-btn" style="margin:15px;">     
  <a href="<?if($FILE_URL$)?>$FILE_URL$<?else?>$RFILE_URL$<?endif?>" class="download-btn" title="Descarca $ENTRY_TITLE$">     
  <span class="title">Descarca fisieru</span><br>     
  <span class="size">Marime: <?if($FILE_SIZE$)?>$FILE_SIZE$<?else?>$RFILE_SIZE$<?endif?></span>     
  </a>     
  </div>
     
Attachments: 3077647.png (2.2 Kb)



 
Muşatinu Date: Duminică, 2013-05-26, 08:04 | Message # 5
Mesaje: 1801
Awards: 202
« 53 »



In CSS adaugam:

Cod
/* Adaptations by coffee aka mozila aka ololowka */   
   .mknop {   
   display: inline-block;   
   margin: 10px 0px;   
   height: 30px;   
   border: 1px solid #419DB8;   
   border-radius: 5px;   
   box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #90C9D8;   
   background: #58bedc;   
   background: -moz-linear-gradient(top, #58bedc 11%, #3097b5 100%);   
   background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#3097b5));   
   background: -webkit-linear-gradient(top, #58bedc 11%,#3097b5 100%);   
   background: -o-linear-gradient(top, #58bedc 11%,#3097b5 100%);   
   background: -ms-linear-gradient(top, #58bedc 11%,#3097b5 100%);   
   background: linear-gradient(to bottom, #58bedc 11%,#3097b5 100%);   
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#3097b5',GradientType=0 );   
   }   

   .mknop:hover {   
   display: inline-block;   
   margin: 10px 0px;   
   height: 30px;   
   border: 1px solid #419DB8;   
   border-radius: 5px;   
   box-shadow: inset 0px 1px 0px #7ACBE3, 0px 1px 0px 0px #fff, 0px 2px 4px 0px #2186A2;   
   background: #58bedc;   
   background: -moz-linear-gradient(top, #58bedc 11%, #21819D 100%);   
   background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#58bedc), color-stop(100%,#21819D));   
   background: -webkit-linear-gradient(top, #58bedc 11%,#21819D 100%);   
   background: -o-linear-gradient(top, #58bedc 11%,#21819D 100%);   
   background: -ms-linear-gradient(top, #58bedc 11%,#21819D 100%);   
   background: linear-gradient(to bottom, #58bedc 11%,#21819D 100%);   
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bedc', endColorstr='#21819D',GradientType=0 );   
   }   

   .mknoplink {   
   padding: 2px 8px;   
   display: inline-block;   
   background: #efefef;   
   background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%);   
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb));   
   background: -webkit-linear-gradient(top, #efefef 0%,#dbdbdb 100%);   
   background: -o-linear-gradient(top, #efefef 0%,#dbdbdb 100%);   
   background: -ms-linear-gradient(top, #efefef 0%,#dbdbdb 100%);   
   background: linear-gradient(to bottom, #efefef 0%,#dbdbdb 100%);   
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 );   
   box-shadow: inset 0px 1px 0px #fff,0px 1px 0px #E5E5E5;   
   border-radius: 3px;   

   text-shadow: 0px 1px 0px #fff;   
   margin: 4px 10px 0px 5px;   
   color: #15586A;   
   font: 14px Arial;   
   }   

   .mknopsize {   
   margin: 0px 10px 0px 7px;   
   display: inline-block;   
   padding: 2px 5px;   
   background: #1A6479;   
   box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;   
   border-radius: 3px;   
   color: #C9F5FF;   
   text-shadow: 0px -1px 0px #0D3E4B;   

   }   

   .mknopdownload {   
   display: inline-block;   
   color: #D6F7FF;   
   text-shadow: 0px -1px 0px #1A6479;   
   }   

   .mknopcifr {   
   margin: 0px 5px 0px 5px;   
   display: inline-block;   
   padding: 2px 5px;   
   background: #1A6479;   
   box-shadow: inset 0px 1px 2px #0A4352, 0px 1px 0px #48C1E3;   
   border-radius: 3px;   
   color: #C9F5FF;   
   text-shadow: 0px -1px 0px #0D3E4B;   
   }   
   .mknorazt {   
   display: inline-block;   
   color: #D6F7FF;   
   text-shadow: 0px -1px 0px #1A6479;   
   }   
   /* ------ */  


In aspectul materialului si comentariile la el din file manager adaugam unde dorim sa apara butonu:

Cod
<?if($FILE_URL$)?><a href="$FILE_URL$"><div class="mknop"><div class="mknoplink">Descarca</div><?if($FILE_SIZE$)?><div class="mknorazt">Size:</div><div class="mknopsize">$FILE_SIZE$</div><?endif?><div class="mknopdownload">Descarcari: <div class="mknopcifr">$LOADS$</div></div></div></a><?endif?>   
   <?if($RFILE_URL$)?><a href="$RFILE_URL$"><div class="mknop"><div class="mknoplink">Descarca</div><?if($FILE_SIZE$)?><div class="mknorazt">Size:</div><div class="mknopsize">$FILE_SIZE$</div><?endif?><div class="mknopdownload">Descarcari: <div class="mknopcifr">$LOADS$</div></div></div></a><?endif?>


[texterror4]Sursa: Necunoscut
Adaptare uCoz: webo4ka.ru

[/texterror4]
Attachments: 9658049.png (5.1 Kb)



 
blak_angel Date: Duminică, 2013-05-26, 09:16 | Message # 6
Mesaje: 55
Awards: 0
« 0 »

Primul imi place tare :)


Design-only
 
Forum » uCoz system » File Catalog » Butonul Descarca
  • Pagina 1 din 1
  • 1
Căutare: