joi, 26 martie 2015

Cum adaugam butoane de Download si Demo in Blogger

In acest articol va voi invata cum sa adaugati butoane elegante pentru Download si Demo in blog-ul Blogger. Aceste butoane CSS le puteti folosi in sectiunea din articol unde indicati link-uri pentru download sau demo.
button pe blogger
Gasiti mai jos cum vor arata aceste butoane pentru Download si Demo in blog. Miscati cursorul mouse-ului pe aceste butoane pentru a sesiza efectul lor de stralucire.

Live Demo

Download


Pentru adaugarea acestor butoane in blog-ul Blogger urmati pasii urmatori:
1. Va logati in contul dvs Blogger;
2. Inainte de toate faceti o copie de rezerva a blogului;
3. Navigati in Sablon apoi in Editati HTML. Cautati urmatorul fragment de cod:
 ]]></b:skin> asa cum am invatat in articolul Cum gasim un tag sau un cod in sablonul Blogger.
4. Dupa ce il gasiti adaugati deasupra lui urmatorul cod CSS:
  
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}


5. Salvati sablonul.

Acum nu ne mai ramane decat sa adaugam butoanele pentru Download si Demo in articolele unde dorim sa le inseram. Pentru a le adauga, dati click in editorul HTML al postarii si in locul unde doriti sa le adaugati lipiti urmatoarele coduri:

Pentru butoul Demo   

<a class="demobutton button" href="pune link-ul tau aici" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>     

Pentru butonul Download

<a class="button downloadbutton" href="pune link-ul tau de download aici" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Inlocuiti pune link-ul tau aici si pune link-ul tau de download aici din cele doua coduri, cu link-urile tale.               Daca ti-a placut, nu uita sa distribui articolul!

Niciun comentariu:

Trimiteți un comentariu

Back to Top